@sumaris-net/ngx-components 0.26.2 → 0.26.3

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

@@ -7760,6 +7760,89 @@
                 },] }
     ];
 
+    var MatBadgeIconDirective = /** @class */ (function () {
+        function MatBadgeIconDirective(el) {
+            this.el = el;
+        }
+        MatBadgeIconDirective.prototype.ngOnInit = function () {
+            this.size = this.size || 'medium';
+            this.color = this.color || 'primary';
+            if (this.color === 'warn')
+                this.color = 'warning';
+            var fontSize;
+            switch (this.size) {
+                case 'large':
+                    fontSize = '24px';
+                    break;
+                case 'medium':
+                    fontSize = '22px';
+                    break;
+                case 'small':
+                    fontSize = '16px';
+                    break;
+            }
+            var badge = this.el.nativeElement.querySelector('.mat-badge-content');
+            badge.style.display = 'flex';
+            badge.style.alignItems = 'center';
+            badge.style.justifyContent = 'center';
+            if (this.color !== 'accent') {
+                if (this.fill !== 'clear') {
+                    badge.style.background = "var(--ion-color-" + this.color + ")";
+                    badge.style.color = "var(--ion-color-" + this.color + "-contrast)";
+                }
+                else {
+                    badge.style.color = "var(--ion-color-" + this.color + ")";
+                    badge.style.background = 'transparent';
+                }
+            }
+            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 + ";\" name=\"" + this.ionIcon + "\"></ion-icon>";
+            }
+        };
+        return MatBadgeIconDirective;
+    }());
+    MatBadgeIconDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[matBadgeIcon], [ionBadgeIcon]',
+                    inputs: [
+                        'size: matBadgeSize',
+                        'color: matBadgeColor',
+                        'fill: matBadgeFill',
+                    ]
+                },] }
+    ];
+    MatBadgeIconDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    MatBadgeIconDirective.propDecorators = {
+        matIcon: [{ type: i0.Input, args: ['matBadgeIcon',] }],
+        ionIcon: [{ type: i0.Input, args: ['ionBadgeIcon',] }]
+    };
+
+    var SharedMatBadgeIconModule = /** @class */ (function () {
+        function SharedMatBadgeIconModule() {
+        }
+        return SharedMatBadgeIconModule;
+    }());
+    SharedMatBadgeIconModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$5.IonicModule,
+                        badge.MatBadgeModule,
+                    ],
+                    exports: [
+                        MatBadgeIconDirective
+                    ],
+                    declarations: [
+                        MatBadgeIconDirective
+                    ]
+                },] }
+    ];
+
     var modules = [
         // Angular material components
         i1$3.MatCommonModule,
@@ -7801,7 +7884,8 @@
         SharedMatBooleanModule,
         SharedMatNumpadModule,
         SharedMatSwipeModule,
-        MaterialChipsModule
+        MaterialChipsModule,
+        SharedMatBadgeIconModule
     ];
     var SharedMaterialModule = /** @class */ (function () {
         function SharedMaterialModule() {
@@ -18462,7 +18546,7 @@
     MaterialTestingPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-material-testing',
-                    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>Material components</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-item-divider>Shared Material components</ion-item-divider>\n\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./datetime')\">\n      Date/Time field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./autocomplete')\">\n      Autocomplete field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./latlong')\">\n      Lat/Long field\n    </ion-item>\n<!--    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./numpad')\">-->\n<!--      Numeric pad component-->\n<!--    </ion-item>-->\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./swipe')\">\n      Swipe component\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./chips')\">\n      Chips component\n    </ion-item>\n\n    <ng-container *ngIf=\"pages && pages.length\">\n      <ion-item-divider>Other components</ion-item-divider>\n\n      <ion-item *ngFor=\"let item of pages\"\n                tappable class=\"text-1x\"\n                (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n\n    </ng-container>\n  </ion-list>\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>Material components</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-item-divider>Shared Material components</ion-item-divider>\n\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./datetime')\">\n      Date/Time field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./autocomplete')\">\n      Autocomplete field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./latlong')\">\n      Lat/Long field\n    </ion-item>\n<!--    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./numpad')\">-->\n<!--      Numeric pad component-->\n<!--    </ion-item>-->\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./swipe')\">\n      Swipe component\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./chips')\">\n      Chips component\n    </ion-item>\n\n    <ion-item-divider>Directive</ion-item-divider>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./badge-icon')\">\n      Badge icon directive\n    </ion-item>\n\n    <ng-container *ngIf=\"pages && pages.length\">\n      <ion-item-divider>Other components</ion-item-divider>\n\n      <ion-item *ngFor=\"let item of pages\"\n                tappable class=\"text-1x\"\n                (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n\n    </ng-container>\n  </ion-list>\n\n</ion-content>\n"
                 },] }
     ];
     MaterialTestingPage.ctorParameters = function () { return [
@@ -18747,6 +18831,18 @@
         { type: i1.FormBuilder }
     ]; };
 
+    var MatBadgeIconTestPage = /** @class */ (function () {
+        function MatBadgeIconTestPage() {
+        }
+        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"
+                },] }
+    ];
+
     var routes$1 = [
         {
             path: '',
@@ -18782,6 +18878,11 @@
             path: 'chips',
             pathMatch: 'full',
             component: ChipsTestPage
+        },
+        {
+            path: 'badge-icon',
+            pathMatch: 'full',
+            component: MatBadgeIconTestPage
         }
     ];
     var MaterialTestingModule = /** @class */ (function () {
@@ -18806,7 +18907,8 @@
                         LatLongTestPage,
                         // NumpadTestPage,
                         SwipeTestPage,
-                        ChipsTestPage
+                        ChipsTestPage,
+                        MatBadgeIconTestPage
                     ],
                     exports: [
                         SharedMaterialModule,
@@ -28049,12 +28151,15 @@
     exports["ɵ0"] = ɵ0$5;
     exports["ɵa"] = CustomReuseStrategy;
     exports["ɵb"] = MatNumpadDomService;
-    exports["ɵc"] = isFocusableElement;
-    exports["ɵd"] = RegisterForm;
-    exports["ɵe"] = AccountValidatorService;
-    exports["ɵf"] = RegisterModal;
-    exports["ɵg"] = UserSettingsValidatorService;
-    exports["ɵh"] = LocalSettingsValidatorService;
+    exports["ɵc"] = SharedMatBadgeIconModule;
+    exports["ɵd"] = MatBadgeIconDirective;
+    exports["ɵe"] = isFocusableElement;
+    exports["ɵf"] = MatBadgeIconTestPage;
+    exports["ɵg"] = RegisterForm;
+    exports["ɵh"] = AccountValidatorService;
+    exports["ɵi"] = RegisterModal;
+    exports["ɵj"] = UserSettingsValidatorService;
+    exports["ɵk"] = LocalSettingsValidatorService;
 
     Object.defineProperty(exports, '__esModule', { value: true });