@kirbydesign/designsystem 11.11.2-dev-85b2964 → 11.11.2-dev-5e0acd6

package/fesm2022/kirbydesign-designsystem-checkbox.mjs

@@ -3,10 +3,22 @@ import { EventEmitter, ElementRef, forwardRef, Output, HostBinding, Input, ViewC
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@kirbydesign/designsystem/helpers';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
-import { IonCheckbox } from '@ionic/angular';
+import { IonCheckbox } from '@ionic/angular/standalone';
 import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
 
 class CheckboxComponent {
+    /**
+     * @deprecated Attention levels 1 and 2 now look the same, so this input no longer has any effect.
+     * This input will be removed in a future major version.
+     */
+    set attentionLevel(value) {
+        console.warn(`[Kirby Checkbox] The 'attentionLevel' input is deprecated and no longer has any effect.
+        Attention levels 1 and 2 now look the same. This input will be removed in a future major version.`);
+        this._attentionLevel = value;
+    }
+    get attentionLevel() {
+        return this._attentionLevel;
+    }
     get _isDisabled() {
         return this.disabled ? 'disabled' : null;
     }
@@ -22,7 +34,7 @@ class CheckboxComponent {
         this.cdr = cdr;
         this.checked = false;
         this.indeterminate = false;
-        this.attentionLevel = '2';
+        this._attentionLevel = '2';
         this.size = 'md';
         this.hasError = false;
         this.disabled = false;
@@ -110,17 +122,17 @@ class CheckboxComponent {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.has-hidden-label": "this._labelText" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.has-hidden-label": "this._labelText" } }, providers: [
             IonicElementPartHelper,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => CheckboxComponent)),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media(hover:hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--border-color-checked: rgb(45.030660793, 192.689339207, 114.1474889868)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--border-color-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media(hover:hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(91.56, 91.56, 91.56);--border-color-checked: rgb(91.56, 91.56, 91.56)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(234.6, 234.6, 234.6);--checkbox-background-checked: rgb(109.72, 109.72, 109.72);--border-color-checked: rgb(109.72, 109.72, 109.72)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-medium)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}:host ion-checkbox:focus-visible{outline:none;--border-width: 0;--border-color: transparent;--border-color-checked: transparent}:host ion-checkbox:focus-visible::part(container){padding:calc(var(--kirby-checkbox-container-padding) + 1px);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}@media(hover:hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(234.6, 234.6, 234.6)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(224.4, 224.4, 224.4)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled] ion-checkbox::part(label-text-wrapper),:host[disabled] ion-checkbox::part(native-wrapper){opacity:var(--kirby-opacity-40)}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}@media(hover:hover){:host ion-checkbox:hover{--checkbox-background: var(--kirby-color-fill-raised-hover);--checkbox-background-checked: var(--kirby-color-fill-engaged-hover);--checkmark-color: var(--kirby-color-content-engaged-hover);--border-color: var(--kirby-color-border-raised-hover);--border-color-checked: var(--kirby-color-border-engaged-hover)}}:host ion-checkbox:active{--checkbox-background: var(--kirby-color-fill-raised-active);--checkbox-background-checked: var(--kirby-color-fill-engaged-active);--checkmark-color: var(--kirby-color-content-engaged-active);--border-color: var(--kirby-color-border-raised-active);--border-color-checked: var(--kirby-color-border-engaged-active)}:host ion-checkbox:focus-visible{outline:none;--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host ion-checkbox:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-color-fill-raised);--checkbox-background-checked: var(--kirby-color-fill-engaged);--checkmark-color: var(--kirby-color-content-engaged);--border-width: var(--kirby-stroke-xs);--border-color: var(--kirby-color-border-raised);--border-color-checked: var(--kirby-color-border-engaged);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.error ion-checkbox{--border-color: var(--kirby-color-border-raised-danger);--border-color-checked: var(--kirby-color-border-raised-danger)}:host.error ion-checkbox::part(container){box-shadow:var(--kirby-error-ring-combined-inset)}:host.error ion-checkbox:focus-visible{--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host.error ion-checkbox:focus-visible::part(container){box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ imports: [IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         IonicElementPartHelper,
@@ -129,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             useExisting: forwardRef((() => CheckboxComponent)),
                             multi: true,
                         },
-                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media(hover:hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--border-color-checked: rgb(45.030660793, 192.689339207, 114.1474889868)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--border-color-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media(hover:hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(91.56, 91.56, 91.56);--border-color-checked: rgb(91.56, 91.56, 91.56)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(234.6, 234.6, 234.6);--checkbox-background-checked: rgb(109.72, 109.72, 109.72);--border-color-checked: rgb(109.72, 109.72, 109.72)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-medium)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}:host ion-checkbox:focus-visible{outline:none;--border-width: 0;--border-color: transparent;--border-color-checked: transparent}:host ion-checkbox:focus-visible::part(container){padding:calc(var(--kirby-checkbox-container-padding) + 1px);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}@media(hover:hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(234.6, 234.6, 234.6)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(224.4, 224.4, 224.4)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
+                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled] ion-checkbox::part(label-text-wrapper),:host[disabled] ion-checkbox::part(native-wrapper){opacity:var(--kirby-opacity-40)}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}@media(hover:hover){:host ion-checkbox:hover{--checkbox-background: var(--kirby-color-fill-raised-hover);--checkbox-background-checked: var(--kirby-color-fill-engaged-hover);--checkmark-color: var(--kirby-color-content-engaged-hover);--border-color: var(--kirby-color-border-raised-hover);--border-color-checked: var(--kirby-color-border-engaged-hover)}}:host ion-checkbox:active{--checkbox-background: var(--kirby-color-fill-raised-active);--checkbox-background-checked: var(--kirby-color-fill-engaged-active);--checkmark-color: var(--kirby-color-content-engaged-active);--border-color: var(--kirby-color-border-raised-active);--border-color-checked: var(--kirby-color-border-engaged-active)}:host ion-checkbox:focus-visible{outline:none;--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host ion-checkbox:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-color-fill-raised);--checkbox-background-checked: var(--kirby-color-fill-engaged);--checkmark-color: var(--kirby-color-content-engaged);--border-width: var(--kirby-stroke-xs);--border-color: var(--kirby-color-border-raised);--border-color-checked: var(--kirby-color-border-engaged);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.error ion-checkbox{--border-color: var(--kirby-color-border-raised-danger);--border-color-checked: var(--kirby-color-border-raised-danger)}:host.error ion-checkbox::part(container){box-shadow:var(--kirby-error-ring-combined-inset)}:host.error ion-checkbox:focus-visible{--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host.error ion-checkbox:focus-visible::part(container){box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }, { type: i0.ChangeDetectorRef }], propDecorators: { ionCheckboxElement: [{
                 type: ViewChild,
                 args: [IonCheckbox, { read: ElementRef, static: true }]

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonCheckbox],\n  selector: 'kirby-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class CheckboxComponent\n  implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n  @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n  private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n  @Input() checked: boolean = false;\n  @Input() indeterminate: boolean = false;\n  @Input() attentionLevel: '1' | '2' = '2';\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @HostBinding('class.error')\n  @Input()\n  hasError: boolean = false;\n\n  @Input() disabled = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.attention-level1') get isAttentionLevel1() {\n    return this.attentionLevel === '1';\n  }\n  @HostBinding('class.attention-level2') get isAttentionLevel2() {\n    return this.attentionLevel === '2';\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionCheckboxElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart(\n      'native-wrapper',\n      this.ionCheckboxElement,\n      '.native-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  onChecked(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  onBlur() {\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the checkbox's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the checkbox. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\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-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonCheckbox],\n  selector: 'kirby-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class CheckboxComponent\n  implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n  @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n  private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n  @Input() checked: boolean = false;\n  @Input() indeterminate: boolean = false;\n\n  private _attentionLevel: '1' | '2' = '2';\n  /**\n   * @deprecated Attention levels 1 and 2 now look the same, so this input no longer has any effect.\n   * This input will be removed in a future major version.\n   */\n  @Input() set attentionLevel(value: '1' | '2') {\n    console.warn(\n      `[Kirby Checkbox] The 'attentionLevel' input is deprecated and no longer has any effect.\n        Attention levels 1 and 2 now look the same. This input will be removed in a future major version.`\n    );\n    this._attentionLevel = value;\n  }\n  get attentionLevel(): '1' | '2' {\n    return this._attentionLevel;\n  }\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @HostBinding('class.error')\n  @Input()\n  hasError: boolean = false;\n\n  @Input() disabled = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.attention-level1') get isAttentionLevel1() {\n    return this.attentionLevel === '1';\n  }\n  @HostBinding('class.attention-level2') get isAttentionLevel2() {\n    return this.attentionLevel === '2';\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionCheckboxElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart(\n      'native-wrapper',\n      this.ionCheckboxElement,\n      '.native-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  onChecked(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  onBlur() {\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the checkbox's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the checkbox. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\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-config.mjs

@@ -1,5 +1,5 @@
 import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject } from '@angular/core';
-import { provideIonicAngular, isPlatform, AnimationController, PopoverController, ModalController as ModalController$1 } from '@ionic/angular';
+import { provideIonicAngular, isPlatform, AnimationController, PopoverController, ModalController as ModalController$1 } from '@ionic/angular/standalone';
 import { ConfigToken, AngularDelegate, provideComponentInputBinding } from '@ionic/angular/common';
 import { GestureController } from '@kirbydesign/designsystem/gesture';
 import { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-config.mjs","sources":["../../config/src/provide-kirby.ts","../../config/src/kirbydesign-designsystem-config.ts"],"sourcesContent":["import {\n  EnvironmentProviders,\n  inject,\n  InjectionToken,\n  makeEnvironmentProviders,\n  provideAppInitializer,\n  Provider,\n} from '@angular/core';\nimport { AnimationController, isPlatform, provideIonicAngular } from '@ionic/angular';\nimport { provideComponentInputBinding } from '@ionic/angular/common';\nimport {\n  ModalController as IonModalController,\n  PopoverController as IonPopoverController,\n} from '@ionic/angular';\nimport {\n  AngularDelegate as IonAngularDelegate,\n  ConfigToken as IonConfigToken,\n} from '@ionic/angular/common';\nimport type { IonicConfig } from '@ionic/core';\nimport { GestureController } from '@kirbydesign/designsystem/gesture';\nimport { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';\nimport {\n  ActionSheetHelper,\n  AlertHelper,\n  CanDismissHelper,\n  ModalController,\n  ModalHelper,\n} from '@kirbydesign/designsystem/modal';\nimport {\n  ResizeObserverFactory,\n  ResizeObserverService,\n  TextResizeObserverService,\n} from '@kirbydesign/designsystem/shared';\nimport { ToastController, ToastHelper } from '@kirbydesign/designsystem/toast';\n\n/**\n * Configuration object for global configuration of Kirby.\n */\nexport interface KirbyConfig {\n  moduleRootRoutePath?: string;\n\n  /**\n   * Activate focus management for components rendered in a kirby-router-outlet.\n   * When a kirby-page enters the view, focus will be set to the pages primary heading (h1) inside the pages toolbar.\n   */\n  focusManager?: boolean;\n\n  /**\n   * Set the HTML documents title to match the title of any kirby-page entering the view.\n   */\n  setHtmlDocTitle?: boolean;\n}\n\n/**\n * Injection token for provided Kirby configuration.\n */\nexport const KIRBY_CONFIG = new InjectionToken<KirbyConfig>('KIRBY_CONFIG');\n\n/**\n *\n * @param features - Additional features to be provided to the Kirby environment:\n * @see {@link withGlobalSetup} for setting up global configuration.\n */\nexport function provideKirby(\n  ...features: Provider[] | EnvironmentProviders[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    ModalController,\n    ActionSheetHelper,\n    ModalHelper,\n    AlertHelper,\n    ToastHelper,\n    ToastController,\n    LoadingOverlayService,\n    ResizeObserverFactory,\n    ResizeObserverService,\n    CanDismissHelper,\n    GestureController,\n    ...patchIonicProviders(),\n    features,\n  ]);\n}\n\n/**\n * Sets up global configuration when used with the provideKirby EnvironmentProvider function.\n * Should be called exactly once per application when bootstrapping, to set up Kirby in the browsers runtime.\n *\n * @param config - (Optional) Additional configuration via the `KirbyConfig` object.\n */\nexport function withGlobalSetup(config?: KirbyConfig): EnvironmentProviders {\n  setGlobalConfig(config);\n\n  const ionicConfig: IonicConfig = {\n    ...getBaseIonicConfig(),\n  };\n\n  if (config?.focusManager) {\n    ionicConfig.focusManagerPriority = ['heading'];\n  }\n\n  return makeEnvironmentProviders([\n    provideIonicAngular(ionicConfig),\n    provideAppInitializer(() => inject(TextResizeObserverService).initialize()),\n  ]);\n}\n\n/**\n * Retrieves the global Kirby configuration object from the window object.\n */\nexport function getGlobalConfig(): KirbyConfig | undefined {\n  return (window as any).__KIRBY_CONFIG__ as KirbyConfig | undefined;\n}\n\n/**\n * Private method to set the global Kirby configuration object on the window object.\n *\n * @param config - `KirbyConfig` object to configure Kirby globally.\n */\nfunction setGlobalConfig(config: KirbyConfig | undefined): void {\n  if (getGlobalConfig()) {\n    console.warn(\n      `Global Kirby configuration is already provided through withGlobalSetup() elsewhere.\nOverwriting the existing configuration is not recommended. Consider removing duplicate calls.`\n    );\n  }\n\n  (window as any).__KIRBY_CONFIG__ = config ?? {};\n}\n\n/**\n * Returns the base Ionic configuration object with common defaults.\n */\nfunction getBaseIonicConfig(): IonicConfig {\n  const shouldHaveNoopAnimation = !isPlatform('hybrid');\n  const navAnimationConfig: IonicConfig = shouldHaveNoopAnimation && {\n    navAnimation: () => new AnimationController().create(),\n  };\n\n  return {\n    mode: 'ios',\n    ...navAnimationConfig,\n  };\n}\n\n/**\n * Return same Ionic Angular providers as provideIonicAngular, but exclude the APP_INITIALIZER token.\n * https://github.com/ionic-team/ionic-framework/blob/v8.6.1/packages/angular/standalone/src/providers/ionic-angular.ts#L15\n * This is to ensure that we only initialize Ionic once in `withGlobalSetup`, where we use provideIonicAngular as intended,\n * but still allow other Angular contexts (e.g. Micro Frontends) to call provideKirby to get needed Kirby and Ionic config and providers in their context.\n */\nfunction patchIonicProviders(): Provider[] {\n  return [\n    {\n      provide: IonConfigToken,\n      useValue: { ...getBaseIonicConfig(), ...(window as any)?.Ionic?.config },\n    },\n    provideComponentInputBinding(),\n    IonAngularDelegate,\n    IonPopoverController,\n    IonModalController,\n  ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["IonConfigToken","IonAngularDelegate","IonPopoverController","IonModalController"],"mappings":";;;;;;;;;AAqDA;;AAEG;MACU,YAAY,GAAG,IAAI,cAAc,CAAc,cAAc;AAE1E;;;;AAIG;AACG,SAAU,YAAY,CAC1B,GAAG,QAA6C,EAAA;AAEhD,IAAA,OAAO,wBAAwB,CAAC;QAC9B,eAAe;QACf,iBAAiB;QACjB,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;QACf,qBAAqB;QACrB,qBAAqB;QACrB,qBAAqB;QACrB,gBAAgB;QAChB,iBAAiB;AACjB,QAAA,GAAG,mBAAmB,EAAE;QACxB,QAAQ;AACT,KAAA,CAAC;AACJ;AAEA;;;;;AAKG;AACG,SAAU,eAAe,CAAC,MAAoB,EAAA;IAClD,eAAe,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,WAAW,GAAgB;AAC/B,QAAA,GAAG,kBAAkB,EAAE;KACxB;AAED,IAAA,IAAI,MAAM,EAAE,YAAY,EAAE;AACxB,QAAA,WAAW,CAAC,oBAAoB,GAAG,CAAC,SAAS,CAAC;IAChD;AAEA,IAAA,OAAO,wBAAwB,CAAC;QAC9B,mBAAmB,CAAC,WAAW,CAAC;QAChC,qBAAqB,CAAC,MAAM,MAAM,CAAC,yBAAyB,CAAC,CAAC,UAAU,EAAE,CAAC;AAC5E,KAAA,CAAC;AACJ;AAEA;;AAEG;SACa,eAAe,GAAA;IAC7B,OAAQ,MAAc,CAAC,gBAA2C;AACpE;AAEA;;;;AAIG;AACH,SAAS,eAAe,CAAC,MAA+B,EAAA;IACtD,IAAI,eAAe,EAAE,EAAE;QACrB,OAAO,CAAC,IAAI,CACV,CAAA;AACwF,6FAAA,CAAA,CACzF;IACH;AAEC,IAAA,MAAc,CAAC,gBAAgB,GAAG,MAAM,IAAI,EAAE;AACjD;AAEA;;AAEG;AACH,SAAS,kBAAkB,GAAA;AACzB,IAAA,MAAM,uBAAuB,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrD,MAAM,kBAAkB,GAAgB,uBAAuB,IAAI;QACjE,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,CAAC,MAAM,EAAE;KACvD;IAED,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,GAAG,kBAAkB;KACtB;AACH;AAEA;;;;;AAKG;AACH,SAAS,mBAAmB,GAAA;IAC1B,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAEA,WAAc;AACvB,YAAA,QAAQ,EAAE,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAI,MAAc,EAAE,KAAK,EAAE,MAAM,EAAE;AACzE,SAAA;AACD,QAAA,4BAA4B,EAAE;QAC9BC,eAAkB;QAClBC,iBAAoB;QACpBC,iBAAkB;KACnB;AACH;;ACjKA;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-config.mjs","sources":["../../config/src/provide-kirby.ts","../../config/src/kirbydesign-designsystem-config.ts"],"sourcesContent":["import {\n  EnvironmentProviders,\n  inject,\n  InjectionToken,\n  makeEnvironmentProviders,\n  provideAppInitializer,\n  Provider,\n} from '@angular/core';\nimport { AnimationController, isPlatform, provideIonicAngular } from '@ionic/angular/standalone';\nimport { provideComponentInputBinding } from '@ionic/angular/common';\nimport {\n  ModalController as IonModalController,\n  PopoverController as IonPopoverController,\n} from '@ionic/angular/standalone';\nimport {\n  AngularDelegate as IonAngularDelegate,\n  ConfigToken as IonConfigToken,\n} from '@ionic/angular/common';\nimport type { IonicConfig } from '@ionic/core';\nimport { GestureController } from '@kirbydesign/designsystem/gesture';\nimport { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';\nimport {\n  ActionSheetHelper,\n  AlertHelper,\n  CanDismissHelper,\n  ModalController,\n  ModalHelper,\n} from '@kirbydesign/designsystem/modal';\nimport {\n  ResizeObserverFactory,\n  ResizeObserverService,\n  TextResizeObserverService,\n} from '@kirbydesign/designsystem/shared';\nimport { ToastController, ToastHelper } from '@kirbydesign/designsystem/toast';\n\n/**\n * Configuration object for global configuration of Kirby.\n */\nexport interface KirbyConfig {\n  moduleRootRoutePath?: string;\n\n  /**\n   * Activate focus management for components rendered in a kirby-router-outlet.\n   * When a kirby-page enters the view, focus will be set to the pages primary heading (h1) inside the pages toolbar.\n   */\n  focusManager?: boolean;\n\n  /**\n   * Set the HTML documents title to match the title of any kirby-page entering the view.\n   */\n  setHtmlDocTitle?: boolean;\n}\n\n/**\n * Injection token for provided Kirby configuration.\n */\nexport const KIRBY_CONFIG = new InjectionToken<KirbyConfig>('KIRBY_CONFIG');\n\n/**\n *\n * @param features - Additional features to be provided to the Kirby environment:\n * @see {@link withGlobalSetup} for setting up global configuration.\n */\nexport function provideKirby(\n  ...features: Provider[] | EnvironmentProviders[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    ModalController,\n    ActionSheetHelper,\n    ModalHelper,\n    AlertHelper,\n    ToastHelper,\n    ToastController,\n    LoadingOverlayService,\n    ResizeObserverFactory,\n    ResizeObserverService,\n    CanDismissHelper,\n    GestureController,\n    ...patchIonicProviders(),\n    features,\n  ]);\n}\n\n/**\n * Sets up global configuration when used with the provideKirby EnvironmentProvider function.\n * Should be called exactly once per application when bootstrapping, to set up Kirby in the browsers runtime.\n *\n * @param config - (Optional) Additional configuration via the `KirbyConfig` object.\n */\nexport function withGlobalSetup(config?: KirbyConfig): EnvironmentProviders {\n  setGlobalConfig(config);\n\n  const ionicConfig: IonicConfig = {\n    ...getBaseIonicConfig(),\n  };\n\n  if (config?.focusManager) {\n    ionicConfig.focusManagerPriority = ['heading'];\n  }\n\n  return makeEnvironmentProviders([\n    provideIonicAngular(ionicConfig),\n    provideAppInitializer(() => inject(TextResizeObserverService).initialize()),\n  ]);\n}\n\n/**\n * Retrieves the global Kirby configuration object from the window object.\n */\nexport function getGlobalConfig(): KirbyConfig | undefined {\n  return (window as any).__KIRBY_CONFIG__ as KirbyConfig | undefined;\n}\n\n/**\n * Private method to set the global Kirby configuration object on the window object.\n *\n * @param config - `KirbyConfig` object to configure Kirby globally.\n */\nfunction setGlobalConfig(config: KirbyConfig | undefined): void {\n  if (getGlobalConfig()) {\n    console.warn(\n      `Global Kirby configuration is already provided through withGlobalSetup() elsewhere.\nOverwriting the existing configuration is not recommended. Consider removing duplicate calls.`\n    );\n  }\n\n  (window as any).__KIRBY_CONFIG__ = config ?? {};\n}\n\n/**\n * Returns the base Ionic configuration object with common defaults.\n */\nfunction getBaseIonicConfig(): IonicConfig {\n  const shouldHaveNoopAnimation = !isPlatform('hybrid');\n  const navAnimationConfig: IonicConfig = shouldHaveNoopAnimation && {\n    navAnimation: () => new AnimationController().create(),\n  };\n\n  return {\n    mode: 'ios',\n    ...navAnimationConfig,\n  };\n}\n\n/**\n * Return same Ionic Angular providers as provideIonicAngular, but exclude the APP_INITIALIZER token.\n * https://github.com/ionic-team/ionic-framework/blob/v8.6.1/packages/angular/standalone/src/providers/ionic-angular.ts#L15\n * This is to ensure that we only initialize Ionic once in `withGlobalSetup`, where we use provideIonicAngular as intended,\n * but still allow other Angular contexts (e.g. Micro Frontends) to call provideKirby to get needed Kirby and Ionic config and providers in their context.\n */\nfunction patchIonicProviders(): Provider[] {\n  return [\n    {\n      provide: IonConfigToken,\n      useValue: { ...getBaseIonicConfig(), ...(window as any)?.Ionic?.config },\n    },\n    provideComponentInputBinding(),\n    IonAngularDelegate,\n    IonPopoverController,\n    IonModalController,\n  ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["IonConfigToken","IonAngularDelegate","IonPopoverController","IonModalController"],"mappings":";;;;;;;;;AAqDA;;AAEG;MACU,YAAY,GAAG,IAAI,cAAc,CAAc,cAAc;AAE1E;;;;AAIG;AACG,SAAU,YAAY,CAC1B,GAAG,QAA6C,EAAA;AAEhD,IAAA,OAAO,wBAAwB,CAAC;QAC9B,eAAe;QACf,iBAAiB;QACjB,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;QACf,qBAAqB;QACrB,qBAAqB;QACrB,qBAAqB;QACrB,gBAAgB;QAChB,iBAAiB;AACjB,QAAA,GAAG,mBAAmB,EAAE;QACxB,QAAQ;AACT,KAAA,CAAC;AACJ;AAEA;;;;;AAKG;AACG,SAAU,eAAe,CAAC,MAAoB,EAAA;IAClD,eAAe,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,WAAW,GAAgB;AAC/B,QAAA,GAAG,kBAAkB,EAAE;KACxB;AAED,IAAA,IAAI,MAAM,EAAE,YAAY,EAAE;AACxB,QAAA,WAAW,CAAC,oBAAoB,GAAG,CAAC,SAAS,CAAC;IAChD;AAEA,IAAA,OAAO,wBAAwB,CAAC;QAC9B,mBAAmB,CAAC,WAAW,CAAC;QAChC,qBAAqB,CAAC,MAAM,MAAM,CAAC,yBAAyB,CAAC,CAAC,UAAU,EAAE,CAAC;AAC5E,KAAA,CAAC;AACJ;AAEA;;AAEG;SACa,eAAe,GAAA;IAC7B,OAAQ,MAAc,CAAC,gBAA2C;AACpE;AAEA;;;;AAIG;AACH,SAAS,eAAe,CAAC,MAA+B,EAAA;IACtD,IAAI,eAAe,EAAE,EAAE;QACrB,OAAO,CAAC,IAAI,CACV,CAAA;AACwF,6FAAA,CAAA,CACzF;IACH;AAEC,IAAA,MAAc,CAAC,gBAAgB,GAAG,MAAM,IAAI,EAAE;AACjD;AAEA;;AAEG;AACH,SAAS,kBAAkB,GAAA;AACzB,IAAA,MAAM,uBAAuB,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrD,MAAM,kBAAkB,GAAgB,uBAAuB,IAAI;QACjE,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,CAAC,MAAM,EAAE;KACvD;IAED,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,GAAG,kBAAkB;KACtB;AACH;AAEA;;;;;AAKG;AACH,SAAS,mBAAmB,GAAA;IAC1B,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAEA,WAAc;AACvB,YAAA,QAAQ,EAAE,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAI,MAAc,EAAE,KAAK,EAAE,MAAM,EAAE;AACzE,SAAA;AACD,QAAA,4BAA4B,EAAE;QAC9BC,eAAkB;QAClBC,iBAAoB;QACpBC,iBAAkB;KACnB;AACH;;ACjKA;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-data-table.mjs

@@ -29,10 +29,10 @@ class TableSortableComponent {
             this.renderer.setAttribute(this.spanElement.nativeElement, 'data-text', this.spanElement.nativeElement.textContent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TableSortableComponent, isStandalone: true, selector: "th[sortable]", inputs: { sortable: "sortable", active: "active", sortDirection: "sortDirection", iconAlignment: "iconAlignment", alignment: "alignment" }, host: { properties: { "class.sortable": "this.sortable", "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "spanElement", first: true, predicate: ["span"], descendants: true }], ngImport: i0, template: "@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableSortableComponent, isStandalone: true, selector: "th[sortable]", inputs: { sortable: "sortable", active: "active", sortDirection: "sortDirection", iconAlignment: "iconAlignment", alignment: "alignment" }, host: { properties: { "class.sortable": "this.sortable", "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "spanElement", first: true, predicate: ["span"], descendants: true }], ngImport: i0, template: "@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TableSortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableSortableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconComponent], template: "@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { sortable: [{
@@ -65,11 +65,11 @@ class DataTableModule {
         console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.
 Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent], exports: [TableSortableComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent], exports: [TableSortableComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TableSortableComponent],

package/fesm2022/kirbydesign-designsystem-data-table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-data-table.mjs","sources":["../../data-table/src/sortable/sortable.component.ts","../../data-table/src/sortable/sortable.component.html","../../data-table/src/data-table.module.ts","../../data-table/src/kirbydesign-designsystem-data-table.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'th[sortable]',\n  templateUrl: './sortable.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, IconComponent],\n})\nexport class TableSortableComponent implements AfterViewInit {\n  constructor(private renderer: Renderer2) {}\n\n  @HostBinding('class.sortable')\n  @Input()\n  sortable = false;\n\n  @Input() active = false;\n\n  @Input() sortDirection: 'asc' | 'desc' = 'asc';\n  @Input() iconAlignment: 'start' | 'end' = 'end';\n  @Input() alignment: 'start' | 'center' | 'end' = 'start';\n\n  @HostBinding('class.active')\n  get isActive() {\n    return this.sortable && this.active;\n  }\n\n  _getAlignmentClasses() {\n    const alignmentClasses: string[] = [];\n\n    if (this.iconAlignment === 'start') {\n      alignmentClasses.push('row-reverse');\n    }\n\n    alignmentClasses.push(`align-${this.alignment}`);\n\n    return alignmentClasses;\n  }\n\n  @ViewChild('span') spanElement: ElementRef;\n\n  ngAfterViewInit(): void {\n    if (this.spanElement) {\n      this.renderer.setAttribute(\n        this.spanElement.nativeElement,\n        'data-text',\n        this.spanElement.nativeElement.textContent\n      );\n    }\n  }\n}\n","@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { TableSortableComponent } from './sortable/sortable.component';\n\n/**\n * @deprecated 'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.\n * Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.\n */\n@NgModule({\n  imports: [TableSortableComponent],\n  exports: [TableSortableComponent],\n})\nexport class DataTableModule {\n  constructor() {\n    console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.\nPlease import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);\n  }\n}\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-data-table.mjs","sources":["../../data-table/src/sortable/sortable.component.ts","../../data-table/src/sortable/sortable.component.html","../../data-table/src/data-table.module.ts","../../data-table/src/kirbydesign-designsystem-data-table.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'th[sortable]',\n  templateUrl: './sortable.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, IconComponent],\n})\nexport class TableSortableComponent implements AfterViewInit {\n  constructor(private renderer: Renderer2) {}\n\n  @HostBinding('class.sortable')\n  @Input()\n  sortable = false;\n\n  @Input() active = false;\n\n  @Input() sortDirection: 'asc' | 'desc' = 'asc';\n  @Input() iconAlignment: 'start' | 'end' = 'end';\n  @Input() alignment: 'start' | 'center' | 'end' = 'start';\n\n  @HostBinding('class.active')\n  get isActive() {\n    return this.sortable && this.active;\n  }\n\n  _getAlignmentClasses() {\n    const alignmentClasses: string[] = [];\n\n    if (this.iconAlignment === 'start') {\n      alignmentClasses.push('row-reverse');\n    }\n\n    alignmentClasses.push(`align-${this.alignment}`);\n\n    return alignmentClasses;\n  }\n\n  @ViewChild('span') spanElement: ElementRef;\n\n  ngAfterViewInit(): void {\n    if (this.spanElement) {\n      this.renderer.setAttribute(\n        this.spanElement.nativeElement,\n        'data-text',\n        this.spanElement.nativeElement.textContent\n      );\n    }\n  }\n}\n","@if (!sortable) {\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon\n      class=\"sortable-icon\"\n      [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n    ></kirby-icon>\n  </button>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { TableSortableComponent } from './sortable/sortable.component';\n\n/**\n * @deprecated 'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.\n * Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.\n */\n@NgModule({\n  imports: [TableSortableComponent],\n  exports: [TableSortableComponent],\n})\nexport class DataTableModule {\n  constructor() {\n    console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.\nPlease import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);\n  }\n}\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-divider.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class DividerComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}hr.no-margin{margin-top:0;margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
+            args: [{ selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-spacing-xxs);border:0;border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
         }], propDecorators: { hasMargin: [{
                 type: Input
             }] } });

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["../../divider/src/divider.component.ts","../../divider/src/divider.component.html","../../divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'kirby-divider',\n  templateUrl: './divider.component.html',\n  styleUrls: ['./divider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerComponent {\n  @Input()\n  hasMargin: boolean;\n}\n","<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAQa,gBAAgB,CAAA;iIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,6GCR7B,iEACA,EAAA,MAAA,EAAA,CAAA,0MAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDOa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iEAAA,EAAA,MAAA,EAAA,CAAA,0MAAA,CAAA,EAAA;;sBAG9C;;;AETH;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["../../divider/src/divider.component.ts","../../divider/src/divider.component.html","../../divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'kirby-divider',\n  templateUrl: './divider.component.html',\n  styleUrls: ['./divider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerComponent {\n  @Input()\n  hasMargin: boolean;\n}\n","<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAQa,gBAAgB,CAAA;kIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,6GCR7B,iEACA,EAAA,MAAA,EAAA,CAAA,mNAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDOa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iEAAA,EAAA,MAAA,EAAA,CAAA,mNAAA,CAAA,EAAA;;sBAG9C;;;AETH;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-dropdown.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, RendererStyleFlags2, ElementRef, TemplateRef, forwardRef, HostListener, ContentChildren, ViewChildren, ViewChild, ContentChild, HostBinding, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, RendererStyleFlags2, ElementRef, TemplateRef, forwardRef, HostListener, ContentChildren, ViewChildren, ViewChild, ContentChild, HostBinding, Output, Input, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CardComponent, CardModule } from '@kirbydesign/designsystem/card';
 import { UniqueIdGenerator, StringSearchHelper } from '@kirbydesign/designsystem/helpers';
@@ -58,10 +58,10 @@ class KeyboardHandlerService {
         }
         return newIndex;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KeyboardHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KeyboardHandlerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -562,17 +562,17 @@ class DropdownComponent {
         this.unlistenAllSlottedItems();
         this.resizeObserverService.unobserve(this.elementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }, { token: i2.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownComponent, isStandalone: true, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", focusedIndex: "focusedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { hasErrorChange: "hasErrorChange", change: "change" }, host: { listeners: { "keydown.tab": "_onTab()", "keydown.shift.tab": "_onTab()", "keydown": "_onKeydown($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focusout": "_onFocusOut()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "keydown.space": "_onEnterOrSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.clicked": "this.clicked" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }, { token: i2.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DropdownComponent, isStandalone: true, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", focusedIndex: "focusedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { hasErrorChange: "hasErrorChange", change: "change" }, host: { listeners: { "keydown.tab": "_onTab()", "keydown.shift.tab": "_onTab()", "keydown": "_onKeydown($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focusout": "_onFocusOut()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "keydown.space": "_onEnterOrSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.clicked": "this.clicked" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => DropdownComponent)),
                 multi: true,
             },
             { provide: FORM_FIELD_CONTROL, useExisting: forwardRef((() => DropdownComponent)) },
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host{display:inline-block;position:relative;max-width:min(100vw - calc(2 * var(--kirby-spacing-s)),100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:var(--kirby-elevation-4)}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:var(--kirby-font-weight-bold);font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host{display:inline-block;position:relative;max-width:min(100vw - calc(2 * var(--kirby-spacing-s)),100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error:not(.is-open)>button,:host.ng-touched.ng-invalid:not(.is-open)>button{--kirby-button-border-color: var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host.error:not(.is-open)>button:focus-visible,:host.ng-touched.ng-invalid:not(.is-open)>button:focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset)}:host>button{position:relative;margin:0;width:100%;min-width:0}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:var(--kirby-elevation-4);border-color:var(--kirby-button-border-color)}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}:host-context(kirby-calendar)>button{font-weight:var(--kirby-font-weight-bold);font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-dropdown', providers: [
                         {
@@ -588,7 +588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         CardComponent,
                         ItemComponent,
                         IconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host{display:inline-block;position:relative;max-width:min(100vw - calc(2 * var(--kirby-spacing-s)),100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:var(--kirby-elevation-4)}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:var(--kirby-font-weight-bold);font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
+                    ], template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host{display:inline-block;position:relative;max-width:min(100vw - calc(2 * var(--kirby-spacing-s)),100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error:not(.is-open)>button,:host.ng-touched.ng-invalid:not(.is-open)>button{--kirby-button-border-color: var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host.error:not(.is-open)>button:focus-visible,:host.ng-touched.ng-invalid:not(.is-open)>button:focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset)}:host>button{position:relative;margin:0;width:100%;min-width:0}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:var(--kirby-elevation-4);border-color:var(--kirby-button-border-color)}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}:host-context(kirby-calendar)>button{font-weight:var(--kirby-font-weight-bold);font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }, { type: i2.ResizeObserverService }], propDecorators: { items: [{
                 type: Input
             }], selectedIndex: [{
@@ -712,8 +712,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }] } });
 
 class DropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: DropdownModule, imports: [CardModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, imports: [CardModule,
             IconModule,
             ItemModule,
             PopoverComponent,
@@ -721,7 +721,7 @@ class DropdownModule {
             CommonModule,
             ListModule,
             DropdownComponent], exports: [DropdownComponent, ListItemTemplateDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
             IconModule,
             ItemModule,
             PopoverComponent,
@@ -730,7 +730,7 @@ class DropdownModule {
             ListModule,
             DropdownComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [