@kirbydesign/designsystem 11.4.2 → 11.5.0

package/fesm2022/kirbydesign-designsystem-item.mjs

@@ -54,12 +54,12 @@ class ItemComponent {
     containsNestedInteractives() {
         return !!(this.checkbox || this.radio || this.toggle || this.button);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ItemComponent, isStandalone: true, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", disclosure: "disclosure", selectable: "selectable", reorderable: "reorderable", size: "size", href: "href", rotateIcon: "rotateIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected", "class.disclosure": "this.disclosure", "class": "this.size" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, read: ElementRef }, { propertyName: "radio", first: true, predicate: RadioComponent, descendants: true, read: ElementRef }, { propertyName: "toggle", first: true, predicate: ToggleComponent, descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "ionItem", first: true, predicate: IonItem, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n", styles: [":host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}@media (hover: hover) and (pointer: fine){ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px}@media screen and (orientation: landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:14px;line-height:20px}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item,:host-context(kirby-popover .focused) ion-item{--background: rgb(244.8, 244.8, 244.8)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], dependencies: [{ kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ItemComponent, isStandalone: true, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", disclosure: "disclosure", selectable: "selectable", reorderable: "reorderable", size: "size", href: "href", rotateIcon: "rotateIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected", "class.disclosure": "this.disclosure", "class": "this.size" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, read: ElementRef }, { propertyName: "radio", first: true, predicate: RadioComponent, descendants: true, read: ElementRef }, { propertyName: "toggle", first: true, predicate: ToggleComponent, descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "ionItem", first: true, predicate: IonItem, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n", styles: [":host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}@media(hover:hover)and (pointer:fine){ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px}@media screen and (orientation:landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:14px;line-height:20px}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item,:host-context(kirby-popover .focused) ion-item{--background: rgb(244.8, 244.8, 244.8)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], dependencies: [{ kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonItem, IonReorder, IconComponent], template: "<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n", styles: [":host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}@media (hover: hover) and (pointer: fine){ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px}@media screen and (orientation: landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:14px;line-height:20px}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item,:host-context(kirby-popover .focused) ion-item{--background: rgb(244.8, 244.8, 244.8)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
+            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonItem, IonReorder, IconComponent], template: "<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n", styles: [":host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}@media(hover:hover)and (pointer:fine){ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px}@media screen and (orientation:landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:14px;line-height:20px}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item,:host-context(kirby-popover .focused) ion-item{--background: rgb(244.8, 244.8, 244.8)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
@@ -112,10 +112,10 @@ class LabelComponent {
     get _direction() {
         return this.direction === 'horizontal';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LabelComponent, isStandalone: true, selector: "kirby-label", inputs: { direction: "direction" }, host: { properties: { "class.horizontal": "this._direction" } }, ngImport: i0, template: "<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n", styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:last-child{white-space:normal;overflow:visible;text-overflow:initial}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h1,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h2,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h3,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h4,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h5,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h6,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>data,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(p){font-size:14px;line-height:20px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(.kirby-item-title),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h1),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h2),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h3),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h4),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h5),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h6),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle]:not(:last-child),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[wrap],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-wrap{white-space:normal}:host-context(kirby-section-header) ion-label{--padding-end: 16px;--padding-start: 16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[wrap]{white-space:normal}:host([slot=end]) ion-label ::ng-deep>data,:host([slot=end]) ion-label ::ng-deep>[detail]{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]):not(.kirby-item-detail),:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]):not(.kirby-item-detail){font-weight:700}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LabelComponent, isStandalone: true, selector: "kirby-label", inputs: { direction: "direction" }, host: { properties: { "class.horizontal": "this._direction" } }, ngImport: i0, template: "<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n", styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:last-child{white-space:normal;overflow:visible;text-overflow:initial}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h1,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h2,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h3,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h4,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h5,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h6,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>data,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(p){font-size:14px;line-height:20px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(.kirby-item-title),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h1),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h2),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h3),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h4),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h5),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h6),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle]:not(:last-child),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[wrap],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-wrap{white-space:normal}:host-context(kirby-section-header) ion-label{--padding-end: 16px;--padding-start: 16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[wrap]{white-space:normal}:host([slot=end]) ion-label ::ng-deep>data,:host([slot=end]) ion-label ::ng-deep>[detail]{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]):not(.kirby-item-detail),:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]):not(.kirby-item-detail){font-weight:700}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-label', imports: [IonLabel], template: "<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n", styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:last-child{white-space:normal;overflow:visible;text-overflow:initial}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h1,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h2,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h3,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h4,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h5,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h6,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>data,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(p){font-size:14px;line-height:20px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(.kirby-item-title),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h1),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h2),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h3),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h4),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h5),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h6),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(data){font-size:16px;line-height:24px;font-weight:400}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail{font-size:12px;line-height:16px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle]:not(:last-child),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[wrap],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-wrap{white-space:normal}:host-context(kirby-section-header) ion-label{--padding-end: 16px;--padding-start: 16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[wrap]{white-space:normal}:host([slot=end]) ion-label ::ng-deep>data,:host([slot=end]) ion-label ::ng-deep>[detail]{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]):not(.kirby-item-detail),:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]):not(.kirby-item-detail){font-weight:700}\n"] }]
         }], propDecorators: { direction: [{
@@ -127,11 +127,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 const imports = [ItemComponent, LabelComponent];
 class ItemModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ItemModule, imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ItemComponent, LabelComponent], exports: [ItemComponent, LabelComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ItemModule, imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, imports] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ItemModule, imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ItemComponent, LabelComponent], exports: [ItemComponent, LabelComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ItemModule, imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, imports] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ItemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ...imports],

package/fesm2022/kirbydesign-designsystem-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-item.mjs","sources":["../../item/src/item.component.ts","../../item/src/item.component.html","../../item/src/label/label.component.ts","../../item/src/label/label.component.html","../../item/src/item.module.ts","../../item/src/kirbydesign-designsystem-item.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\n\nimport { CheckboxComponent } from '@kirbydesign/designsystem/checkbox';\nimport { RadioComponent } from '@kirbydesign/designsystem/radio';\nimport { ToggleComponent } from '@kirbydesign/designsystem/toggle';\nimport { IonItem, IonReorder } from '@ionic/angular/standalone';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ItemSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n}\n\n@Component({\n  selector: 'kirby-item',\n  templateUrl: './item.component.html',\n  styleUrls: ['./item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonItem, IonReorder, IconComponent],\n})\nexport class ItemComponent implements AfterViewInit {\n  private _linkAttributesToForward = ['rel', 'target', 'download'];\n\n  @HostBinding('class.disabled')\n  @Input()\n  disabled: boolean;\n  @HostBinding('class.selected')\n  @Input()\n  selected: boolean;\n  @HostBinding('class.disclosure')\n  @Input()\n  disclosure: 'link' | 'arrow-more' | 'arrow-down' | 'arrow-up' | null;\n\n  private _selectable: boolean;\n  get selectable(): boolean {\n    return this._selectable;\n  }\n\n  @Input() set selectable(value: boolean) {\n    this._selectable = value;\n    this.cdr.markForCheck();\n  }\n\n  @Input()\n  reorderable: boolean;\n  @HostBinding('class')\n  @Input()\n  size: ItemSize | `${ItemSize}` = ItemSize.MD;\n\n  @Input()\n  href: string;\n\n  @Input() rotateIcon: boolean = false;\n\n  @ContentChild(CheckboxComponent, { static: false, read: ElementRef })\n  private checkbox: ElementRef<HTMLElement>;\n  @ContentChild(RadioComponent, { static: false, read: ElementRef })\n  private radio: ElementRef<HTMLElement>;\n  @ContentChild(ToggleComponent, { static: false, read: ElementRef })\n  private toggle: ElementRef<HTMLElement>;\n  @ContentChild(ButtonComponent, { static: false, read: ElementRef })\n  private button: ElementRef<HTMLElement>;\n  @ViewChild(IonItem, { static: true, read: ElementRef })\n  private ionItem: ElementRef<HTMLIonItemElement>;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._linkAttributesToForward,\n      this.renderer,\n      this.ionItem.nativeElement\n    );\n  }\n\n  // Prevent default when inside kirby-dropdown to avoid blurring dropdown:\n  onMouseDown(event: MouseEvent) {\n    if (\n      event.currentTarget instanceof HTMLElement &&\n      event.currentTarget.closest('kirby-dropdown')\n    ) {\n      event.preventDefault();\n    }\n  }\n\n  get _renderButton(): boolean {\n    // We shouldn't render item as a button if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n\n    return this.selectable && !this.containsNestedInteractives();\n  }\n\n  get _renderLink(): string {\n    // We shouldn't render item as a link if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n    return this.containsNestedInteractives() ? undefined : this.href;\n  }\n\n  private containsNestedInteractives(): boolean {\n    return !!(this.checkbox || this.radio || this.toggle || this.button);\n  }\n}\n","<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n","import { Component, HostBinding, Input } from '@angular/core';\nimport { IonLabel } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'kirby-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.scss'],\n  imports: [IonLabel],\n})\nexport class LabelComponent {\n  @Input()\n  direction: 'vertical' | 'horizontal' = 'vertical';\n\n  @HostBinding('class.horizontal')\n  get _direction() {\n    return this.direction === 'horizontal';\n  }\n}\n","<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { IonItem, IonLabel, IonReorder } from '@ionic/angular/standalone';\nimport { ItemComponent } from './item.component';\nimport { LabelComponent } from './label/label.component';\n\nconst imports = [ItemComponent, LabelComponent];\n@NgModule({\n  imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ...imports],\n  exports: [...imports],\n})\nexport class ItemModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-item.mjs","sources":["../../item/src/item.component.ts","../../item/src/item.component.html","../../item/src/label/label.component.ts","../../item/src/label/label.component.html","../../item/src/item.module.ts","../../item/src/kirbydesign-designsystem-item.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\n\nimport { CheckboxComponent } from '@kirbydesign/designsystem/checkbox';\nimport { RadioComponent } from '@kirbydesign/designsystem/radio';\nimport { ToggleComponent } from '@kirbydesign/designsystem/toggle';\nimport { IonItem, IonReorder } from '@ionic/angular/standalone';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ItemSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n}\n\n@Component({\n  selector: 'kirby-item',\n  templateUrl: './item.component.html',\n  styleUrls: ['./item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonItem, IonReorder, IconComponent],\n})\nexport class ItemComponent implements AfterViewInit {\n  private _linkAttributesToForward = ['rel', 'target', 'download'];\n\n  @HostBinding('class.disabled')\n  @Input()\n  disabled: boolean;\n  @HostBinding('class.selected')\n  @Input()\n  selected: boolean;\n  @HostBinding('class.disclosure')\n  @Input()\n  disclosure: 'link' | 'arrow-more' | 'arrow-down' | 'arrow-up' | null;\n\n  private _selectable: boolean;\n  get selectable(): boolean {\n    return this._selectable;\n  }\n\n  @Input() set selectable(value: boolean) {\n    this._selectable = value;\n    this.cdr.markForCheck();\n  }\n\n  @Input()\n  reorderable: boolean;\n  @HostBinding('class')\n  @Input()\n  size: ItemSize | `${ItemSize}` = ItemSize.MD;\n\n  @Input()\n  href: string;\n\n  @Input() rotateIcon: boolean = false;\n\n  @ContentChild(CheckboxComponent, { static: false, read: ElementRef })\n  private checkbox: ElementRef<HTMLElement>;\n  @ContentChild(RadioComponent, { static: false, read: ElementRef })\n  private radio: ElementRef<HTMLElement>;\n  @ContentChild(ToggleComponent, { static: false, read: ElementRef })\n  private toggle: ElementRef<HTMLElement>;\n  @ContentChild(ButtonComponent, { static: false, read: ElementRef })\n  private button: ElementRef<HTMLElement>;\n  @ViewChild(IonItem, { static: true, read: ElementRef })\n  private ionItem: ElementRef<HTMLIonItemElement>;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._linkAttributesToForward,\n      this.renderer,\n      this.ionItem.nativeElement\n    );\n  }\n\n  // Prevent default when inside kirby-dropdown to avoid blurring dropdown:\n  onMouseDown(event: MouseEvent) {\n    if (\n      event.currentTarget instanceof HTMLElement &&\n      event.currentTarget.closest('kirby-dropdown')\n    ) {\n      event.preventDefault();\n    }\n  }\n\n  get _renderButton(): boolean {\n    // We shouldn't render item as a button if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n\n    return this.selectable && !this.containsNestedInteractives();\n  }\n\n  get _renderLink(): string {\n    // We shouldn't render item as a link if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n    return this.containsNestedInteractives() ? undefined : this.href;\n  }\n\n  private containsNestedInteractives(): boolean {\n    return !!(this.checkbox || this.radio || this.toggle || this.button);\n  }\n}\n","<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n","import { Component, HostBinding, Input } from '@angular/core';\nimport { IonLabel } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'kirby-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.scss'],\n  imports: [IonLabel],\n})\nexport class LabelComponent {\n  @Input()\n  direction: 'vertical' | 'horizontal' = 'vertical';\n\n  @HostBinding('class.horizontal')\n  get _direction() {\n    return this.direction === 'horizontal';\n  }\n}\n","<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { IonItem, IonLabel, IonReorder } from '@ionic/angular/standalone';\nimport { ItemComponent } from './item.component';\nimport { LabelComponent } from './label/label.component';\n\nconst imports = [ItemComponent, LabelComponent];\n@NgModule({\n  imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ...imports],\n  exports: [...imports],\n})\nexport class ItemModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-kirby-app.mjs

@@ -23,10 +23,10 @@ class AppComponent {
             });
         }, ensureIonicDeviceHacksDelay);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppComponent, isStandalone: true, selector: "kirby-app", viewQueries: [{ propertyName: "ionAppElement", first: true, predicate: IonApp, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-app>\n  <ng-content></ng-content>\n</ion-app>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden}\n"], dependencies: [{ kind: "component", type: IonApp, selector: "ion-app" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AppComponent, isStandalone: true, selector: "kirby-app", viewQueries: [{ propertyName: "ionAppElement", first: true, predicate: IonApp, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-app>\n  <ng-content></ng-content>\n</ion-app>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden}\n"], dependencies: [{ kind: "component", type: IonApp, selector: "ion-app" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-app', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonApp], template: "<ion-app>\n  <ng-content></ng-content>\n</ion-app>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden}\n"] }]
         }], propDecorators: { ionAppElement: [{
@@ -35,11 +35,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class KirbyAppModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KirbyAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: KirbyAppModule, imports: [CommonModule, IonApp, AppComponent], exports: [AppComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KirbyAppModule, imports: [CommonModule, IonApp, AppComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KirbyAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: KirbyAppModule, imports: [CommonModule, IonApp, AppComponent], exports: [AppComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KirbyAppModule, imports: [CommonModule, IonApp, AppComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KirbyAppModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KirbyAppModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IonApp, AppComponent],

package/fesm2022/kirbydesign-designsystem-kirby-app.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-kirby-app.mjs","sources":["../../kirby-app/src/kirby-app.component.ts","../../kirby-app/src/kirby-app.component.html","../../kirby-app/src/kirby-app.module.ts","../../kirby-app/src/kirbydesign-designsystem-kirby-app.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewChild,\n} from '@angular/core';\nimport { IonApp } from '@ionic/angular/standalone';\nimport { componentOnReady } from '@ionic/core';\n\n@Component({\n  selector: 'kirby-app',\n  templateUrl: './kirby-app.component.html',\n  styleUrls: ['./kirby-app.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonApp],\n})\nexport class AppComponent implements AfterContentInit {\n  @ViewChild(IonApp, { static: true, read: ElementRef })\n  private ionAppElement: ElementRef<HTMLIonAppElement>;\n\n  ngAfterContentInit(): void {\n    componentOnReady(this.ionAppElement.nativeElement, () => {\n      this.registerInputs();\n    });\n  }\n\n  registerInputs() {\n    // Input might be already loaded in the DOM before ion-device-hacks did.\n    // At this point we need to look for all of the inputs not registered yet\n    // and register them.\n    // There is no Ionic event to hook into, so we'll use a timeout\n    // to ensure ion-device-hacks has run:\n    const ensureIonicDeviceHacksDelay = 250;\n    setTimeout(() => {\n      document.querySelectorAll('kirby-form-field').forEach((formField) => {\n        formField.dispatchEvent(new CustomEvent('kirbyRegisterFormField'));\n      });\n    }, ensureIonicDeviceHacksDelay);\n  }\n}\n","<ion-app>\n  <ng-content></ng-content>\n</ion-app>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonApp } from '@ionic/angular/standalone';\nimport { AppComponent as KirbyAppComponent } from './kirby-app.component';\n\n@NgModule({\n  imports: [CommonModule, IonApp, KirbyAppComponent],\n  exports: [KirbyAppComponent],\n})\nexport class KirbyAppModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["KirbyAppComponent"],"mappings":";;;;;;MAiBa,YAAY,CAAA;IAIvB,kBAAkB,GAAA;QAChB,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,MAAK;YACtD,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;IACJ;IAEA,cAAc,GAAA;;;;;;QAMZ,MAAM,2BAA2B,GAAG,GAAG;QACvC,UAAU,CAAC,MAAK;YACd,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;gBAClE,SAAS,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,CAAC,CAAC;AACpE,YAAA,CAAC,CAAC;QACJ,CAAC,EAAE,2BAA2B,CAAC;IACjC;kIAtBW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAY,oHACZ,MAAM,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAwB,UAAU,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBrD,sDAGA,gJDYY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEL,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,sDAAA,EAAA,MAAA,EAAA,CAAA,wFAAA,CAAA,EAAA;;sBAGhB,SAAS;uBAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE;;;MET1C,cAAc,CAAA;kIAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHf,YAAY,EAAE,MAAM,EAAEA,YAAiB,aACvCA,YAAiB,CAAA,EAAA,CAAA,CAAA;AAEhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EAAA,OAAA,EAAA,CAHf,YAAY,EAAE,MAAM,EAAEA,YAAiB,CAAA,EAAA,CAAA,CAAA;;4FAGtC,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,EAAEA,YAAiB,CAAC;oBAClD,OAAO,EAAE,CAACA,YAAiB,CAAC;AAC7B,iBAAA;;;ACRD;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-kirby-app.mjs","sources":["../../kirby-app/src/kirby-app.component.ts","../../kirby-app/src/kirby-app.component.html","../../kirby-app/src/kirby-app.module.ts","../../kirby-app/src/kirbydesign-designsystem-kirby-app.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewChild,\n} from '@angular/core';\nimport { IonApp } from '@ionic/angular/standalone';\nimport { componentOnReady } from '@ionic/core';\n\n@Component({\n  selector: 'kirby-app',\n  templateUrl: './kirby-app.component.html',\n  styleUrls: ['./kirby-app.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonApp],\n})\nexport class AppComponent implements AfterContentInit {\n  @ViewChild(IonApp, { static: true, read: ElementRef })\n  private ionAppElement: ElementRef<HTMLIonAppElement>;\n\n  ngAfterContentInit(): void {\n    componentOnReady(this.ionAppElement.nativeElement, () => {\n      this.registerInputs();\n    });\n  }\n\n  registerInputs() {\n    // Input might be already loaded in the DOM before ion-device-hacks did.\n    // At this point we need to look for all of the inputs not registered yet\n    // and register them.\n    // There is no Ionic event to hook into, so we'll use a timeout\n    // to ensure ion-device-hacks has run:\n    const ensureIonicDeviceHacksDelay = 250;\n    setTimeout(() => {\n      document.querySelectorAll('kirby-form-field').forEach((formField) => {\n        formField.dispatchEvent(new CustomEvent('kirbyRegisterFormField'));\n      });\n    }, ensureIonicDeviceHacksDelay);\n  }\n}\n","<ion-app>\n  <ng-content></ng-content>\n</ion-app>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonApp } from '@ionic/angular/standalone';\nimport { AppComponent as KirbyAppComponent } from './kirby-app.component';\n\n@NgModule({\n  imports: [CommonModule, IonApp, KirbyAppComponent],\n  exports: [KirbyAppComponent],\n})\nexport class KirbyAppModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["KirbyAppComponent"],"mappings":";;;;;;MAiBa,YAAY,CAAA;IAIvB,kBAAkB,GAAA;QAChB,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,MAAK;YACtD,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;IACJ;IAEA,cAAc,GAAA;;;;;;QAMZ,MAAM,2BAA2B,GAAG,GAAG;QACvC,UAAU,CAAC,MAAK;YACd,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;gBAClE,SAAS,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,CAAC,CAAC;AACpE,YAAA,CAAC,CAAC;QACJ,CAAC,EAAE,2BAA2B,CAAC;IACjC;iIAtBW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,oHACZ,MAAM,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAwB,UAAU,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBrD,sDAGA,gJDYY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEL,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,sDAAA,EAAA,MAAA,EAAA,CAAA,wFAAA,CAAA,EAAA;;sBAGhB,SAAS;uBAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE;;;MET1C,cAAc,CAAA;iIAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHf,YAAY,EAAE,MAAM,EAAEA,YAAiB,aACvCA,YAAiB,CAAA,EAAA,CAAA,CAAA;AAEhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EAAA,OAAA,EAAA,CAHf,YAAY,EAAE,MAAM,EAAEA,YAAiB,CAAA,EAAA,CAAA,CAAA;;2FAGtC,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,EAAEA,YAAiB,CAAC;oBAClD,OAAO,EAAE,CAACA,YAAiB,CAAC;AAC7B,iBAAA;;;ACRD;;AAEG;;;;"}