@kirbydesign/designsystem 4.0.13 → 4.0.14

package/bundles/kirbydesign-designsystem.umd.js

@@ -8653,7 +8653,8 @@
         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;
@@ -8683,7 +8684,16 @@
                 return this._items;
             },
             set: function (value) {
+                var _this = this;
                 this._items = value || [];
+                this._items.forEach(function (item) {
+                    if (item.badge === undefined)
+                        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 ');
@@ -8736,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',] }],