npm - @kirbydesign/designsystem - Versions diffs - 9.7.0 → 9.7.2-sb - Mend

@kirbydesign/designsystem 9.7.0 → 9.7.2-sb

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 (308) hide show

package/fesm2022/kirbydesign-designsystem-form-field.mjs CHANGED Viewed

@@ -18,10 +18,10 @@ class AffixDirective {
     constructor(el) {
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AffixDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -137,10 +137,10 @@ class DateInputDirective {
             ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
             : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker" }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker" }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DateInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -161,10 +161,10 @@ class FormFieldMessageComponent {
     constructor() {
         this.position = 'left';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, ngImport: i0, template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, ngImport: i0, template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field-message', template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"] }]
         }], propDecorators: { text: [{
@@ -195,10 +195,10 @@ class InputCounterComponent {
             this._inputChangeSubscription.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputCounterComponent, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: InputCounterComponent, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: InputCounterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-input-counter', template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n" }]
         }], propDecorators: { listenTo: [{
@@ -251,10 +251,10 @@ class InputComponent {
             this.kirbyChange.emit(changes.value.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker"] }], ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker"] }], ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], hostDirectives: [
                         {
@@ -334,10 +334,10 @@ class TextareaComponent {
             this.kirbyChange.emit(changes.value.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 768px){:host{resize:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 768px){:host{resize:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 768px){:host{resize:vertical}}\n"] }]
         }], propDecorators: { value: [{
@@ -481,10 +481,10 @@ class FormFieldComponent {
             this.resizeObserverService.unobserve(affix.el);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i3.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message !== undefined\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      <ng-container *ngIf=\"showDefaultCalendarIcon\">\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}.affix-container:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media (hover: hover){.affix-container:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}.affix-container:has(input[type=date]):active,.affix-container:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}.affix-container:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i3.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message !== undefined\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      <ng-container *ngIf=\"showDefaultCalendarIcon\">\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}.affix-container:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media (hover: hover){.affix-container:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}.affix-container:has(input[type=date]):active,.affix-container:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}.affix-container:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message !== undefined\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      <ng-container *ngIf=\"showDefaultCalendarIcon\">\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}.affix-container:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media (hover: hover){.affix-container:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}.affix-container:has(input[type=date]):active,.affix-container:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}.affix-container:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PlatformService }, { type: i0.Renderer2 }, { type: i2.WindowRef }, { type: i3.ResizeObserverService }], propDecorators: { label: [{
@@ -598,8 +598,8 @@ class DecimalMaskDirective {
         maxlengthValue = -Math.abs(maxlengthValue);
         return this.min === undefined ? maxlengthValue : -Math.abs(Math.max(this.min, maxlengthValue));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -607,7 +607,7 @@ class DecimalMaskDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DecimalMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DecimalMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -644,11 +644,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 const declarations = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
 class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective, IconModule], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective, IconModule], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DecimalMaskDirective, IconModule],

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

@@ -11,40 +11,40 @@ import * as i2 from '@kirbydesign/designsystem/shared';
 import { FitHeadingDirective } from '@kirbydesign/designsystem/shared';
 class HeaderActionsDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderActionsDirective, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderActionsDirective, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderActions]',
                 }]
         }] });
 class HeaderCustomSectionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderCustomSectionDirective, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderCustomSectionDirective, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderCustomSection]',
                 }]
         }] });
 class HeaderTitleActionIconDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderTitleActionIconDirective, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderTitleActionIconDirective, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderTitleActionIcon]',
                 }]
         }] });
 class HeaderCustomFlagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderCustomFlagDirective, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderCustomFlagDirective, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderCustomFlag]',
@@ -99,10 +99,10 @@ class HeaderComponent {
             this.title$.next(changes.title.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2", hasInteractiveTitle: "hasInteractiveTitle" }, outputs: { titleClick: "titleClick" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "progressCircle", first: true, predicate: ProgressCircleComponent, descendants: true }, { propertyName: "flag", first: true, predicate: FlagComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: HeaderActionsDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customSectionTemplate", first: true, predicate: HeaderCustomSectionDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customFlagTemplate", first: true, predicate: HeaderCustomFlagDirective, descendants: true, read: (TemplateRef) }, { propertyName: "titleActionIconTemplate", first: true, predicate: HeaderTitleActionIconDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", first: true, predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value - value: -->\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <ng-container\n        *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n      ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (max-width: 767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>h1.title{margin-bottom:0}@media (min-width: 768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>h1.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2", hasInteractiveTitle: "hasInteractiveTitle" }, outputs: { titleClick: "titleClick" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "progressCircle", first: true, predicate: ProgressCircleComponent, descendants: true }, { propertyName: "flag", first: true, predicate: FlagComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: HeaderActionsDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customSectionTemplate", first: true, predicate: HeaderCustomSectionDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customFlagTemplate", first: true, predicate: HeaderCustomFlagDirective, descendants: true, read: (TemplateRef) }, { propertyName: "titleActionIconTemplate", first: true, predicate: HeaderTitleActionIconDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", first: true, predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value - value: -->\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <ng-container\n        *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n      ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (max-width: 767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>h1.title{margin-bottom:0}@media (min-width: 768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>h1.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value - value: -->\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <ng-container\n        *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n      ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (max-width: 767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>h1.title{margin-bottom:0}@media (min-width: 768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>h1.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { centered: [{
@@ -167,8 +167,8 @@ const declarations = [
     HeaderCustomFlagDirective,
 ];
 class HeaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent,
             HeaderActionsDirective,
             HeaderCustomSectionDirective,
             HeaderTitleActionIconDirective,
@@ -177,9 +177,9 @@ class HeaderModule {
             HeaderCustomSectionDirective,
             HeaderTitleActionIconDirective,
             HeaderCustomFlagDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: declarations,

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

@@ -41,10 +41,10 @@ class PlatformService {
         const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`;
         return this.windowRef.nativeWindow.matchMedia(query).matches;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlatformService, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlatformService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PlatformService, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PlatformService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlatformService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PlatformService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -192,10 +192,10 @@ class LineClampHelper {
         this.renderer.removeStyle(element, config.lineClamp);
         this.renderer.removeStyle(element, config.lineHeight);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineClampHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineClampHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LineClampHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LineClampHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineClampHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LineClampHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Renderer2 }] });
@@ -228,10 +228,10 @@ class IonicElementPartHelper {
             return;
         this.renderer.setAttribute(partElement, 'part', partName);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonicElementPartHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonicElementPartHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IonicElementPartHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IonicElementPartHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonicElementPartHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IonicElementPartHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Renderer2 }] });

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

@@ -119,6 +119,13 @@ const kirbyIconSettings = {
         { name: 'common', svg: 'assets/kirby/icons/svg/common.svg' },
         { name: 'calendar-start', svg: 'assets/kirby/icons/svg/calendar-start.svg' },
         { name: 'calendar-end', svg: 'assets/kirby/icons/svg/calendar-end.svg' },
+        { name: 'expand', svg: 'assets/kirby/icons/svg/expand.svg' },
+        { name: 'contract', svg: 'assets/kirby/icons/svg/contract.svg' },
+        { name: 'house', svg: 'assets/kirby/icons/svg/house.svg' },
+        { name: 'tractor', svg: 'assets/kirby/icons/svg/tractor.svg' },
+        { name: 'flower', svg: 'assets/kirby/icons/svg/flower.svg' },
+        { name: 'basket', svg: 'assets/kirby/icons/svg/basket.svg' },
+        { name: 'drag-drop', svg: 'assets/kirby/icons/svg/drag-drop.svg' },
     ],
 };
 const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
@@ -155,10 +162,10 @@ class IconRegistryService {
         const svg = this.iconRegistry.get(name);
         return svg ? { name, svg } : undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -226,10 +233,10 @@ class IconComponent {
             this.icon = this.iconRegistryService.getIcon(changes.customName.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconComponent, selector: "kirby-icon", inputs: { size: "size", name: "name", customName: "customName" }, host: { properties: { "class.kirby-icon": "true", "class": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, 24px);margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: 16px}:host(.sm){--kirby-icon-font-size: 24px}:host(.md){--kirby-icon-font-size: 32px}:host(.lg){--kirby-icon-font-size: 56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}:host-context(ion-tab-button){pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: IconComponent, selector: "kirby-icon", inputs: { size: "size", name: "name", customName: "customName" }, host: { properties: { "class.kirby-icon": "true", "class": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, 24px);margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: 16px}:host(.sm){--kirby-icon-font-size: 24px}:host(.md){--kirby-icon-font-size: 32px}:host(.lg){--kirby-icon-font-size: 56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}:host-context(ion-tab-button){pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-icon', host: { '[class.kirby-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, 24px);margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: 16px}:host(.sm){--kirby-icon-font-size: 24px}:host(.md){--kirby-icon-font-size: 32px}:host(.lg){--kirby-icon-font-size: 56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}:host-context(ion-tab-button){pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: IconRegistryService }], propDecorators: { size: [{
@@ -244,11 +251,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 class IconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [ThemeColorDirective, IonIcon], exports: [IconComponent, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, imports: [IonIcon] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [ThemeColorDirective, IonIcon], exports: [IconComponent, ThemeColorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconModule, imports: [IonIcon] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ThemeColorDirective, IonIcon],