diff --git a/README.md b/README.md index ed87adf..56e7210 100644 --- a/README.md +++ b/README.md @@ -12,27 +12,27 @@ Most commonly used Angular utility libraries ### Installation Install the library ```shell -$ npm install @ngxsmart/ngxsmart +npm install @ngxsmart/ngxsmart ``` and use it as shown below in each section ### Publish library to NPM 1. Build the library -```shell -$ nx build ngxsmart -``` + ```shell + nx build ngxsmart + ``` 2. If the NPM token is not configured, open `~/.npmrc` and add the following line: -```shell -//registry.npmjs.org/:_authToken= -``` + ```shell + //registry.npmjs.org/:_authToken= + ``` 3. Then navigate to `dist` directory -```shell -$ cd dist/libs/ngxsmart -``` + ```shell + cd dist/libs/ngxsmart + ``` 3. Publish the library using the following command. If prompted, enter the 2fa auth code from the Authenticator app. -```shell -$ npm publish --access public -``` + ```shell + npm publish --access public + ``` ### Technologies diff --git a/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.html b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.html new file mode 100644 index 0000000..ea3a96a --- /dev/null +++ b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.html @@ -0,0 +1,23 @@ +
+

Success Alert

+ + Success Alert + +
+ +
+

Error Alert

+ + Error Alert + +
+ +
diff --git a/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.scss b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.spec.ts b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.spec.ts new file mode 100644 index 0000000..b7c6acb --- /dev/null +++ b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertDemoComponent } from './alert-demo.component'; + +describe('AlertDemoComponent', () => { + let component: AlertDemoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AlertDemoComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertDemoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.ts b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.ts new file mode 100644 index 0000000..f3854e3 --- /dev/null +++ b/apps/ngxsmart-demo/src/app/alert-demo/alert-demo.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from "@angular/core"; + +@Component({ + selector: "ngxsmart-alert-demo", + templateUrl: "./alert-demo.component.html", + styleUrls: ["./alert-demo.component.scss"] +}) +export class AlertDemoComponent implements OnInit { + dismissOnTimeout = true; + dismissible = true; + + constructor() { + } + + ngOnInit(): void { + } + +} diff --git a/apps/ngxsmart-demo/src/app/app.component.html b/apps/ngxsmart-demo/src/app/app.component.html index 6d4cb46..556bed4 100644 --- a/apps/ngxsmart-demo/src/app/app.component.html +++ b/apps/ngxsmart-demo/src/app/app.component.html @@ -5,6 +5,7 @@

Auto Complete Demo +
  • Alert Demo
    • diff --git a/apps/ngxsmart-demo/src/app/app.module.ts b/apps/ngxsmart-demo/src/app/app.module.ts index 942e7f1..5b3fb41 100644 --- a/apps/ngxsmart-demo/src/app/app.module.ts +++ b/apps/ngxsmart-demo/src/app/app.module.ts @@ -3,15 +3,24 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ReactiveFormsModule } from '@angular/forms'; -import { AutocompleteModule } from '@ngxsmart/ngxsmart'; +import { AlertModule, AutocompleteModule } from "@ngxsmart/ngxsmart"; import { AutocompleteDemoComponent } from './autocomplete-demo/autocomplete-demo.component'; import { RouterModule } from '@angular/router'; +import { AlertDemoComponent } from './alert-demo/alert-demo.component'; @NgModule({ - declarations: [AppComponent, AutocompleteDemoComponent], - imports: [BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, AutocompleteModule, RouterModule.forRoot([ - { path: 'autocomplete-demo', component: AutocompleteDemoComponent } - ])], + declarations: [AppComponent, AutocompleteDemoComponent, AlertDemoComponent], + imports: [ + BrowserModule, + BrowserAnimationsModule, + ReactiveFormsModule, + AutocompleteModule, + AlertModule, + RouterModule.forRoot([ + { path: 'autocomplete-demo', component: AutocompleteDemoComponent }, + { path: 'alert-demo', component: AlertDemoComponent }, + ]), + ], providers: [], bootstrap: [AppComponent], }) diff --git a/apps/ngxsmart-demo/src/styles.scss b/apps/ngxsmart-demo/src/styles.scss index 3b9cecf..680dd20 100644 --- a/apps/ngxsmart-demo/src/styles.scss +++ b/apps/ngxsmart-demo/src/styles.scss @@ -1,5 +1,9 @@ /* You can add global styles to this file, and also import other style files */ +@import '~@angular/material/prebuilt-themes/indigo-pink.css'; +@import '~bootstrap/dist/css/bootstrap.css'; + + html, body { height: 100%; diff --git a/libs/ngxsmart/package.json b/libs/ngxsmart/package.json index 9a6192e..37ebb9e 100644 --- a/libs/ngxsmart/package.json +++ b/libs/ngxsmart/package.json @@ -1,6 +1,6 @@ { "name": "@ngxsmart/ngxsmart", - "version": "13.0.3", + "version": "13.0.4", "repository": { "type": "git", "url": "https://github.com/ngxsmart/ngxsmart.git" diff --git a/libs/ngxsmart/src/lib/alert/alert.component.html b/libs/ngxsmart/src/lib/alert/alert.component.html index 8bfbe87..7a4ae84 100644 --- a/libs/ngxsmart/src/lib/alert/alert.component.html +++ b/libs/ngxsmart/src/lib/alert/alert.component.html @@ -2,7 +2,8 @@
    diff --git a/libs/ngxsmart/src/lib/alert/alert.component.ts b/libs/ngxsmart/src/lib/alert/alert.component.ts index 15bc77e..264bfd0 100644 --- a/libs/ngxsmart/src/lib/alert/alert.component.ts +++ b/libs/ngxsmart/src/lib/alert/alert.component.ts @@ -1,11 +1,17 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnChanges, OnInit } from "@angular/core"; +/** + * Boostrap Alert component that can be used to alert messages to the user + * + * @author Pavan Kumar Jadda + * @since 12.0.0 + */ @Component({ - selector: 'lib-alert, alert', - templateUrl: './alert.component.html', - styleUrls: ['./alert.component.scss'], + selector: "lib-alert, alert", + templateUrl: "./alert.component.html", + styleUrls: ["./alert.component.scss"] }) -export class AlertComponent implements OnInit { +export class AlertComponent implements OnInit, OnChanges { /** * Type of the BootStrap Alert. Following values are supported. See BootStrap docs for more information * 
    @@ -41,8 +47,15 @@ export class AlertComponent implements OnInit {
 	 */
 	@Input() dismissTimeout = 5000;
 
-	constructor() {}
+	constructor() {
+	}
 
+	/**
+	 * Initialize the component and settings
+	 *
+	 * @author Pavan Kumar Jadda
+	 * @since 12.0.0
+	 */
 	ngOnInit(): void {
 		this.openAlert();
 
@@ -53,8 +66,21 @@ export class AlertComponent implements OnInit {
 		}
 	}
 
+	/**
+	 * Watch for changes in inputs
+	 *
+	 * @author Pavan Kumar Jadda
+	 * @since 12.0.0
+	 */
+	ngOnChanges(): void {
+		// Watch for changes in inputs
+	}
+
 	/**
 	 * Closes BootStrap Alert if not open
+	 *
+	 * @author Pavan Kumar Jadda
+	 * @since 12.0.0
 	 */
 	closeAlert(): void {
 		if (!this.isOpen) {
@@ -65,6 +91,9 @@ export class AlertComponent implements OnInit {
 
 	/**
 	 * Opens Bootstrap Alert
+	 *
+	 * @author Pavan Kumar Jadda
+	 * @since 12.0.0
 	 */
 	private openAlert(): void {
 		this.isOpen = true;
diff --git a/package-lock.json b/package-lock.json
index 9c59741..151e66e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,8 @@
         "@angular/platform-browser": "^13.0.0",
         "@angular/platform-browser-dynamic": "^13.0.0",
         "@angular/router": "^13.0.0",
+        "@popperjs/core": "2.11.2",
+        "bootstrap": "^5.1.3",
         "rxjs": "^7.5.2",
         "tslib": "^2.0.0",
         "zone.js": "^0.11.4"
@@ -5301,6 +5303,15 @@
         "typescript": "^3 || ^4"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-json": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@@ -7036,6 +7047,18 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -24082,6 +24105,11 @@
         "esquery": "^1.0.1"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
     "@rollup/plugin-json": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@@ -25424,6 +25452,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index ea4cfb9..f965935 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^13.0.0",
     "@angular/platform-browser-dynamic": "^13.0.0",
     "@angular/router": "^13.0.0",
+    "bootstrap": "^5.1.3",
+    "@popperjs/core": "^2.11.2",
     "rxjs": "^7.5.2",
     "tslib": "^2.0.0",
     "zone.js": "^0.11.4"