design-angular-kit 1.0.0-8 → 1.0.0-9

package/fesm2020/design-angular-kit.mjs

@@ -79,6 +79,12 @@ class AbstractFormComponent extends AbstractComponent {
         this.control = new FormControl();
         this._ngControl && (this._ngControl.valueAccessor = this);
     }
+    /**
+     * Set the disabled state
+     */
+    set disabled(isDisabled) {
+        this.setDisabledState(isTrueBooleanInput(isDisabled));
+    }
     /**
      * Check if field is invalid (Validation failed)
      */
@@ -200,7 +206,7 @@ class AbstractFormComponent extends AbstractComponent {
     }
 }
 AbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1.TranslateService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AbstractFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: "disabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -212,6 +218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], validationMode: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class CollapseComponent extends AbstractComponent {
@@ -1203,17 +1211,17 @@ class NotificationsService {
      * Create new Standard notification
      * @param title notification title
      * @param message notification message
-     * @param dismissable notification dismissable
-     * @param duration notification duration (millis)
+     * @param dismissible notification dismissible
+     * @param duration notification duration (milliseconds)
      * @param position notification position
      */
-    standard(title, message, dismissable = true, duration, position) {
+    standard(title, message, dismissible, duration, position) {
         this.addNotification({
             type: NotificationType.Standard,
             message,
             title,
             duration,
-            dismissable,
+            dismissible,
             position
         });
     }
@@ -1221,17 +1229,17 @@ class NotificationsService {
      * Create new Success notification
      * @param title notification title
      * @param message notification message
-     * @param dismissable notification dismissable
-     * @param duration notification duration (millis)
+     * @param dismissible notification dismissible
+     * @param duration notification duration (milliseconds)
      * @param position notification position
      */
-    success(title, message, dismissable = true, duration, position) {
+    success(title, message, dismissible, duration, position) {
         this.addNotification({
             type: NotificationType.Success,
             message,
             title,
             duration,
-            dismissable,
+            dismissible,
             position
         });
     }
@@ -1239,17 +1247,17 @@ class NotificationsService {
      * Create new Error notification
      * @param title notification title
      * @param message notification message
-     * @param dismissable notification dismissable
-     * @param duration notification duration (millis)
+     * @param dismissible notification dismissible
+     * @param duration notification duration (milliseconds)
      * @param position notification position
      */
-    error(title, message, dismissable = true, duration, position) {
+    error(title, message, dismissible, duration, position) {
         this.addNotification({
             type: NotificationType.Error,
             message,
             title,
             duration,
-            dismissable,
+            dismissible,
             position
         });
     }
@@ -1257,17 +1265,17 @@ class NotificationsService {
      * Create new Warning notification
      * @param title notification title
      * @param message notification message
-     * @param dismissable notification dismissable
-     * @param duration notification duration (millis)
+     * @param dismissible notification dismissible
+     * @param duration notification duration (milliseconds)
      * @param position notification position
      */
-    warning(title, message, dismissable = true, duration, position) {
+    warning(title, message, dismissible, duration, position) {
         this.addNotification({
             type: NotificationType.Warning,
             message,
             title,
             duration,
-            dismissable,
+            dismissible,
             position
         });
     }
@@ -1275,17 +1283,17 @@ class NotificationsService {
      * Create new Info notification
      * @param title notification title
      * @param message notification message
-     * @param dismissable notification dismissable
-     * @param duration notification duration (millis)
+     * @param dismissible notification dismissible
+     * @param duration notification duration (milliseconds)
      * @param position notification position
      */
-    info(title, message, dismissable = true, duration, position) {
+    info(title, message, dismissible, duration, position) {
         this.addNotification({
             type: NotificationType.Info,
             message,
             title,
             duration,
-            dismissable,
+            dismissible,
             position
         });
     }
@@ -1294,19 +1302,24 @@ NotificationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 NotificationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
 class NotificationsComponent {
-    constructor(_notificationService) {
+    constructor(_changeDetectorRef, _notificationService) {
+        this._changeDetectorRef = _changeDetectorRef;
         this._notificationService = _notificationService;
         /**
-         * Default notifications duration
+         * Default notifications duration (milliseconds)
          * @default 8000
          */
         this.duration = 8000;
+        /**
+         * Default notifications is dismissible
+         * @default true
+         */
+        this.dismissible = true;
+        this.notificationCount = 0;
         this.notifications = [];
         this.subscription = this._notificationService.onNotification().subscribe(notification => {
             if (!notification.duration) {
@@ -1315,11 +1328,18 @@ class NotificationsComponent {
             if (!notification.position && this.position) {
                 notification.position = this.position; // Add position if not is set
             }
+            if (notification.dismissible === undefined && isTrueBooleanInput(this.dismissible)) {
+                notification.dismissible = true; // Add dismissible if not is set
+            }
+            if (!notification.icon) {
+                notification.icon = this.getNotificationIcon(notification);
+            }
             const newNotification = {
                 ...notification,
-                id: `${notification.type}-${this.notifications.length}-notification`
+                id: `${notification.type}-${this.notificationCount++}-notification`
             };
-            const index = this.notifications.push(newNotification);
+            this.notifications.push(newNotification);
+            this._changeDetectorRef.detectChanges();
             setTimeout(() => {
                 // Show the notification
                 new Notification(document.getElementById(newNotification.id), {
@@ -1327,7 +1347,14 @@ class NotificationsComponent {
                 }).show();
                 // Clear notification after the duration
                 setTimeout(() => {
-                    this.notifications = this.notifications.splice(index, 1);
+                    const index = this.notifications.findIndex(n => n.id === newNotification.id);
+                    if (index > -1) {
+                        this.notifications.splice(index, 1);
+                        if (!this.notifications.length) {
+                            this.notificationCount = 0;
+                        }
+                        this._changeDetectorRef.detectChanges();
+                    }
                 }, notification.duration);
             }, 200);
         });
@@ -1345,16 +1372,38 @@ class NotificationsComponent {
     hideNotification(id) {
         Notification.getInstance(document.getElementById(id))?.hide();
     }
+    /**
+     * Retrieve the icon name by notification type
+     * @param notification the notification
+     * @protected
+     */
+    getNotificationIcon(notification) {
+        switch (notification.type) {
+            case NotificationType.Success:
+                return 'check-circle';
+            case NotificationType.Error:
+                return 'close-circle';
+            case NotificationType.Warning:
+                return 'error';
+            case NotificationType.Info:
+                return 'info-circle';
+            case NotificationType.Standard:
+            default:
+                return undefined;
+        }
+    }
 }
-NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationsComponent, selector: "it-notifications", inputs: { duration: "duration", position: "position" }, ngImport: i0, template: "<div *ngFor=\"let notification of notifications; let i = index\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"notification.type !== NotificationType.Standard\"\n     [class.dismissable]=\"notification.dismissable\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissable\" type=\"button\" class=\"btn notification-close\"\n          (click)=\"hideNotification(notification.id)\">\n    <it-icon name=\"close\"></it-icon>\n    <span class=\"visually-hidden\">{{'it.core.close-notification'|translate:{title: notification.title} }}</span>\n  </button>\n</div>\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationsComponent, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: "dismissible" }, ngImport: i0, template: "<div *ngFor=\"let notification of notifications\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"!!notification.icon\"\n     [class.dismissable]=\"notification.dismissible\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <it-icon *ngIf=\"!!notification.icon\" [name]=\"notification.icon\"></it-icon>\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissible\" type=\"button\" class=\"btn notification-close\"\n          (click)=\"hideNotification(notification.id)\">\n    <it-icon name=\"close\"></it-icon>\n    <span class=\"visually-hidden\">{{'it.core.close-notification'|translate:{ title: notification.title } }}</span>\n  </button>\n</div>\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-notifications', template: "<div *ngFor=\"let notification of notifications; let i = index\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"notification.type !== NotificationType.Standard\"\n     [class.dismissable]=\"notification.dismissable\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissable\" type=\"button\" class=\"btn notification-close\"\n          (click)=\"hideNotification(notification.id)\">\n    <it-icon name=\"close\"></it-icon>\n    <span class=\"visually-hidden\">{{'it.core.close-notification'|translate:{title: notification.title} }}</span>\n  </button>\n</div>\n", styles: [".notification{z-index:10000}\n"] }]
-        }], ctorParameters: function () { return [{ type: NotificationsService }]; }, propDecorators: { duration: [{
+            args: [{ selector: 'it-notifications', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let notification of notifications\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"!!notification.icon\"\n     [class.dismissable]=\"notification.dismissible\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <it-icon *ngIf=\"!!notification.icon\" [name]=\"notification.icon\"></it-icon>\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissible\" type=\"button\" class=\"btn notification-close\"\n          (click)=\"hideNotification(notification.id)\">\n    <it-icon name=\"close\"></it-icon>\n    <span class=\"visually-hidden\">{{'it.core.close-notification'|translate:{ title: notification.title } }}</span>\n  </button>\n</div>\n", styles: [".notification{z-index:10000}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NotificationsService }]; }, propDecorators: { duration: [{
                 type: Input
             }], position: [{
                 type: Input
+            }], dismissible: [{
+                type: Input
             }] } });
 
 class PaginationComponent {