feat(core): migrates angular to ^15.0.0 (#54)

* feat(core): migrates angular to `^15.0.0-next.5`

* feat(core): migrates NX to `15.0.0`

* feat(core): migrates angular deps to `15.0.0-next.6`

* fix(deps): fixes incompatible css/scss issues

* fix(deps): fixes incompatible css/scss issues

* chore(deps): upgrades to angular deps to 15.0.0-rc.0

* chore: updates angular deps to 15.0.0-rc.1

* chore: fixes `panelClass` is not being honored

* fix(snack-bar): updates css variables to in snack bar

* release: bumps version to 15.0.0-rc.2

* build: updates npm_publish.yml file

* release: bump version to 15.0.0-rc.3

* fix: adds css classes to success and delete buttons

* release: bump version to 15.0.0-rc.5

* release: bump version to 15.0.0-rc.6

* fix(bs-link): fixes an issue that does not show link color

* release: bump version to 15.0.0-rc.7

* release: bump version to 15.0.0-rc.8

* release: bump version to 15.0.0

README.md

@@ -27,9 +27,9 @@ and use it as shown below in each section
     ```
 3. Then navigate to `dist` directory anf publish the library to NPM. If prompted, enter the 2fa auth code from the Authenticator app.
     ```shell
-    cd dist/libs/ngxsmart && npm publish --access public
+    cd dist/libs/ngxsmart && npm publish --tag latest
     ```
-
+    For beta releases use tag `--tag beta`
 
 ### Technologies
 1. Angular 13+

angular.json

@@ -10,7 +10,7 @@
 			"architect": {
 				"build": {
 					"builder": "@nrwl/angular:package",
-					"outputs": ["dist/libs/ngxsmart"],
+					"outputs": ["{workspaceRoot}/dist/libs/ngxsmart"],
 					"options": {
 						"project": "libs/ngxsmart/ng-package.json"
 					},
@@ -26,7 +26,7 @@
 				},
 				"test": {
 					"builder": "@nrwl/jest:jest",
-					"outputs": ["coverage/libs/ngxsmart"],
+					"outputs": ["{workspaceRoot}/coverage/libs/ngxsmart"],
 					"options": {
 						"jestConfig": "libs/ngxsmart/jest.config.ts",
 						"passWithNoTests": true
@@ -121,7 +121,7 @@
 				},
 				"test": {
 					"builder": "@nrwl/jest:jest",
-					"outputs": ["coverage/apps/ngxsmart-demo"],
+					"outputs": ["{workspaceRoot}/coverage/apps/ngxsmart-demo"],
 					"options": {
 						"jestConfig": "apps/ngxsmart-demo/jest.config.ts",
 						"passWithNoTests": true

apps/ngxsmart-demo/src/app/buttons-demo/buttons-demo.component.html

@@ -1,17 +1,24 @@
 <div class="m-5">
-	<primary-button (click)="setLoading()" [loading]="loading" class="m-3" label="Primary Button"></primary-button>
-	<save-primary-button (click)="setLoading()" [loading]="loading" class="m-3" label="Save Primary Button"></save-primary-button>
-	<view-primary-button class="m-3"></view-primary-button>
-	<view-button></view-button>
-	<hr />
-	<edit-button label="Edit Button" class="m-3"></edit-button>
-	<edit-svg-icon-button label="Edit Svg Icon Button" class="m-3"></edit-svg-icon-button>
-	<edit-bs-button label="Edit Bootstrap Button" class="m-3"></edit-bs-button>
-	<bs-link-button label="Bootstrap Link Button" class="m-3"></bs-link-button>
+  <primary-button (click)="setLoading()" [loading]="loading" class="m-3" label="Primary Button"></primary-button>
+  <save-primary-button (click)="setLoading()" [loading]="loading" class="m-3"
+                       label="Save Primary Button"></save-primary-button>
+  <view-primary-button class="m-3"></view-primary-button>
+  <view-button></view-button>
+  <hr />
+  <edit-button class="m-3" label="Edit Button"></edit-button>
+  <edit-svg-icon-button class="m-3" label="Edit Svg Icon Button"></edit-svg-icon-button>
+  <edit-bs-button class="m-3" label="Edit Bootstrap Button"></edit-bs-button>
+  <bs-link-button class="m-3" label="Bootstrap Link Button"></bs-link-button>
 
-	<hr />
-	<manage-button class="m-3"></manage-button>
-	<search-button class="m-3"></search-button>
-	<pdf-export-button class="m-3"></pdf-export-button>
-	<excel-export-button class="m-3"></excel-export-button>
+  <hr />
+  <success-button (click)="setLoading()" [loading]="loading" class="m-3"
+                  label="Success Button"></success-button>
+  <delete-button (click)="setLoading()" [loading]="loading" class="m-3"
+                 label="Delete Button"></delete-button>
+
+  <hr />
+  <manage-button class="m-3"></manage-button>
+  <search-button class="m-3"></search-button>
+  <pdf-export-button class="m-3"></pdf-export-button>
+  <excel-export-button class="m-3"></excel-export-button>
 </div>

apps/ngxsmart-demo/src/app/buttons-demo/buttons-demo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import {
 	BsLinkButtonComponent,
+	DeleteButtonComponent,
 	EditBsButtonComponent,
 	EditButtonComponent,
 	EditSvgIconButtonComponent,
@@ -10,6 +11,7 @@ import {
 	PrimaryButtonComponent,
 	SavePrimaryButtonComponent,
 	SearchButtonComponent,
+	SuccessButtonComponent,
 	ViewButtonComponent,
 	ViewPrimaryButtonComponent,
 } from '@ngxsmart/ngxsmart';
@@ -33,6 +35,8 @@ import { CommonModule } from '@angular/common';
 		BsLinkButtonComponent,
 		ManageButtonComponent,
 		SearchButtonComponent,
+		SuccessButtonComponent,
+		DeleteButtonComponent,
 	],
 	templateUrl: './buttons-demo.component.html',
 	styles: [``],

apps/ngxsmart-demo/src/app/snack-bar-demo/snack-bar-demo.component.ts

@@ -10,12 +10,10 @@ import { MatButtonModule } from '@angular/material/button';
 	providers: [MatSnackBarService],
 	template: `
 		<div class="center_div">
-			<button mat-raised-button color="primary" (click)="mdc.success('Update Success', { duration: 200000 })">
-				Show Success Snack Bar
+			<button mat-raised-button color="primary" (click)="mdc.success('Update Success')">Show Success Snack Bar</button>
+			<button style="margin-left: 30px" mat-raised-button color="warn" (click)="mdc.error('Failed to update the record')">
+				Show Error Snack Bar
 			</button>
-			<br />
-			<br />
-			<button mat-raised-button color="warn" (click)="mdc.error('Failed to update the record')">Show Error Snack Bar</button>
 		</div>
 	`,
 })

apps/ngxsmart-demo/src/assets/app-buttons.scss

@@ -0,0 +1,35 @@
+@import 'app-variables.scss';
+
+.primary-button,
+.primary-button:hover,
+.primary-button:active,
+.primary-button:visited {
+  color: white !important;
+  background-color: var(--primary-color) !important;
+}
+
+.secondary-button,
+.secondary-button:hover,
+.secondary-button:active,
+.secondary-button:visited {
+  color: white !important;
+  background-color: var(--secondary-color) !important;
+}
+
+/* Adds CSS for Success Button class */
+.success-button,
+.success-button:hover,
+.success-button:active,
+.success-button:visited {
+  color: white !important;
+  background-color: var(--success-color) !important;
+}
+
+/* Adds CSS for Delete Button class */
+.delete-button,
+.delete-button:hover,
+.delete-button:active,
+.success-button:visited {
+  color: white !important;
+  background-color: var(--delete-color) !important;
+}

apps/ngxsmart-demo/src/assets/app-mat-snack-bar.scss

@@ -1,37 +1,26 @@
-@import "app-variables.scss";
 
 .success-snackbar {
   color: white;
-  background-color: $success-color;
-  .mat-simple-snackbar-action {
-    color: white;
-  }
+  --mdc-snackbar-container-color: var(--success-color);
+  --mat-mdc-snack-bar-button-color: var(--white-color);
 }
 
 .error-snackbar {
-  max-width: max-content !important;
   color: white;
-  background-color: $delete-color;
-  border-color: #f5c6cb;
-  .mat-simple-snackbar-action {
-    color: white;
-  }
+  --mdc-snackbar-container-color: var(--delete-color);
+  --mat-mdc-snack-bar-button-color: var(--white-color);
 }
 
 .light-success-snackbar {
   color: #155724;
   background-color: #d4edda;
-  .mat-simple-snackbar-action {
-    color: darkgreen;
-  }
+  --mdc-snackbar-container-color: #d4edda;
+  --mat-mdc-snack-bar-button-color: darkgreen;
 }
 
 .light-error-snackbar {
   color: #721c24;
-  background-color: #f8d7da;
+  --mdc-snackbar-container-color: var(--success-color);
+  --mat-mdc-snack-bar-button-color: darkred;
   border-color: #f5c6cb;
-  .mat-simple-snackbar-action {
-    color: darkred;
-  }
-}
-
+}

apps/ngxsmart-demo/src/assets/app-variables.scss

@@ -1,7 +1,8 @@
-/* Define global styles */
-$primary-color: #153d77;
-$secondary-color: #6c757d;
-$white-color: #fff;
-$success-color: #198754;
-$delete-color: #dc3545;
-$background-color: #f2f2f2;
+:root {
+  --primary-color: #153d77;
+  --secondary-color: #6c757d;
+  --white-color: #fff;
+  --success-color: #198754;
+  --delete-color: #dc3545;
+  --background-color: #f2f2f2;
+}