Merge pull request #4 from ngxsmart/development

fix(alert): fixes a bug that does close alert

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=<your npm token>
-```
+    ```shell
+    //registry.npmjs.org/:_authToken=<your npm token>
+    ```
 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

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

@@ -0,0 +1,23 @@
+<div>
+  <h2>Success Alert</h2>
+  <alert
+    [dismissOnTimeout]="dismissOnTimeout"
+    [dismissible]="dismissible"
+    type="success"
+  >
+    Success Alert
+  </alert>
+</div>
+
+<div>
+  <h2>Error Alert</h2>
+  <alert
+    [dismissOnTimeout]="dismissOnTimeout"
+    [dismissible]="dismissible"
+    type="danger"
+  >
+    Error Alert
+  </alert>
+</div>
+
+<hr />

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<AlertDemoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlertDemoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

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

@@ -5,6 +5,7 @@ <h1 style="display: flex; justify-content: center; align-items: center;margin-to
 
 <ul>
   <li><a routerLink="/autocomplete-demo">Auto Complete Demo</a></li>
+  <li><a routerLink="/alert-demo">Alert Demo</a></li>
 </ul>
 <router-outlet></router-outlet>
 

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],
 })

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%;

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"

libs/ngxsmart/src/lib/alert/alert.component.html

@@ -2,7 +2,8 @@
 	<div class="col-xs-12 col-sm-12 col-md-auto mx-auto">
 		<div class="alert alert-{{ type }} alert-dismissible alert_div" role="alert">
 			<ng-content></ng-content>
-			<button *ngIf="dismissible" aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
+			<button (click)="closeAlert()" *ngIf="dismissible" aria-label="Close" class="btn-close" data-bs-dismiss="alert"
+							type="button"></button>
 		</div>
 	</div>
 </div>

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
 	 * <pre>
@@ -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;

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"