@kirbydesign/designsystem 4.0.12 → 4.0.16

package/bundles/kirbydesign-designsystem.umd.js

@@ -3809,6 +3809,42 @@
         return Array.isArray(value) && value.every(function (item) { return typeof item === 'number'; });
     }
 
+    var ComponentLoaderDirective = /** @class */ (function () {
+        function ComponentLoaderDirective(componentFactoryResolver, viewContainerRef, renderer) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.viewContainerRef = viewContainerRef;
+            this.renderer = renderer;
+        }
+        ComponentLoaderDirective.prototype.ngOnInit = function () {
+            this.loadCard();
+        };
+        ComponentLoaderDirective.prototype.loadCard = function () {
+            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
+            this.viewContainerRef.clear();
+            var componentRef = this.viewContainerRef.createComponent(componentFactory);
+            if (componentRef && componentRef.location && componentRef.location.nativeElement) {
+                this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
+            }
+            componentRef.instance.data = this.configuration.data;
+        };
+        return ComponentLoaderDirective;
+    }());
+    ComponentLoaderDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[kirbyLoadComponent]',
+                },] }
+    ];
+    /** @nocollapse */
+    ComponentLoaderDirective.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ViewContainerRef },
+        { type: i0.Renderer2 }
+    ]; };
+    ComponentLoaderDirective.propDecorators = {
+        configuration: [{ type: i0.Input, args: ['kirbyLoadComponent',] }],
+        cssClass: [{ type: i0.Input }]
+    };
+
     function deepCopy(obj) {
         return JSON.parse(JSON.stringify(obj));
     }
@@ -4246,7 +4282,34 @@
             configurable: true
         });
         ChartComponent.prototype.ngAfterViewInit = function () {
-            this.renderChart();
+            var _this = this;
+            /*
+               A chart is not rendered until it has both a height and a width.
+               If ChartComponent is slotted in an ionic component it will
+               not have any height or width on afterViewInit. This will cause
+               the animation to not be played on first draw.
+            */
+            var canvasElement = this.canvasElement.nativeElement;
+            this.whenElementHasHeightAndWidth(canvasElement).then(function () { return _this.renderChart(); });
+        };
+        ChartComponent.prototype.whenElementHasHeightAndWidth = function (element) {
+            var rectIs2D = function (_a) {
+                var width = _a.width, height = _a.height;
+                return height > 0 && width > 0;
+            };
+            return new Promise(function (resolve) {
+                var initialClientRect = element.getBoundingClientRect();
+                if (rectIs2D(initialClientRect))
+                    resolve();
+                var resizeObserver = new ResizeObserverFactory().create(function (_a) {
+                    var _b = __read(_a, 1), resizeObserverEntry = _b[0];
+                    if (rectIs2D(resizeObserverEntry.contentRect)) {
+                        resizeObserver.unobserve(element);
+                        resolve();
+                    }
+                });
+                resizeObserver.observe(element);
+            });
         };
         ChartComponent.prototype.ngOnChanges = function (simpleChanges) {
             var _this = this;
@@ -8584,49 +8647,14 @@
                 },] }
     ];
 
-    var ComponentLoaderDirective = /** @class */ (function () {
-        function ComponentLoaderDirective(componentFactoryResolver, viewContainerRef, renderer) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.viewContainerRef = viewContainerRef;
-            this.renderer = renderer;
-        }
-        ComponentLoaderDirective.prototype.ngOnInit = function () {
-            this.loadCard();
-        };
-        ComponentLoaderDirective.prototype.loadCard = function () {
-            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
-            this.viewContainerRef.clear();
-            var componentRef = this.viewContainerRef.createComponent(componentFactory);
-            if (componentRef && componentRef.location && componentRef.location.nativeElement) {
-                this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
-            }
-            componentRef.instance.data = this.configuration.data;
-        };
-        return ComponentLoaderDirective;
-    }());
-    ComponentLoaderDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[kirbyLoadComponent]',
-                },] }
-    ];
-    /** @nocollapse */
-    ComponentLoaderDirective.ctorParameters = function () { return [
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.ViewContainerRef },
-        { type: i0.Renderer2 }
-    ]; };
-    ComponentLoaderDirective.propDecorators = {
-        configuration: [{ type: i0.Input, args: ['kirbyLoadComponent',] }],
-        cssClass: [{ type: i0.Input }]
-    };
-
     (function (SegmentedControlMode) {
         SegmentedControlMode["chip"] = "chip";
         SegmentedControlMode["compactChip"] = "compactChip";
         SegmentedControlMode["default"] = "default";
     })(exports.SegmentedControlMode || (exports.SegmentedControlMode = {}));
     var SegmentedControlComponent = /** @class */ (function () {
-        function SegmentedControlComponent() {
+        function SegmentedControlComponent(iconRegistryService) {
+            this.iconRegistryService = iconRegistryService;
             this.mode = exports.SegmentedControlMode.default;
             this._items = [];
             this._selectedIndex = -1;
@@ -8656,7 +8684,16 @@
                 return this._items;
             },
             set: function (value) {
+                var _this = this;
                 this._items = value || [];
+                this._items.forEach(function (item) {
+                    if (!item.badge)
+                        return;
+                    // We need to verify whether badges icon is custom or default, so we can check for it in the template
+                    item.badge.isCustomIcon =
+                        item.badge.icon !== undefined &&
+                            _this.iconRegistryService.getIcon(item.badge.icon) !== undefined;
+                });
                 var checkedItemIndex = this.items.findIndex(function (item) { return item.checked; });
                 if (checkedItemIndex > -1) {
                     console.warn('SegmentItem.checked is deprecated - please remove from your `items` configuration. Use `selectedIndex` or `value` on `<kirby-segmented-control>` instead ');
@@ -8709,12 +8746,16 @@
     SegmentedControlComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kirby-segmented-control',
-                    template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <kirby-icon\n        *ngIf=\"item.badge.icon; else badgeContent\"\n        [customName]=\"item.badge.icon\"\n        [name]=\"item.badge.icon\"\n      ></kirby-icon>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
+                    template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
                     // tslint:disable-next-line: no-host-metadata-property
                     host: { role: 'group' },
                     styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
                 },] }
     ];
+    /** @nocollapse */
+    SegmentedControlComponent.ctorParameters = function () { return [
+        { type: IconRegistryService }
+    ]; };
     SegmentedControlComponent.propDecorators = {
         mode: [{ type: i0.Input }],
         _modeCssClass: [{ type: i0.HostBinding, args: ['class',] }],
@@ -8834,7 +8875,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-tab-button',
                     template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n    <ng-content select=\"kirby-badge\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n</ion-tab-button>\n",
-                    styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-left:calc(50% + 5px);--kirby-badge-top:0}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row;--kirby-badge-top:-5px;--kirby-badge-left:auto;--kirby-badge-right:-5px}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{position:relative;margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
+                    styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
                 },] }
     ];
     /** @nocollapse */