@sumaris-net/ngx-components 1.6.14 → 1.6.15

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

@@ -8370,11 +8370,37 @@
         function MatBadgeIconDirective(el) {
             this.el = el;
         }
+        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.updateView();
+        };
+        MatBadgeIconDirective.prototype.updateView = function () {
             this.size = this.size || 'medium';
             this.color = this.color || 'primary';
             if (this.color === 'warn')
                 this.color = 'warning';
+            var badge = this.el.nativeElement.querySelector('.mat-badge-content');
+            if (!badge)
+                return;
             var fontSize;
             switch (this.size) {
                 case 'large':
@@ -8387,7 +8413,6 @@
                     fontSize = '16px';
                     break;
             }
-            var badge = this.el.nativeElement.querySelector('.mat-badge-content');
             badge.style.display = 'flex';
             badge.style.alignItems = 'center';
             badge.style.justifyContent = 'center';
@@ -8401,11 +8426,11 @@
                 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>";
+            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>";
+            else if (this._ionIcon) {
+                badge.innerHTML = "<ion-icon style=\"font-size: " + fontSize + "; pointer-events: none;\" name=\"" + this._ionIcon + "\"></ion-icon>";
             }
         };
         return MatBadgeIconDirective;
@@ -19574,13 +19599,18 @@
 
     var MatBadgeIconTestPage = /** @class */ (function () {
         function MatBadgeIconTestPage() {
+            this.$dynamicIcon = new rxjs.BehaviorSubject('alert');
         }
+        MatBadgeIconTestPage.prototype.changeIcon = function (event) {
+            console.info(event);
+            this.$dynamicIcon.next(event.value);
+        };
         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      <ion-label matBadge\n                 [ionBadgeIcon]=\"$dynamicIcon|async\"\n                 matBadgeColor=\"tertiary\"\n                 matBadgeFill=\"clear\"\n                 matBadgeOverlap=\"false\">Badge with dynamic icon\n      </ion-label>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select\n          placeholder=\"Select icon\" (selectionChange)=\"changeIcon($event)\"\n            [value]=\"$dynamicIcon.value\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-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\n    </ion-col>\n  </ion-row>\n\n</ion-content>\n"
                 },] }
     ];