npm - @kirbydesign/designsystem - Versions diffs - 9.5.0 → 9.7.0 - Mend

@kirbydesign/designsystem 9.5.0 → 9.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (560) hide show

package/fesm2022/kirbydesign-designsystem-checkbox.mjs CHANGED Viewed

@@ -17,7 +17,8 @@ class CheckboxComponent {
     get isAttentionLevel2() {
         return this.attentionLevel === '2';
     }
-    constructor(ionicElementPartHelper) {
+    constructor(element, ionicElementPartHelper) {
+        this.element = element;
         this.ionicElementPartHelper = ionicElementPartHelper;
         this.checked = false;
         this.attentionLevel = '2';
@@ -25,12 +26,21 @@ class CheckboxComponent {
         this.hasError = false;
         this.disabled = false;
         this.checkedChange = new EventEmitter();
+        this._justify = 'start';
+        this._labelPlacement = 'end';
         // Initialize default ControlValueAccessor callback functions (noop)
         // eslint-disable-next-line no-empty-function
         this._onChange = () => { };
         // eslint-disable-next-line no-empty-function
         this._onTouched = () => { };
     }
+    ngOnInit() {
+        const slot = this.element.nativeElement.getAttribute('slot');
+        if (slot === 'end') {
+            this._justify = 'space-between';
+            this._labelPlacement = 'start';
+        }
+    }
     ngAfterViewInit() {
         this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');
         this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionCheckboxElement, '.label-text-wrapper');
@@ -82,17 +92,17 @@ class CheckboxComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", 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" } }, 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  (ionChange)=\"onChecked($event.detail.checked)\"\n  labelPlacement=\"end\"\n  (ionBlur)=\"onBlur()\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}: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: #2dc172;--border-color-checked: #2dc172}}: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: #29ae67;--border-color-checked: #29ae67}: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: #5c5c5c;--border-color-checked: #5c5c5c}}: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: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}: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-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-block:4px}:host.has-label.sm ion-checkbox::part(label){padding-block:10px}:host.has-label.md ion-checkbox::part(label){padding-block:16px}:host.has-label.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.has-label.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.has-label.xs ion-checkbox::part(container){padding:2px}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "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  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n  <ng-content></ng-content>\n</ion-checkbox>\n", styles: [":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-semi-light)}: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:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@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::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}: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 ion-checkbox span{white-space:pre-line}:host :host-context(kirby-item){z-index:1}: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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         IonicElementPartHelper,
@@ -101,8 +111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                             useExisting: forwardRef((() => CheckboxComponent)),
                             multi: true,
                         },
-                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  labelPlacement=\"end\"\n  (ionBlur)=\"onBlur()\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}: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: #2dc172;--border-color-checked: #2dc172}}: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: #29ae67;--border-color-checked: #29ae67}: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: #5c5c5c;--border-color-checked: #5c5c5c}}: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: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}: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-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-block:4px}:host.has-label.sm ion-checkbox::part(label){padding-block:10px}:host.has-label.md ion-checkbox::part(label){padding-block:16px}:host.has-label.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.has-label.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.has-label.xs ion-checkbox::part(container){padding:2px}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.IonicElementPartHelper }], propDecorators: { ionCheckboxElement: [{
+                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n  <ng-content></ng-content>\n</ion-checkbox>\n", styles: [":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-semi-light)}: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:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@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::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}: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 ion-checkbox span{white-space:pre-line}:host :host-context(kirby-item){z-index:1}: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 }], propDecorators: { ionCheckboxElement: [{
                 type: ViewChild,
                 args: [IonCheckbox, { read: ElementRef, static: true }]
             }], checked: [{
@@ -110,9 +120,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }], attentionLevel: [{
                 type: Input
             }], text: [{
-                type: HostBinding,
-                args: ['class.has-label']
-            }, {
                 type: Input
             }], size: [{
                 type: HostBinding,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["~~../../../../libs/designsystem/~~checkbox/src/checkbox.component.ts","~~../../../../libs/designsystem/~~checkbox/src/checkbox.component.html","~~../../../../libs/designsystem/~~checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\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';\n\n@Component({\n standalone: true,\n imports: [CommonModule, 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 implements AfterViewInit, ControlValueAccessor {\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() attentionLevel: '1' \| '2' = '2';\n\n @~~HostBinding('class.has-label')\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 @Output() checkedChange = new EventEmitter<boolean>();\n\n constructor(private ionicElementPartHelper: IonicElementPartHelper) {}\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 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 }\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 }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n labelPlacement=\"~~end~~\"\n ~~(ionBlur)~~=\"~~onBlur()~~\"\n>\n <span ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;;~~MAkCa~~,iBAAiB,CAAA;~~AAoB5B~~,IAAA,IACI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC;KAC1C;AAED,IAAA,IAA2C,iBAAiB,GAAA;AAC1D,QAAA,OAAO,IAAI,CAAC,cAAc,KAAK,GAAG,CAAC;KACpC;AACD,IAAA,IAA2C,iBAAiB,GAAA;AAC1D,QAAA,OAAO,IAAI,CAAC,cAAc,KAAK,GAAG,CAAC;KACpC;~~AAID~~,~~IAAA~~,~~WAAA~~,~~CAAoB~~,sBAA8C,EAAA;~~QAA9C~~,IAAsB,CAAA,sBAAA,GAAtB,sBAAsB,CAAwB;~~QA9BzD~~,IAAO,CAAA,OAAA,GAAY,KAAK,CAAC;QACzB,IAAc,CAAA,cAAA,GAAc,GAAG,CAAC;~~QAQzC~~,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;QAIhC,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAEjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAahB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;;;~~AA8B9C~~,QAAA,IAAA,CAAA,SAAS,GAA6B,MAAK,GAAG,CAAC;;AAE/C,QAAA,IAAA,CAAA,UAAU,GAAG,MAAK,GAAG,CAAC;~~KA9BwC~~;~~IAEtE~~,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;AAC3F,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CACjC,oBAAoB,EACpB,IAAI,CAAC,kBAAkB,EACvB,qBAAqB,CACtB,CAAC;AACF,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CACjC,gBAAgB,EAChB,IAAI,CAAC,kBAAkB,EACvB,iBAAiB,CAClB,CAAC;KACH;AAED,IAAA,SAAS,CAAC,OAAgB,EAAA;AACxB,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;AACvB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,MAAM,GAAA;QACJ,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;AAQD;;;;;AAKG;AACH,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACrB;AAED;;;;;;AAMG;AACH,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;KACtB;AAED;;;;;AAKG;AACH,IAAA,gBAAgB,CAAE,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;KAC5B;~~iIA1GU~~,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,iBAAiB,EATjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,~~iBAAA,EAAA,WAAA,EAAA,~~OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;YACT,sBAAsB;AACtB,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,EAAC,MAAM,iBAAiB,EAAC;AAChD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAGU,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,WAAW,2BAAU,UAAU,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECnC5C~~,~~0PAUA~~,~~EDUY,~~MAAA,EAAA,CAAA,~~03GAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,mIAAE,WAAW,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,~~QAAA,EAAA,~~MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAcxB~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAhB7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,WAAW,CAAC,EAC1B,QAAA,EAAA,gBAAgB,EAGT,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;wBACT,sBAAsB;AACtB,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,EAAC,uBAAuB,EAAC;AAChD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,~~0PAAA,~~EAAA,MAAA,EAAA,CAAA,~~03GAAA~~,CAAA,EAAA,CAAA;~~2FAIO~~,kBAAkB,EAAA,CAAA;sBADzB,SAAS;uBAAC,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAGjD,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;~~gBAIN~~,IAAI,EAAA,CAAA;~~sBAFH~~,~~WAAW;uBAAC,iBAAiB,CAAA;;sBAC7B,~~KAAK;gBAKN,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO,CAAA;;sBACnB,KAAK;gBAKN,QAAQ,EAAA,CAAA;sBAFP,WAAW;uBAAC,aAAa,CAAA;;sBACzB,KAAK;gBAGG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEF,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,eAAe,CAAA;gBAKe,iBAAiB,EAAA,CAAA;sBAA3D,WAAW;uBAAC,wBAAwB,CAAA;gBAGM,iBAAiB,EAAA,CAAA;sBAA3D,WAAW;uBAAC,wBAAwB,CAAA;gBAI3B,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;AElET;;AAEG;;;;"}
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 { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\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';\n\n@Component({\n standalone: true,\n imports: [CommonModule, 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 implements AfterViewInit, ControlValueAccessor, OnInit {\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: 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 @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' \| 'end' \| 'space-between' = 'start';\n _labelPlacement: 'end' \| 'fixed' \| 'stacked' \| 'start' = 'end';\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper\n ) {}\n\n ngOnInit(): void {\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end') {\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 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 }\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 }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n <span ngIf=\"text\">{{ text }}</span>\n <ng-content></ng-content>\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-data-table.mjs CHANGED Viewed

@@ -26,12 +26,12 @@ class TableRowComponent {
         TableRowComponent.hasWarnedAboutSelectableDeprecation = true;
         console.warn(KIRBY_TABLE_ROW_SELECTABLE_DEPRECATION_WARNING);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: TableRowComponent, selector: "tr[kirby-tr]", inputs: { selectable: "selectable" }, host: { properties: { "class.kirby-selectable-row": "this.isSelectable" } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableRowComponent, selector: "tr[kirby-tr]", inputs: { selectable: "selectable" }, host: { properties: { "class.kirby-selectable-row": "this.isSelectable" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -62,12 +62,12 @@ class TableComponent {
         this._fixedLayout = fixed;
         console.warn(KIRBY_TABLE_LAYOUT_FIXED_DEPRECATION_WARNING);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: TableComponent, selector: "table[kirby-table]", inputs: { fixedLayout: "fixedLayout" }, host: { properties: { "class.kirby-table-layout-fixed": "this.hasFixedLayout" } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "table[kirby-table]", inputs: { fixedLayout: "fixedLayout" }, host: { properties: { "class.kirby-table-layout-fixed": "this.hasFixedLayout" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, styles: ["table[kirby-table]{width:100%;border-collapse:collapse}table[kirby-table].kirby-table-layout-fixed{table-layout:fixed}table[kirby-table] tr:not(:last-child){border-bottom:1px solid var(--kirby-medium)}table[kirby-table] thead tr{border-bottom:1px solid var(--kirby-medium)}table[kirby-table] th{text-align:left;font-weight:400;font-size:12px;color:var(--kirby-text-color-semi-dark);padding:8px 16px}table[kirby-table] td{height:44px;padding:4px 16px;font-weight:400;font-size:14px;color:var(--kirby-text-color-black);vertical-align:middle}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table[kirby-table]', template: `
     <ng-content></ng-content>
@@ -104,10 +104,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: "17.3.9", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: TableSortableComponent, 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: "<ng-container *ngIf=\"!sortable; else sortableTemplate\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableSortableComponent, 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: "<ng-container *ngIf=\"!sortable; else sortableTemplate\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TableSortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableSortableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!sortable; else sortableTemplate\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n  <button [ngClass]=\"_getAlignmentClasses()\">\n    <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { sortable: [{
@@ -132,11 +132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }] } });
 class DataTableModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: DataTableModule, declarations: [TableComponent, TableRowComponent, TableSortableComponent], imports: [CommonModule, IconModule], exports: [TableComponent, TableRowComponent, TableSortableComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DataTableModule, imports: [CommonModule, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DataTableModule, declarations: [TableComponent, TableRowComponent, TableSortableComponent], imports: [CommonModule, IconModule], exports: [TableComponent, TableRowComponent, TableSortableComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableModule, imports: [CommonModule, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TableComponent, TableRowComponent, TableSortableComponent],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-data-table.mjs","sources":["../../../../libs/designsystem/data-table/src/table-row/table-row.component.ts","../../../../libs/designsystem/data-table/src/table/table.component.ts","../../../../libs/designsystem/data-table/src/sortable/sortable.component.ts","../../../../libs/designsystem/data-table/src/sortable/sortable.component.html","../../../../libs/designsystem/data-table/src/data-table.module.ts","../../../../libs/designsystem/data-table/src/kirbydesign-designsystem-data-table.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\n\nconst KIRBY_TABLE_ROW_DEPRECATION_WARNING =\n 'Deprecation warning: The support for \"kirby-tr\" as a directive will be removed in the next major version. We recommend to use the global CSS class \"kirby-table\" on your HTML table tag, which will automatically style table rows.';\n\nconst KIRBY_TABLE_ROW_SELECTABLE_DEPRECATION_WARNING =\n 'Deprecation warning: The \"kirby-tr\" support for using the input property \"selectable\" will be removed in the next major release. We recommend to use the global CSS class \"kirby-selectable-row\".';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'tr[kirby-tr]',\n template: `\n <ng-content></ng-content>\n `,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TableRowComponent {\n static hasWarnedAboutTableRowDeprecation: boolean = false;\n static hasWarnedAboutSelectableDeprecation: boolean = false;\n\n constructor() {\n if (TableRowComponent.hasWarnedAboutTableRowDeprecation) return;\n TableRowComponent.hasWarnedAboutTableRowDeprecation = true;\n console.warn(KIRBY_TABLE_ROW_DEPRECATION_WARNING);\n }\n\n private _selectable?: boolean;\n\n @HostBinding('class.kirby-selectable-row')\n get isSelectable(): boolean {\n return this._selectable;\n }\n\n @Input() set selectable(selectable: boolean) {\n this._selectable = selectable;\n\n if (TableRowComponent.hasWarnedAboutSelectableDeprecation) return;\n TableRowComponent.hasWarnedAboutSelectableDeprecation = true;\n console.warn(KIRBY_TABLE_ROW_SELECTABLE_DEPRECATION_WARNING);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\n\nconst KIRBY_TABLE_DEPRECATION_WARNING =\n 'Deprecation warning: The support for \"kirby-table\" as a directive will be removed in the next major version. We recommend to use the global CSS class \"kirby-table\".';\n\nconst KIRBY_TABLE_LAYOUT_FIXED_DEPRECATION_WARNING =\n 'Deprecation warning: The \"kirby-table\" support for using the input property \"fixedLayout\" will be removed in the next major version. We recommend to use the global CSS class \"layout-fixed\" in combination with the \"kirby-table\" class';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'table[kirby-table]',\n template: `\n <ng-content></ng-content>\n `,\n styleUrls: ['./table.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TableComponent {\n constructor() {\n console.warn(KIRBY_TABLE_DEPRECATION_WARNING);\n }\n\n private _fixedLayout?: boolean;\n\n @HostBinding('class.kirby-table-layout-fixed')\n get hasFixedLayout(): boolean {\n return this._fixedLayout;\n }\n\n @Input() set fixedLayout(fixed: boolean) {\n this._fixedLayout = fixed;\n console.warn(KIRBY_TABLE_LAYOUT_FIXED_DEPRECATION_WARNING);\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n Renderer2,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\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})\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","<ng-container ngIf=\"!sortable; else sortableTemplate\">\n <ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { TableRowComponent } from './table-row/table-row.component';\nimport { TableComponent } from './table/table.component';\nimport { TableSortableComponent } from './sortable/sortable.component';\n\n@NgModule({\n declarations: [TableComponent, TableRowComponent, TableSortableComponent],\n imports: [CommonModule, IconModule],\n exports: [TableComponent, TableRowComponent, TableSortableComponent],\n})\nexport class DataTableModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-data-table.mjs","sources":["../../data-table/src/table-row/table-row.component.ts","../../data-table/src/table/table.component.ts","../../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 {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\n\nconst KIRBY_TABLE_ROW_DEPRECATION_WARNING =\n 'Deprecation warning: The support for \"kirby-tr\" as a directive will be removed in the next major version. We recommend to use the global CSS class \"kirby-table\" on your HTML table tag, which will automatically style table rows.';\n\nconst KIRBY_TABLE_ROW_SELECTABLE_DEPRECATION_WARNING =\n 'Deprecation warning: The \"kirby-tr\" support for using the input property \"selectable\" will be removed in the next major release. We recommend to use the global CSS class \"kirby-selectable-row\".';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'tr[kirby-tr]',\n template: `\n <ng-content></ng-content>\n `,\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TableRowComponent {\n static hasWarnedAboutTableRowDeprecation: boolean = false;\n static hasWarnedAboutSelectableDeprecation: boolean = false;\n\n constructor() {\n if (TableRowComponent.hasWarnedAboutTableRowDeprecation) return;\n TableRowComponent.hasWarnedAboutTableRowDeprecation = true;\n console.warn(KIRBY_TABLE_ROW_DEPRECATION_WARNING);\n }\n\n private _selectable?: boolean;\n\n @HostBinding('class.kirby-selectable-row')\n get isSelectable(): boolean {\n return this._selectable;\n }\n\n @Input() set selectable(selectable: boolean) {\n this._selectable = selectable;\n\n if (TableRowComponent.hasWarnedAboutSelectableDeprecation) return;\n TableRowComponent.hasWarnedAboutSelectableDeprecation = true;\n console.warn(KIRBY_TABLE_ROW_SELECTABLE_DEPRECATION_WARNING);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\n\nconst KIRBY_TABLE_DEPRECATION_WARNING =\n 'Deprecation warning: The support for \"kirby-table\" as a directive will be removed in the next major version. We recommend to use the global CSS class \"kirby-table\".';\n\nconst KIRBY_TABLE_LAYOUT_FIXED_DEPRECATION_WARNING =\n 'Deprecation warning: The \"kirby-table\" support for using the input property \"fixedLayout\" will be removed in the next major version. We recommend to use the global CSS class \"layout-fixed\" in combination with the \"kirby-table\" class';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'table[kirby-table]',\n template: `\n <ng-content></ng-content>\n `,\n styleUrls: ['./table.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TableComponent {\n constructor() {\n console.warn(KIRBY_TABLE_DEPRECATION_WARNING);\n }\n\n private _fixedLayout?: boolean;\n\n @HostBinding('class.kirby-table-layout-fixed')\n get hasFixedLayout(): boolean {\n return this._fixedLayout;\n }\n\n @Input() set fixedLayout(fixed: boolean) {\n this._fixedLayout = fixed;\n console.warn(KIRBY_TABLE_LAYOUT_FIXED_DEPRECATION_WARNING);\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n Renderer2,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\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})\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","<ng-container ngIf=\"!sortable; else sortableTemplate\">\n <ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { TableRowComponent } from './table-row/table-row.component';\nimport { TableComponent } from './table/table.component';\nimport { TableSortableComponent } from './sortable/sortable.component';\n\n@NgModule({\n declarations: [TableComponent, TableRowComponent, TableSortableComponent],\n imports: [CommonModule, IconModule],\n exports: [TableComponent, TableRowComponent, TableSortableComponent],\n})\nexport class DataTableModule {}\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 CHANGED Viewed

@@ -3,10 +3,10 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 class DividerComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
         }], propDecorators: { hasMargin: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["~~../../../../libs/designsystem/~~divider/src/divider.component.ts","~~../../../../libs/designsystem/~~divider/src/divider.component.html","~~../../../../libs/designsystem/~~divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\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 [class.no-margin]=\"!hasMargin\" />\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAWa,gBAAgB,CAAA;~~iIAAhB~~,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;~~qHAAhB~~,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX7B,2CACA,EAAA,MAAA,EAAA,CAAA,gKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAMX~~,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,YACb,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,gKAAA,CAAA,EAAA,CAAA;8BAI/C,SAAS,EAAA,CAAA;sBADR,KAAK;;;AEZR;;AAEG;;;;"}
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 { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\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 [class.no-margin]=\"!hasMargin\" />\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAWa,gBAAgB,CAAA;kIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;sHAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX7B,2CACA,EAAA,MAAA,EAAA,CAAA,gKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAMX,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,YACb,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,gKAAA,CAAA,EAAA,CAAA;8BAI/C,SAAS,EAAA,CAAA;sBADR,KAAK;;;AEZR;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-dropdown.mjs CHANGED Viewed

@@ -68,10 +68,10 @@ class KeyboardHandlerService {
         }
         return newIndex;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: KeyboardHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardHandlerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -519,16 +519,16 @@ class DropdownComponent {
             this.intersectionObserverRef.disconnect();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", 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: "14.0.0", version: "17.3.9", type: DropdownComponent, 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: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "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", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "14.0.0", version: "17.3.12", type: DropdownComponent, 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: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "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", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => DropdownComponent)),
                 multi: true,
             },
-        ], 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  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick()\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; 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    </ng-container>\n  </kirby-card>\n</ng-template>\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    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@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).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i5.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: i6.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        ], 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  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick()\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; 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    </ng-container>\n  </kirby-card>\n</ng-template>\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    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@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).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat", "variant"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i5.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: i6.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-dropdown', providers: [
                         {
@@ -671,15 +671,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
 const declarations = [DropdownComponent];
 class DropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CardModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CardModule,
             IconModule,
             ItemModule,
             FormFieldModule,
             PopoverComponent,
             ButtonComponent,
             CommonModule], exports: [DropdownComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
             IconModule,
             ItemModule,
             FormFieldModule,
@@ -687,7 +687,7 @@ class DropdownModule {
             ButtonComponent,
             CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [