@sumaris-net/ngx-components 1.6.13 → 1.6.17

package/fesm2015/sumaris-net.ngx-components.js

@@ -7473,14 +7473,74 @@ MaterialChipsModule.decorators = [
 class MatBadgeIconDirective {
     constructor(el) {
         this.el = el;
+        this._subscription = null;
+        this._$update = new Subject();
+    }
+    set size(value) {
+        if (this._size !== value) {
+            this._size = value;
+            this.updateView();
+        }
+    }
+    get size() {
+        return this._size;
+    }
+    set color(value) {
+        if (this._color !== value) {
+            this._color = value;
+            this.updateView();
+        }
+    }
+    get color() {
+        return this._color;
+    }
+    set fill(value) {
+        if (this._fill !== value) {
+            this._fill = value;
+            this.updateView();
+        }
+    }
+    get fill() {
+        return this._fill;
+    }
+    set matIcon(icon) {
+        if (this._matIcon !== icon) {
+            this._matIcon = icon;
+            this.updateView();
+        }
+    }
+    set ionIcon(icon) {
+        if (this._ionIcon !== icon) {
+            this._ionIcon = icon;
+            this.updateView();
+        }
     }
     ngOnInit() {
-        this.size = this.size || 'medium';
-        this.color = this.color || 'primary';
-        if (this.color === 'warn')
-            this.color = 'warning';
+        // Default value
+        this._size = this._size || 'medium';
+        this._color = this._color || 'primary';
+        if (this._color === 'warn')
+            this._color = 'warning';
+        this.updateView(true);
+        this._subscription = this._$update
+            .pipe(debounceTime(100))
+            .subscribe(() => this.updateView(true));
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    updateView(immediate) {
+        // Async by default
+        if (!immediate) {
+            this._$update.next();
+            return;
+        }
+        const badge = this.el.nativeElement.querySelector('.mat-badge-content');
+        if (!badge)
+            return;
         let fontSize;
-        switch (this.size) {
+        switch (this._size) {
             case 'large':
                 fontSize = '24px';
                 break;
@@ -7491,26 +7551,34 @@ class MatBadgeIconDirective {
                 fontSize = '16px';
                 break;
         }
-        const badge = this.el.nativeElement.querySelector('.mat-badge-content');
-        badge.style.display = 'flex';
-        badge.style.alignItems = 'center';
-        badge.style.justifyContent = 'center';
+        let html = '';
+        if (this._matIcon) {
+            html = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
+        }
+        else if (this._ionIcon) {
+            html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
+        }
+        if (this._html !== html) {
+            this._html = html;
+            badge.innerHTML = html;
+        }
+        // Update style
         // fill: 'clear'
-        if (this.fill === 'clear') {
-            badge.style.color = `var(--ion-color-${this.color})`;
+        if (this._fill === 'clear') {
+            badge.style.color = `var(--ion-color-${this._color})`;
             badge.style.background = 'transparent';
         }
         // fill: 'solid' (default value)
         else {
-            badge.style.background = `var(--ion-color-${this.color})`;
-            badge.style.color = `var(--ion-color-${this.color}-contrast)`;
-        }
-        if (this.matIcon) {
-            badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this.matIcon}</i>`;
-        }
-        else if (this.ionIcon) {
-            badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this.ionIcon}"></ion-icon>`;
+            badge.style.background = `var(--ion-color-${this._color})`;
+            badge.style.color = `var(--ion-color-${this._color}-contrast)`;
         }
+        if (badge.style.display !== 'inline-block')
+            badge.style.display = 'inline-block';
+        if (badge.style.alignItems !== 'center')
+            badge.style.alignItems = 'center';
+        if (badge.style.justifyContent !== 'center')
+            badge.style.justifyContent = 'center';
     }
 }
 MatBadgeIconDirective.decorators = [
@@ -7527,6 +7595,9 @@ MatBadgeIconDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 MatBadgeIconDirective.propDecorators = {
+    size: [{ type: Input, args: ['matBadgeSize',] }],
+    color: [{ type: Input, args: ['matBadgeColor',] }],
+    fill: [{ type: Input, args: ['matBadgeFill',] }],
     matIcon: [{ type: Input, args: ['matBadgeIcon',] }],
     ionIcon: [{ type: Input, args: ['ionBadgeIcon',] }]
 };
@@ -17061,11 +17132,17 @@ ChipsTestPage.ctorParameters = () => [
 ];
 
 class MatBadgeIconTestPage {
+    constructor() {
+        this.$icon = new BehaviorSubject('alert');
+        this.$size = new BehaviorSubject('small');
+        this.$fill = new BehaviorSubject('solid');
+        this.$color = new BehaviorSubject('danger');
+    }
 }
 MatBadgeIconTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'mat-badge-icon-test',
-                template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span matBadge matIcon=\"check\"\n            matBadgeSize=\"small\"\n            matBadgeColor=\"accent\"\n            matBadgeOverlap=\"false\">Small badge</span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text matBadge matBadgeIcon=\"check\"\n              matBadgeSize=\"medium\"\n              matBadgeColor=\"tertiary\"\n              matBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n          matBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n            matBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label matBadge\n               ionBadgeIcon=\"checkmark\"\n               matBadgeColor=\"success\"\n            matBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label matBadge\n               ionBadgeIcon=\"checkmark-circle\"\n               matBadgeColor=\"tertiary\"\n               matBadgeFill=\"clear\"\n               matBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n\n</ion-content>\n"
+                template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span matBadge matIcon=\"check\"\n            matBadgeSize=\"small\"\n            matBadgeColor=\"accent\"\n            matBadgeOverlap=\"false\">Small badge</span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text matBadge matBadgeIcon=\"check\"\n              matBadgeSize=\"medium\"\n              matBadgeColor=\"tertiary\"\n              matBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n          matBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n            matBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label matBadge\n               ionBadgeIcon=\"checkmark\"\n               matBadgeColor=\"success\"\n            matBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label matBadge\n               ionBadgeIcon=\"checkmark-circle\"\n               matBadgeColor=\"tertiary\"\n               matBadgeFill=\"clear\"\n               matBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                matBadge\n                [ionBadgeIcon]=\"$icon|async\"\n                [matBadgeColor]=\"$color|async\"\n                [matBadgeFill]=\"$fill|async\"\n                [matBadgeSize]=\"$size|async\"\n                matBadgeOverlap=\"false\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"matBadgeColor\"\n                    [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"ionBadgeIcon\"\n                    [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"matBadgeSize\"\n                    [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"matBadgeFill\"\n                    [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n</ion-content>\n"
             },] }
 ];