@sumaris-net/ngx-components 1.6.11 → 1.6.15

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

@@ -3052,16 +3052,10 @@
         function TranslateContextPipe(translate) {
             this.translate = translate;
         }
-        TranslateContextPipe.prototype.transform = function (query) {
-            var params = [];
-            for (var _i = 1; _i < arguments.length; _i++) {
-                params[_i - 1] = arguments[_i];
-            }
+        TranslateContextPipe.prototype.transform = function (query, context, interpolateParams) {
             if (!query || !query.length)
                 return query;
-            var suffix = params && params.length ? params[0] : '';
-            params = suffix && params.slice(1);
-            return this.translate.instant(query, suffix, params);
+            return this.translate.instant(query, context, interpolateParams);
         };
         return TranslateContextPipe;
     }());
@@ -8376,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':
@@ -8393,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';
@@ -8407,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;
@@ -19580,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"
                 },] }
     ];
 
@@ -24847,7 +24871,7 @@
                 .subscribe(function (value) { return _this.onDirty.emit(value); }));
             // Propagate row dirty state to table
             this.registerSubscription(this.onStartEditingRow
-                .pipe(operators.filter(function (row) { return row.validator && true; }), operators.mergeMap(function (row) { return row.validator.valueChanges
+                .pipe(operators.filter(function (row) { return (row === null || row === void 0 ? void 0 : row.validator) && true; }), operators.mergeMap(function (row) { return row.validator.valueChanges
                 .pipe(operators.takeUntil(
             // Stop if next another row, or destroying
             rxjs.combineLatest([