npm - @kirbydesign/designsystem - Versions diffs - 11.11.2-dev-85b2964 → 11.11.3 - Mend

@kirbydesign/designsystem 11.11.2-dev-85b2964 → 11.11.3

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

package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-empty-state.mjs","sources":["../../empty-state/src/empty-state.component.ts","../../empty-state/src/empty-state.component.html","../../empty-state/src/empty-state.module.ts","../../empty-state/src/kirbydesign-designsystem-empty-state.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n OnInit,\n QueryList,\n Renderer2,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { getIonModalDialogAncestor } from '@kirbydesign/designsystem/helpers';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n selector: 'kirby-empty-state',\n templateUrl: './empty-state.component.html',\n styleUrls: ['./empty-state.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IconComponent],\n})\nexport class EmptyStateComponent implements AfterContentInit, OnInit {\n private _title: string;\n private ionModalDialog: HTMLElement;\n\n @Input() iconName: string;\n\n @Input() set title(value: string) {\n this._title = value;\n\n if (this.ionModalDialog) {\n this.renderer.setAttribute(this.ionModalDialog, 'aria-label', value);\n }\n }\n\n get title(): string {\n return this._title;\n }\n _insideModal: boolean = false;\n\n @Input() subtitle: string;\n\n @ContentChildren(ButtonComponent)\n private slottedButtons: QueryList<ButtonComponent>;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngOnInit(): void {\n /* If initialized inside a modal we want to set\n * the aria-label attribute on ion-modal to the title of empty state.\n * Further updates are handled by title setter.\n /\n this.ionModalDialog = getIonModalDialogAncestor(this.elementRef.nativeElement);\n if (this.ionModalDialog) {\n this._insideModal = true;\n this.renderer.setAttribute(this.ionModalDialog, 'aria-label', this.title);\n }\n }\n\n ngAfterContentInit() {\n this.enforceAttentionLevelRules();\n\n / setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention\n levels of slotted buttons in this.enforceAttentionLevelRules /\n this.slottedButtons.changes.subscribe(() => {\n setTimeout(() => this.enforceAttentionLevelRules());\n });\n }\n\n /* Enforces that all slotted buttons will have their attention\n * level set to 3, except the first button if it has\n * level 1.\n /\n private enforceAttentionLevelRules() {\n this.slottedButtons.forEach((button, index) => {\n if (index === 0 && (button.attentionLevel === undefined \|\| button.attentionLevel === '1')) {\n return;\n }\n\n if (button.attentionLevel !== '3') {\n button.attentionLevel = '3';\n }\n });\n }\n}\n","<div class=\"message-container\">\n @if (iconName) {\n <div class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n </div>\n }\n @if (title) {\n @if (_insideModal) {\n <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n } @else {\n <span class=\"title kirby-text-medium\">{{ title }}</span>\n }\n }\n @if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n }\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { EmptyStateComponent } from './empty-state.component';\n\n@NgModule({\n imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent],\n exports: [EmptyStateComponent, ThemeColorDirective],\n})\nexport class EmptyStateModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;MAsBa,mBAAmB,CAAA;IAM9B,IAAa,KAAK,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AAEnB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,EAAE,KAAK,CAAC;QACtE;IACF;AAEA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;IAQA,WAAA,CACU,UAAmC,EACnC,QAAmB,EAAA;QADnB,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,QAAQ,GAAR,QAAQ;QATlB,IAAA,CAAA,YAAY,GAAY,KAAK;IAU1B;IAEH,QAAQ,GAAA;AACN;;;AAGG;QACH,IAAI,CAAC,cAAc,GAAG,yBAAyB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;AAC9E,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC;QAC3E;IACF;IAEA,kBAAkB,GAAA;QAChB,IAAI,CAAC,0BAA0B,EAAE;AAEjC;AAC+D;QAC/D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,MAAK;YACzC,UAAU,CAAC,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC;AACrD,QAAA,CAAC,CAAC;IACJ;AAEA;;;AAGG;IACK,0BAA0B,GAAA;QAChC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;AAC5C,YAAA,IAAI,KAAK,KAAK,CAAC,KAAK,MAAM,CAAC,cAAc,KAAK,SAAS,IAAI,MAAM,CAAC,cAAc,KAAK,GAAG,CAAC,EAAE;gBACzF;YACF;AAEA,YAAA,IAAI,MAAM,CAAC,cAAc,KAAK,GAAG,EAAE;AACjC,gBAAA,MAAM,CAAC,cAAc,GAAG,GAAG;YAC7B;AACF,QAAA,CAAC,CAAC;IACJ;~~iIAjEW~~,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,SAAA,EAqBb,eAAe,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3ClC,sgBAoBA,26CDAY,aAAa,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAEZ~~,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAGZ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,CAAC,EAAA,QAAA,EAAA,sgBAAA,EAAA,MAAA,EAAA,CAAA,m3CAAA,CAAA,EAAA;;sBAMvB;;sBAEA;;sBAaA;;sBAEA,eAAe;uBAAC,eAAe;;;MEjCrB,gBAAgB,CAAA;~~iIAAhB~~,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;~~kIAAhB~~,gBAAgB,EAAA,OAAA,EAAA,CAHjB,UAAU,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAA,EAAA,OAAA,EAAA,CAClE,mBAAmB,EAAE,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAEvC,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,OAAA,EAAA,CAHjB,UAAU,EAAE,YAAY,EAAuB,mBAAmB,CAAA,EAAA,CAAA,CAAA;;~~2FAGjE~~,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;AAC7E,oBAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;AACpD,iBAAA;;;ACTD;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-empty-state.mjs","sources":["../../empty-state/src/empty-state.component.ts","../../empty-state/src/empty-state.component.html","../../empty-state/src/empty-state.module.ts","../../empty-state/src/kirbydesign-designsystem-empty-state.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n OnInit,\n QueryList,\n Renderer2,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { getIonModalDialogAncestor } from '@kirbydesign/designsystem/helpers';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n selector: 'kirby-empty-state',\n templateUrl: './empty-state.component.html',\n styleUrls: ['./empty-state.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IconComponent],\n})\nexport class EmptyStateComponent implements AfterContentInit, OnInit {\n private _title: string;\n private ionModalDialog: HTMLElement;\n\n @Input() iconName: string;\n\n @Input() set title(value: string) {\n this._title = value;\n\n if (this.ionModalDialog) {\n this.renderer.setAttribute(this.ionModalDialog, 'aria-label', value);\n }\n }\n\n get title(): string {\n return this._title;\n }\n _insideModal: boolean = false;\n\n @Input() subtitle: string;\n\n @ContentChildren(ButtonComponent)\n private slottedButtons: QueryList<ButtonComponent>;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngOnInit(): void {\n /* If initialized inside a modal we want to set\n * the aria-label attribute on ion-modal to the title of empty state.\n * Further updates are handled by title setter.\n /\n this.ionModalDialog = getIonModalDialogAncestor(this.elementRef.nativeElement);\n if (this.ionModalDialog) {\n this._insideModal = true;\n this.renderer.setAttribute(this.ionModalDialog, 'aria-label', this.title);\n }\n }\n\n ngAfterContentInit() {\n this.enforceAttentionLevelRules();\n\n / setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention\n levels of slotted buttons in this.enforceAttentionLevelRules /\n this.slottedButtons.changes.subscribe(() => {\n setTimeout(() => this.enforceAttentionLevelRules());\n });\n }\n\n /* Enforces that all slotted buttons will have their attention\n * level set to 3, except the first button if it has\n * level 1.\n /\n private enforceAttentionLevelRules() {\n this.slottedButtons.forEach((button, index) => {\n if (index === 0 && (button.attentionLevel === undefined \|\| button.attentionLevel === '1')) {\n return;\n }\n\n if (button.attentionLevel !== '3') {\n button.attentionLevel = '3';\n }\n });\n }\n}\n","<div class=\"message-container\">\n @if (iconName) {\n <div class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n </div>\n }\n @if (title) {\n @if (_insideModal) {\n <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n } @else {\n <span class=\"title kirby-text-medium\">{{ title }}</span>\n }\n }\n @if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n }\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { EmptyStateComponent } from './empty-state.component';\n\n@NgModule({\n imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent],\n exports: [EmptyStateComponent, ThemeColorDirective],\n})\nexport class EmptyStateModule {}\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-fab-sheet.mjs CHANGED Viewed

@@ -51,10 +51,10 @@ class FabSheetComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"], outputs: ["ionBackdropTap"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"], outputs: ["ionFocus", "ionBlur"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"], outputs: ["ionBackdropTap"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"], outputs: ["ionFocus", "ionBlur"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FabSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FabSheetComponent, decorators: [{
             type: Component,
             args: [{ imports: [IonBackdrop, IonFab, IonFabButton, IonFabList], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","sources":["../../fab-sheet/src/fab-sheet.component.ts","../../fab-sheet/src/fab-sheet.component.html","../../fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Inject,\n Input,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\nimport { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular';\nimport { DOCUMENT } from '@angular/common';\n\nconst KIRBY_FAB_SHEET_DEPRECATION_WARNING =\n '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';\n\n@Component({\n imports: [IonBackdrop, IonFab, IonFabButton, IonFabList],\n selector: 'kirby-fab-sheet',\n templateUrl: './fab-sheet.component.html',\n styleUrls: ['./fab-sheet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n @Input() disabled: boolean = false;\n @Input() horizontalAlignment: 'left' \| 'center' \| 'right' = 'right';\n\n private _isFabSheetOpen: boolean = false;\n @HostBinding('class.is-open')\n get isFabSheetOpen() {\n return this._isFabSheetOpen;\n }\n\n @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n @ViewChild(IonFabButton, { static: true, read: ElementRef })\n ionFabButton: ElementRef<HTMLElement>;\n\n @ViewChild(IonFab, { static: true })\n ionFab: IonFab;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private renderer: Renderer2,\n @Inject(DOCUMENT) private document: Document\n ) {\n console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);\n }\n\n ngAfterContentInit(): void {\n if (this.actionSheet) {\n this.actionSheet.hideCancel = true;\n }\n }\n\n ngAfterViewInit(): void {\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n hideActions() {\n this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n }\n\n onFabButtonClick() {\n setTimeout(() => {\n this.fabSheetStateChanged(this.ionFab.activated);\n });\n }\n\n onFabListClick() {\n this.ionFab.close().then(() => {\n this.fabSheetStateChanged(false);\n });\n }\n\n fabSheetStateChanged(isOpen: boolean) {\n this._isFabSheetOpen = isOpen;\n if (this.isFabSheetOpen) {\n this.renderer.addClass(this.document.body, 'fab-sheet-active');\n this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n } else {\n this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n this.changeDetectorRef.detectChanges();\n }\n}\n","<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n @if (actionSheet) {\n <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n }\n</ion-fab>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,mCAAmC,GACvC,qEAAqE;MAS1D,iBAAiB,CAAA;AAK5B,IAAA,IACI,cAAc,GAAA;QAChB,OAAO,IAAI,CAAC,eAAe;IAC7B;AAUA,IAAA,WAAA,CACU,iBAAoC,EACpC,QAAmB,EACD,QAAkB,EAAA;QAFpC,IAAA,CAAA,iBAAiB,GAAjB,iBAAiB;QACjB,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACU,IAAA,CAAA,QAAQ,GAAR,QAAQ;QApB3B,IAAA,CAAA,QAAQ,GAAY,KAAK;QACzB,IAAA,CAAA,mBAAmB,GAAgC,OAAO;QAE3D,IAAA,CAAA,eAAe,GAAY,KAAK;AAmBtC,QAAA,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC;IACnD;IAEA,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,CAAC,UAAU,GAAG,IAAI;QACpC;IACF;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,oBAAoB,CAAC;IACrE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClE;IAEA,gBAAgB,GAAA;QACd,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;AAClD,QAAA,CAAC,CAAC;IACJ;IAEA,cAAc,GAAA;QACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,MAAK;AAC5B,YAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;AAClC,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,oBAAoB,CAAC,MAAe,EAAA;AAClC,QAAA,IAAI,CAAC,eAAe,GAAG,MAAM;AAC7B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,kBAAkB,CAAC;AAC9D,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,oBAAoB,CAAC;QAClE;aAAO;AACL,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,kBAAkB,CAAC;AACjE,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,oBAAoB,CAAC;QACrE;AAEA,QAAA,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE;IACxC;AA/DW,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,4EAqBlB,QAAQ,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AArBP,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,iBAAiB,oQAUd,oBAAoB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAEvB,YAAY,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAwB,UAAU,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAG9C,MAAM,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3CnB,qoBAqBA,gjDDCY,WAAW,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,wRAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAM5C~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAA,QAAA,EAC9C,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qoBAAA,EAAA,MAAA,EAAA,CAAA,w/CAAA,CAAA,EAAA;;0BAuB5C,MAAM;2BAAC,QAAQ;;sBApBjB;;sBACA;;sBAGA,WAAW;uBAAC,eAAe;;sBAK3B,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,oBAAoB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAEpD,SAAS;uBAAC,YAAY,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE;;sBAG1D,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;;AE3CrC;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","sources":["../../fab-sheet/src/fab-sheet.component.ts","../../fab-sheet/src/fab-sheet.component.html","../../fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Inject,\n Input,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\nimport { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular';\nimport { DOCUMENT } from '@angular/common';\n\nconst KIRBY_FAB_SHEET_DEPRECATION_WARNING =\n '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';\n\n@Component({\n imports: [IonBackdrop, IonFab, IonFabButton, IonFabList],\n selector: 'kirby-fab-sheet',\n templateUrl: './fab-sheet.component.html',\n styleUrls: ['./fab-sheet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n @Input() disabled: boolean = false;\n @Input() horizontalAlignment: 'left' \| 'center' \| 'right' = 'right';\n\n private _isFabSheetOpen: boolean = false;\n @HostBinding('class.is-open')\n get isFabSheetOpen() {\n return this._isFabSheetOpen;\n }\n\n @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n @ViewChild(IonFabButton, { static: true, read: ElementRef })\n ionFabButton: ElementRef<HTMLElement>;\n\n @ViewChild(IonFab, { static: true })\n ionFab: IonFab;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private renderer: Renderer2,\n @Inject(DOCUMENT) private document: Document\n ) {\n console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);\n }\n\n ngAfterContentInit(): void {\n if (this.actionSheet) {\n this.actionSheet.hideCancel = true;\n }\n }\n\n ngAfterViewInit(): void {\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n hideActions() {\n this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n }\n\n onFabButtonClick() {\n setTimeout(() => {\n this.fabSheetStateChanged(this.ionFab.activated);\n });\n }\n\n onFabListClick() {\n this.ionFab.close().then(() => {\n this.fabSheetStateChanged(false);\n });\n }\n\n fabSheetStateChanged(isOpen: boolean) {\n this._isFabSheetOpen = isOpen;\n if (this.isFabSheetOpen) {\n this.renderer.addClass(this.document.body, 'fab-sheet-active');\n this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n } else {\n this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n }\n\n this.changeDetectorRef.detectChanges();\n }\n}\n","<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n @if (actionSheet) {\n <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n }\n</ion-fab>\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-flag.mjs CHANGED Viewed

@@ -9,12 +9,12 @@ class FlagComponent {
     get _cssClass() {
         return [this.themeColor, this.size];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:var(--kirby-border-radius-xs);font-size:var(--kirby-font-size-n);padding:calc(var(--kirby-spacing-xxxs) + 1px) var(--kirby-spacing-xxs);font-weight:var(--kirby-font-weight-medium);line-height:1}:host.sm{font-size:var(--kirby-font-size-s);padding-block:var(--kirby-spacing-xxxs)}:host.xs{font-size:var(--kirby-font-size-xs);padding:calc(var(--kirby-spacing-xxxs) - 1px) var(--kirby-spacing-xxxs)}:host.success{--kirby-flag-background-color: var(--kirby-success-tint)}:host.warning{--kirby-flag-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-flag-background-color: var(--kirby-danger-tint)}:host.semi-light{--kirby-flag-background-color: var(--kirby-semi-light)}:host{--kirby-flag-border-color: var(--kirby-flag-background-color);--kirby-flag-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FlagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-flag', template: `
     <ng-content></ng-content>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../flag/src/flag.component.ts","../../flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport type FlagThemeColor = 'success' \| 'warning' \| 'danger' \| 'semi-light' \| 'transparent';\n\n@Component({\n selector: 'kirby-flag',\n template: `\n <ng-content></ng-content>\n `,\n styleUrls: ['./flag.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n @Input() size: 'xs' \| 'sm' \| 'md' = 'md';\n @Input() themeColor: FlagThemeColor = 'transparent';\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size];\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;MAYa,aAAa,CAAA;AAR1B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,IAAI,GAAuB,IAAI;QAC/B,IAAA,CAAA,UAAU,GAAmB,aAAa;AAMpD,IAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACrC;~~iIAPW~~,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANd;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAIU~~,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,QAAA,EACZ;;GAET,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA;;sBAG9C;;sBACA;;sBAEA,WAAW;uBAAC,OAAO;;;AChBtB;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../flag/src/flag.component.ts","../../flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport type FlagThemeColor = 'success' \| 'warning' \| 'danger' \| 'semi-light' \| 'transparent';\n\n@Component({\n selector: 'kirby-flag',\n template: `\n <ng-content></ng-content>\n `,\n styleUrls: ['./flag.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n @Input() size: 'xs' \| 'sm' \| 'md' = 'md';\n @Input() themeColor: FlagThemeColor = 'transparent';\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size];\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;MAYa,aAAa,CAAA;AAR1B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,IAAI,GAAuB,IAAI;QAC/B,IAAA,CAAA,UAAU,GAAmB,aAAa;AAMpD,IAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACrC;kIAPW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANd;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIU,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,QAAA,EACZ;;GAET,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA;;sBAG9C;;sBACA;;sBAEA,WAAW;uBAAC,OAAO;;;AChBtB;;AAEG;;;;"}

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

@@ -16,10 +16,10 @@ class AffixDirective {
     constructor(el) {
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", 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: "21.2.23", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AffixDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -161,10 +161,10 @@ class DateInputDirective {
             ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
             : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker", dateValue: "dateValue" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker", dateValue: "dateValue" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateInputDirective, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
@@ -190,10 +190,10 @@ class FormFieldMessageComponent {
     constructor() {
         this.position = 'left';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: FormFieldMessageComponent, isStandalone: true, 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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);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: "21.2.23", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: FormFieldMessageComponent, isStandalone: true, 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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);letter-spacing:normal;color:var(--kirby-text-color-black)}\n"] }]
         }], propDecorators: { text: [{
@@ -252,12 +252,12 @@ class InputCounterComponent {
             this.textToAnnounce = `${characters} ${this.length} ${outOf} ${this.maxlength} ${entered}`;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputCounterComponent, deps: [{ token: i1.TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: InputCounterComponent, isStandalone: true, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: InputCounterComponent, deps: [{ token: i1.TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: InputCounterComponent, isStandalone: true, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: InputCounterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-input-counter', imports: [FormFieldMessageComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n" }]
+            args: [{ selector: 'kirby-input-counter', imports: [FormFieldMessageComponent], template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listenTo: [{
                 type: Input
             }] } });
@@ -330,10 +330,10 @@ class InputComponent {
         //Value of input element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, providers: [{ provide: FORM_FIELD_CONTROL, useExisting: InputComponent }], usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker", "dateValue", "value"] }], ngImport: i0, template: '', isInline: true, styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]::-webkit-calendar-picker-indicator{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@supports (-moz-appearance: none){:host[type=date]::ng-deep+.suffix kirby-icon{display:none}}:host[type=number]{appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{appearance:none;margin:0}:host(.md){border-radius:var(--kirby-border-radius-l);padding-block:calc(var(--kirby-spacing-s) * .5)}:host(.md).error{padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.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:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", 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" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, providers: [{ provide: FORM_FIELD_CONTROL, useExisting: InputComponent }], usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker", "dateValue", "value"] }], ngImport: i0, template: '', isInline: true, styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]::-webkit-calendar-picker-indicator{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@supports (-moz-appearance: none){:host[type=date]::ng-deep+.suffix kirby-icon{display:none}}: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:var(--kirby-border-radius-l);padding-block:calc(var(--kirby-spacing-s) * .5)}:host(.md).error{padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.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:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ hostDirectives: [
                         {
@@ -344,7 +344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                                 'dateValue: value' /* sync input value updates with date-input mask */,
                             ],
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', providers: [{ provide: FORM_FIELD_CONTROL, useExisting: InputComponent }], styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]::-webkit-calendar-picker-indicator{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@supports (-moz-appearance: none){:host[type=date]::ng-deep+.suffix kirby-icon{display:none}}:host[type=number]{appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{appearance:none;margin:0}:host(.md){border-radius:var(--kirby-border-radius-l);padding-block:calc(var(--kirby-spacing-s) * .5)}:host(.md).error{padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.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:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', providers: [{ provide: FORM_FIELD_CONTROL, useExisting: InputComponent }], styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]::-webkit-calendar-picker-indicator{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@supports (-moz-appearance: none){:host[type=date]::ng-deep+.suffix kirby-icon{display:none}}: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:var(--kirby-border-radius-l);padding-block:calc(var(--kirby-spacing-s) * .5)}:host(.md).error{padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.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:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -460,12 +460,12 @@ class TextareaComponent {
         //Value of textarea element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "attr.value": "this.value", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, providers: [{ provide: FORM_FIELD_CONTROL, useExisting: TextareaComponent }], usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "attr.value": "this.value", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, providers: [{ provide: FORM_FIELD_CONTROL, useExisting: TextareaComponent }], usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', providers: [{ provide: FORM_FIELD_CONTROL, useExisting: TextareaComponent }], template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', providers: [{ provide: FORM_FIELD_CONTROL, useExisting: TextareaComponent }], template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);text-align:start}}@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}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -707,10 +707,10 @@ class FormFieldComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i1.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: FormFieldComponent, isStandalone: true, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" }, properties: { "class.wrap-content-in-label": "this._wrapContentInLabel" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "formFieldControl", first: true, predicate: FORM_FIELD_CONTROL, descendants: true }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .message>kirby-form-field-message{width:100%;display:flex}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i1.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldComponent, isStandalone: true, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" }, properties: { "class.wrap-content-in-label": "this._wrapContentInLabel" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "formFieldControl", first: true, predicate: FORM_FIELD_CONTROL, descendants: true }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .message>kirby-form-field-message{width:100%;display:flex}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', imports: [NgTemplateOutlet, FormFieldMessageComponent, IconComponent], template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .message>kirby-form-field-message{width:100%;display:flex}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.PlatformService }, { type: i0.Renderer2 }, { type: i2.WindowRef }, { type: i1.ResizeObserverService }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
@@ -845,10 +845,10 @@ class DecimalMaskDirective {
             },
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", padPrecisionDigits: "padPrecisionDigits", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", padPrecisionDigits: "padPrecisionDigits", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DecimalMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DecimalMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -884,11 +884,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 const imports = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
 class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: FormFieldModule, imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: FormFieldModule, imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, ...imports],