@sumaris-net/ngx-components 1.6.15 → 1.7.0

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

@@ -4566,6 +4566,42 @@
         { type: ngx.Keyboard, decorators: [{ type: i0.Optional }] }
     ]; };
 
+    var NgVarDirective = /** @class */ (function () {
+        function NgVarDirective(templateRef, vcRef) {
+            this.templateRef = templateRef;
+            this.vcRef = vcRef;
+            this.context = {
+                $implicit: null,
+                ngVar: null,
+            };
+            this.hasView = false;
+        }
+        Object.defineProperty(NgVarDirective.prototype, "ngVar", {
+            set: function (context) {
+                this.context.$implicit = this.context.ngVar = context;
+                if (!this.hasView) {
+                    this.vcRef.createEmbeddedView(this.templateRef, this.context);
+                    this.hasView = true;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NgVarDirective;
+    }());
+    NgVarDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[ngVar]',
+                },] }
+    ];
+    NgVarDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef },
+        { type: i0.ViewContainerRef }
+    ]; };
+    NgVarDirective.propDecorators = {
+        ngVar: [{ type: i0.Input }]
+    };
+
     var SharedDirectivesModule = /** @class */ (function () {
         function SharedDirectivesModule() {
         }
@@ -4578,10 +4614,12 @@
                         i1$5.IonicModule
                     ],
                     declarations: [
-                        AutofocusDirective
+                        AutofocusDirective,
+                        NgVarDirective
                     ],
                     exports: [
-                        AutofocusDirective
+                        AutofocusDirective,
+                        NgVarDirective
                     ]
                 },] }
     ];
@@ -4720,24 +4758,25 @@
                 this.pattern = 'DDMM';
                 this.mask = MASKS[this.type][this.pattern];
             }
-            if (this.maxDecimals) {
-                if (this.maxDecimals < 0) {
-                    console.error('Invalid attribute \'maxDecimals\'. Must a positive value.');
-                    this.maxDecimals = DEFAULT_MAX_DECIMALS;
-                }
-                // Remove max decimals in the DDMMSS format
-                else if (this.pattern === 'DD') {
-                    console.warn("Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.");
-                    this.maxDecimals = 7;
-                }
-                else if (this.pattern === 'DDMMSS') {
-                    console.warn("Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.");
-                    this.maxDecimals = 0;
-                }
-                else if (this.maxDecimals !== DEFAULT_MAX_DECIMALS) {
-                    console.warn("Invalid attribute 'maxDecimals' - Expected value: " + DEFAULT_MAX_DECIMALS + ". Other value not implemented.");
-                    this.maxDecimals = DEFAULT_MAX_DECIMALS;
-                }
+            if (isNil(this.maxDecimals)) {
+                this.maxDecimals = DEFAULT_MAX_DECIMALS;
+            }
+            // Remove max decimals in the DDMMSS format
+            else if (this.pattern === 'DD') {
+                console.warn("Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.");
+                this.maxDecimals = 7;
+            }
+            else if (this.pattern === 'DDMMSS') {
+                console.warn("Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.");
+                this.maxDecimals = 0;
+            }
+            else if (this.maxDecimals < 0) {
+                console.error('Invalid attribute \'maxDecimals\'. Must a positive value.');
+                this.maxDecimals = DEFAULT_MAX_DECIMALS;
+            }
+            else if (this.maxDecimals !== DEFAULT_MAX_DECIMALS) {
+                console.warn("Invalid attribute 'maxDecimals' - Expected value: " + DEFAULT_MAX_DECIMALS + ". Other value not implemented.");
+                this.maxDecimals = DEFAULT_MAX_DECIMALS;
             }
             this.showSignControl = this.pattern !== 'DD';
             this.formatFn = this.type === 'latitude' ? formatLatitude : formatLongitude;
@@ -8369,7 +8408,48 @@
     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) {
@@ -8391,18 +8471,32 @@
             configurable: true
         });
         MatBadgeIconDirective.prototype.ngOnInit = function () {
-            this.updateView();
+            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 () {
-            this.size = this.size || 'medium';
-            this.color = this.color || 'primary';
-            if (this.color === 'warn')
-                this.color = 'warning';
+        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;
@@ -8413,25 +8507,34 @@
                     fontSize = '16px';
                     break;
             }
-            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;
     }());
@@ -8449,6 +8552,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',] }]
     };
@@ -19599,18 +19705,17 @@
 
     var MatBadgeIconTestPage = /** @class */ (function () {
         function MatBadgeIconTestPage() {
-            this.$dynamicIcon = new rxjs.BehaviorSubject('alert');
+            this.$icon = new rxjs.BehaviorSubject('alert');
+            this.$size = new rxjs.BehaviorSubject('small');
+            this.$fill = new rxjs.BehaviorSubject('solid');
+            this.$color = new rxjs.BehaviorSubject('danger');
         }
-        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  <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"
+                    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"
                 },] }
     ];
 
@@ -29138,6 +29243,7 @@
     exports.ModalToolbarComponent = ModalToolbarComponent;
     exports.NetworkService = NetworkService;
     exports.NgInitDirective = NgInitDirective;
+    exports.NgVarDirective = NgVarDirective;
     exports.NotEmptyArrayPipe = NotEmptyArrayPipe;
     exports.NumberFormatPipe = NumberFormatPipe;
     exports.NumpadDirective = NumpadDirective;