@sumaris-net/ngx-components 1.6.13 → 1.6.17

package/bundles/sumaris-net.ngx-components.umd.js

@@ -8369,14 +8369,95 @@
     var MatBadgeIconDirective = /** @class */ (function () {
         function MatBadgeIconDirective(el) {
             this.el = el;
+            this._subscription = null;
+            this._$update = new rxjs.Subject();
         }
+        Object.defineProperty(MatBadgeIconDirective.prototype, "size", {
+            get: function () {
+                return this._size;
+            },
+            set: function (value) {
+                if (this._size !== value) {
+                    this._size = value;
+                    this.updateView();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatBadgeIconDirective.prototype, "color", {
+            get: function () {
+                return this._color;
+            },
+            set: function (value) {
+                if (this._color !== value) {
+                    this._color = value;
+                    this.updateView();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatBadgeIconDirective.prototype, "fill", {
+            get: function () {
+                return this._fill;
+            },
+            set: function (value) {
+                if (this._fill !== value) {
+                    this._fill = value;
+                    this.updateView();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatBadgeIconDirective.prototype, "matIcon", {
+            set: function (icon) {
+                if (this._matIcon !== icon) {
+                    this._matIcon = icon;
+                    this.updateView();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatBadgeIconDirective.prototype, "ionIcon", {
+            set: function (icon) {
+                if (this._ionIcon !== icon) {
+                    this._ionIcon = icon;
+                    this.updateView();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         MatBadgeIconDirective.prototype.ngOnInit = function () {
-            this.size = this.size || 'medium';
-            this.color = this.color || 'primary';
-            if (this.color === 'warn')
-                this.color = 'warning';
+            var _this = this;
+            // 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(operators.debounceTime(100))
+                .subscribe(function () { return _this.updateView(true); });
+        };
+        MatBadgeIconDirective.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
+        MatBadgeIconDirective.prototype.updateView = function (immediate) {
+            // Async by default
+            if (!immediate) {
+                this._$update.next();
+                return;
+            }
+            var badge = this.el.nativeElement.querySelector('.mat-badge-content');
+            if (!badge)
+                return;
             var fontSize;
-            switch (this.size) {
+            switch (this._size) {
                 case 'large':
                     fontSize = '24px';
                     break;
@@ -8387,26 +8468,34 @@
                     fontSize = '16px';
                     break;
             }
-            var badge = this.el.nativeElement.querySelector('.mat-badge-content');
-            badge.style.display = 'flex';
-            badge.style.alignItems = 'center';
-            badge.style.justifyContent = 'center';
+            var 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';
         };
         return MatBadgeIconDirective;
     }());
@@ -8424,6 +8513,9 @@
         { type: i0.ElementRef }
     ]; };
     MatBadgeIconDirective.propDecorators = {
+        size: [{ type: i0.Input, args: ['matBadgeSize',] }],
+        color: [{ type: i0.Input, args: ['matBadgeColor',] }],
+        fill: [{ type: i0.Input, args: ['matBadgeFill',] }],
         matIcon: [{ type: i0.Input, args: ['matBadgeIcon',] }],
         ionIcon: [{ type: i0.Input, args: ['ionBadgeIcon',] }]
     };
@@ -19574,13 +19666,17 @@
 
     var MatBadgeIconTestPage = /** @class */ (function () {
         function MatBadgeIconTestPage() {
+            this.$icon = new rxjs.BehaviorSubject('alert');
+            this.$size = new rxjs.BehaviorSubject('small');
+            this.$fill = new rxjs.BehaviorSubject('solid');
+            this.$color = new rxjs.BehaviorSubject('danger');
         }
         return MatBadgeIconTestPage;
     }());
     MatBadgeIconTestPage.decorators = [
         { type: i0.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"
                 },] }
     ];