npm - @kirbydesign/designsystem - Versions diffs - 12.0.0-dev-67d5287 → 12.0.0-dev-9f721bb - Mend

@kirbydesign/designsystem 12.0.0-dev-67d5287 → 12.0.0-dev-9f721bb

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-empty-state.mjs","names":[],"sources":["../../empty-state/src/empty-state.component.ts","../../empty-state/src/empty-state.component.html","../../empty-state/src/empty-state.module.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"],"mappings":";;;;;;;~~AAsBA~~,IAAa,sBAAb,MAAa,oBAAmB;CAM9B,IAAa,MAAM,OAAa;EAC9B,KAAK,SAAS;EAEd,IAAI,KAAK,gBACP,KAAK,SAAS,aAAa,KAAK,gBAAgB,cAAc,KAAK;CAEvE;CAEA,IAAI,QAAK;EACP,OAAO,KAAK;CACd;~~CAQA~~,YACU,YACA,UAAmB;EADnB,KAAA,aAAA;EACA,KAAA,WAAA;~~EATV~~,KAAA,eAAwB;~~CAUrB~~;CAEH,WAAQ;EAKN,KAAK,iBAAiB,0BAA0B,KAAK,WAAW,aAAa;EAC7E,IAAI,KAAK,gBAAgB;GACvB,KAAK,eAAe;GACpB,KAAK,SAAS,aAAa,KAAK,gBAAgB,cAAc,KAAK,KAAK;EAC1E;CACF;CAEA,qBAAkB;EAChB,KAAK,2BAA0B;EAI/B,KAAK,eAAe,QAAQ,gBAAe;GACzC,iBAAiB,KAAK,2BAA0B,CAAE;EACpD,CAAC;CACH;CAMQ,6BAA0B;EAChC,KAAK,eAAe,SAAS,QAAQ,UAAS;GAC5C,IAAI,UAAU,MAAM,OAAO,mBAAmB,UAAa,OAAO,mBAAmB,MACnF;GAGF,IAAI,OAAO,mBAAmB,KAC5B,OAAO,iBAAiB;EAE5B,CAAC;CACH;~~CAjEW~~;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAmB,MAAA,CAAA,EAAA,OAAA,GAAA,WAAA,GAAA,EAAA,OAAA,GAAA,UAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAnB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAmB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA;GAAA,SAAA,CAAA;IAAA,cAAA;IAAA,~~WAqBb~~;GAAe,CAAA;GAAA,UAAA;GAAA,~~UC3ClC~~;GAoBA,QAAA,CAAA,y9CAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,~~MDAY~~;IAAa,UAAA;IAAA,QAAA,CAAA,QAAA,MAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAEZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAP/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAmB,iBAGZ,wBAAwB;GAAM,SACtC,CAAC,aAAa;GAAC,UAAA;GAAA,QAAA,CAAA,y9CAAA;EAAA,CAAA;;;;EAMvB,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAEA,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAaA,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;~~GAEA~~,MAAA;GAAgB,MAAA,CAAA,eAAe;;;;~~AEjClC~~,IAAa,mBAAb,MAAa,iBAAgB;CAAhB;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAgB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAhB;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAgB,SAAA;IAHjB;IAAY;IAAc;IAAqB;GAAmB;GAAA,SAAA,CAClE,qBAAqB,mBAAmB;EAAA,CAAA;CAAA;CAEvC;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAgB,SAAA;IAHjB;IAAY;IAAmC;GAAmB;EAAA,CAAA;CAAA;;AAGjE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAJ5B,MAAA;EAAS,MAAA,CAAA;GACR,SAAS;IAAC;IAAY;IAAc;IAAqB;GAAmB;GAC5E,SAAS,CAAC,qBAAqB,mBAAmB;EACnD,CAAA"}
1	+ {"version":3,"file":"kirbydesign-designsystem-empty-state.mjs","names":[],"sources":["../../empty-state/src/empty-state.component.ts","../../empty-state/src/empty-state.component.html","../../empty-state/src/empty-state.module.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';\nimport { ThemeColor } from '@kirbydesign/core';\n\nconst supportedThemeColors: ThemeColor[] = ['success', 'warning', 'danger', 'medium'];\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 /*\n Sets which color the empty state should use from the theme palette.\n * Supported values are 'success', 'warning', 'danger' and 'medium'.\n * Deprecated values: 'primary', 'secondary', 'tertiary', 'light' and 'dark'\n /\n @Input() set themeColor(value: ThemeColor) {\n if (value && !supportedThemeColors.includes(value)) {\n console.warn(\n `[Kirby Empty State] themeColor '${value}' is deprecated and will be removed in a future major version. Use 'success', 'warning', 'danger' or 'medium' instead.`\n );\n }\n }\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"],"mappings":"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"}

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

@@ -50,7 +50,7 @@ var FabSheetComponent = class FabSheetComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FabSheetComponent,
 			deps: [
@@ -64,7 +64,7 @@ var FabSheetComponent = class FabSheetComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: FabSheetComponent,
 			isStandalone: true,
 			selector: "kirby-fab-sheet",
@@ -156,7 +156,7 @@ var FabSheetComponent = class FabSheetComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FabSheetComponent,
 	decorators: [{

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

@@ -11,7 +11,7 @@ var FlagComponent = class FlagComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FlagComponent,
 			deps: [],
@@ -21,7 +21,7 @@ var FlagComponent = class FlagComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: FlagComponent,
 			isStandalone: true,
 			selector: "kirby-flag",
@@ -35,14 +35,14 @@ var FlagComponent = class FlagComponent {
     <ng-content></ng-content>
   `,
 			isInline: true,
-			styles: [":host{--kirby-flag-color: var(--kirby-color-content-neutral);--kirby-flag-border-color: var(--kirby-color-border-neutral);display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color);border:1px solid var(--kirby-flag-border-color);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-color-fill-success-quiet);--kirby-flag-color: var(--kirby-color-content-success-quiet);--kirby-flag-border-color: var(--kirby-color-border-success-quiet)}:host.warning{--kirby-flag-background-color: var(--kirby-color-fill-warning-quiet);--kirby-flag-color: var(--kirby-color-content-warning-quiet);--kirby-flag-border-color: var(--kirby-color-border-warning-quiet)}:host.danger{--kirby-flag-background-color: var(--kirby-color-fill-danger-quiet);--kirby-flag-color: var(--kirby-color-content-danger-quiet);--kirby-flag-border-color: var(--kirby-color-border-danger-quiet)}:host.semi-light{--kirby-flag-background-color: var(--kirby-color-fill-neutral)}\n"],
+			styles: [":host{--kirby-flag-color: var(--kirby-color-content-neutral);--kirby-flag-border-color: var(--kirby-color-border-neutral);display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color);border:var(--kirby-stroke-xs) solid var(--kirby-flag-border-color);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-color-fill-success-quiet);--kirby-flag-color: var(--kirby-color-content-success-quiet);--kirby-flag-border-color: var(--kirby-color-border-success-quiet)}:host.warning{--kirby-flag-background-color: var(--kirby-color-fill-warning-quiet);--kirby-flag-color: var(--kirby-color-content-warning-quiet);--kirby-flag-border-color: var(--kirby-color-border-warning-quiet)}:host.danger{--kirby-flag-background-color: var(--kirby-color-fill-danger-quiet);--kirby-flag-color: var(--kirby-color-content-danger-quiet);--kirby-flag-border-color: var(--kirby-color-border-danger-quiet)}:host.semi-light{--kirby-flag-background-color: var(--kirby-color-fill-neutral)}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FlagComponent,
 	decorators: [{
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({
     <ng-content></ng-content>
   `,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			styles: [":host{--kirby-flag-color: var(--kirby-color-content-neutral);--kirby-flag-border-color: var(--kirby-color-border-neutral);display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color);border:1px solid var(--kirby-flag-border-color);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-color-fill-success-quiet);--kirby-flag-color: var(--kirby-color-content-success-quiet);--kirby-flag-border-color: var(--kirby-color-border-success-quiet)}:host.warning{--kirby-flag-background-color: var(--kirby-color-fill-warning-quiet);--kirby-flag-color: var(--kirby-color-content-warning-quiet);--kirby-flag-border-color: var(--kirby-color-border-warning-quiet)}:host.danger{--kirby-flag-background-color: var(--kirby-color-fill-danger-quiet);--kirby-flag-color: var(--kirby-color-content-danger-quiet);--kirby-flag-border-color: var(--kirby-color-border-danger-quiet)}:host.semi-light{--kirby-flag-background-color: var(--kirby-color-fill-neutral)}\n"]
+			styles: [":host{--kirby-flag-color: var(--kirby-color-content-neutral);--kirby-flag-border-color: var(--kirby-color-border-neutral);display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color);border:var(--kirby-stroke-xs) solid var(--kirby-flag-border-color);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-color-fill-success-quiet);--kirby-flag-color: var(--kirby-color-content-success-quiet);--kirby-flag-border-color: var(--kirby-color-border-success-quiet)}:host.warning{--kirby-flag-background-color: var(--kirby-color-fill-warning-quiet);--kirby-flag-color: var(--kirby-color-content-warning-quiet);--kirby-flag-border-color: var(--kirby-color-border-warning-quiet)}:host.danger{--kirby-flag-background-color: var(--kirby-color-fill-danger-quiet);--kirby-flag-color: var(--kirby-color-content-danger-quiet);--kirby-flag-border-color: var(--kirby-color-border-danger-quiet)}:host.semi-light{--kirby-flag-background-color: var(--kirby-color-fill-neutral)}\n"]
 		}]
 	}],
 	propDecorators: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-flag.mjs","names":[],"sources":["../../flag/src/flag.component.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"],"mappings":";;AAYA,IAAa,gBAAb,MAAa,cAAa;CAR1B,cAAA;EASW,KAAA,OAA2B;EAC3B,KAAA,aAA6B;CAMvC;CAJC,IACI,YAAS;EACX,OAAO,CAAC,KAAK,YAAY,KAAK,IAAI;CACpC;CAPW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAb;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAa,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;IAAA,YAAA;GAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,iBAAA,EAAA;GAAA,UAAA;GAAA,UANd;;;GAET,UAAA;GAAA,QAAA,CAAA,~~g4CAAA~~;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAIU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,UACZ;;;GAET,iBAEgB,wBAAwB;GAAM,QAAA,CAAA,~~g4CAAA~~;EAAA,CAAA;;;EAG9C,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,OAAO"}
1	+ {"version":3,"file":"kirbydesign-designsystem-flag.mjs","names":[],"sources":["../../flag/src/flag.component.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"],"mappings":";;AAYA,IAAa,gBAAb,MAAa,cAAa;CAR1B,cAAA;EASW,KAAA,OAA2B;EAC3B,KAAA,aAA6B;CAMvC;CAJC,IACI,YAAS;EACX,OAAO,CAAC,KAAK,YAAY,KAAK,IAAI;CACpC;CAPW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAb;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAa,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;IAAA,YAAA;GAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,iBAAA,EAAA;GAAA,UAAA;GAAA,UANd;;;GAET,UAAA;GAAA,QAAA,CAAA,m5CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAIU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,UACZ;;;GAET,iBAEgB,wBAAwB;GAAM,QAAA,CAAA,m5CAAA;EAAA,CAAA;;;EAG9C,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,OAAO"}

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

@@ -18,7 +18,7 @@ var AffixDirective = class AffixDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: AffixDirective,
 			deps: [{ token: i0.ElementRef }],
@@ -28,7 +28,7 @@ var AffixDirective = class AffixDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: AffixDirective,
 			isStandalone: true,
 			selector: "[kirby-affix]",
@@ -39,7 +39,7 @@ var AffixDirective = class AffixDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: AffixDirective,
 	decorators: [{
@@ -135,7 +135,7 @@ var DateInputDirective = class DateInputDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: DateInputDirective,
 			deps: [
@@ -153,7 +153,7 @@ var DateInputDirective = class DateInputDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: DateInputDirective,
 			isStandalone: true,
 			inputs: {
@@ -169,7 +169,7 @@ var DateInputDirective = class DateInputDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: DateInputDirective,
 	decorators: [{
@@ -211,7 +211,7 @@ var FormFieldMessageComponent = class FormFieldMessageComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FormFieldMessageComponent,
 			deps: [],
@@ -221,7 +221,7 @@ var FormFieldMessageComponent = class FormFieldMessageComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: FormFieldMessageComponent,
 			isStandalone: true,
 			selector: "kirby-form-field-message",
@@ -238,7 +238,7 @@ var FormFieldMessageComponent = class FormFieldMessageComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FormFieldMessageComponent,
 	decorators: [{
@@ -300,7 +300,7 @@ var InputCounterComponent = class InputCounterComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: InputCounterComponent,
 			deps: [{ token: i1$1.TranslationService }, { token: i0.ChangeDetectorRef }],
@@ -310,7 +310,7 @@ var InputCounterComponent = class InputCounterComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: InputCounterComponent,
 			isStandalone: true,
 			selector: "kirby-input-counter",
@@ -329,7 +329,7 @@ var InputCounterComponent = class InputCounterComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputCounterComponent,
 	decorators: [{
@@ -403,7 +403,7 @@ var InputComponent = class InputComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: InputComponent,
 			deps: [{ token: i0.ElementRef }, {
@@ -416,7 +416,7 @@ var InputComponent = class InputComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: InputComponent,
 			isStandalone: true,
 			selector: "input[kirby-input]",
@@ -469,14 +469,14 @@ var InputComponent = class InputComponent {
 			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(.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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}: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(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-color-content-raised-quiet)}.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-color-content-raised);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).borderless{border-color:transparent}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:var(--kirby-stroke-xs) solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - var(--kirby-stroke-xs));width:100%}:host.borderless{border-color:transparent;border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:var(--kirby-opacity-40)}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}: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(calc(var(--kirby-spacing-s) * .5) - var(--kirby-stroke-xs))}: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-color-content-raised-quiet)}.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-color-content-raised);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.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InputComponent,
 	decorators: [{
@@ -497,7 +497,7 @@ i0.ɵɵngDeclareClassMetadata({
 				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(.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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}: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(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-color-content-raised-quiet)}.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-color-content-raised);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).borderless{border-color:transparent}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:var(--kirby-stroke-xs) solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - var(--kirby-stroke-xs));width:100%}:host.borderless{border-color:transparent;border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:var(--kirby-opacity-40)}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}: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(calc(var(--kirby-spacing-s) * .5) - var(--kirby-stroke-xs))}: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-color-content-raised-quiet)}.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-color-content-raised);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 }, {
@@ -605,7 +605,7 @@ var TextareaComponent = class TextareaComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: TextareaComponent,
 			deps: [{ token: i0.ElementRef }, {
@@ -618,7 +618,7 @@ var TextareaComponent = class TextareaComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: TextareaComponent,
 			isStandalone: true,
 			selector: "textarea[kirby-textarea]",
@@ -654,14 +654,14 @@ var TextareaComponent = class 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(.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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).borderless{border-color:transparent}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:var(--kirby-stroke-xs) solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - var(--kirby-stroke-xs));width:100%}:host.borderless{border-color:transparent;border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:var(--kirby-opacity-40)}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}: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.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TextareaComponent,
 	decorators: [{
@@ -674,7 +674,7 @@ i0.ɵɵngDeclareClassMetadata({
 				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(.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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).borderless{border-color:transparent}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:var(--kirby-stroke-xs) solid var(--kirby-input-color-border-raised);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);padding:calc(var(--kirby-spacing-s) - var(--kirby-stroke-xs));width:100%}:host.borderless{border-color:transparent;border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:var(--kirby-opacity-40)}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@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}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i0.ElementRef }, {
@@ -874,7 +874,7 @@ var FormFieldComponent = class FormFieldComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FormFieldComponent,
 			deps: [
@@ -891,7 +891,7 @@ var FormFieldComponent = class FormFieldComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: FormFieldComponent,
 			isStandalone: true,
 			selector: "kirby-form-field",
@@ -960,7 +960,7 @@ var FormFieldComponent = class FormFieldComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FormFieldComponent,
 	decorators: [{
@@ -1107,7 +1107,7 @@ var DecimalMaskDirective = class DecimalMaskDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: DecimalMaskDirective,
 			deps: [
@@ -1124,7 +1124,7 @@ var DecimalMaskDirective = class DecimalMaskDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: DecimalMaskDirective,
 			isStandalone: true,
 			selector: "[kirby-decimal-mask]",
@@ -1145,7 +1145,7 @@ var DecimalMaskDirective = class DecimalMaskDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: DecimalMaskDirective,
 	decorators: [{
@@ -1190,7 +1190,7 @@ var FormFieldModule = class FormFieldModule {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FormFieldModule,
 			deps: [],
@@ -1200,7 +1200,7 @@ var FormFieldModule = class FormFieldModule {
 	static {
 		this.ɵmod = i0.ɵɵngDeclareNgModule({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FormFieldModule,
 			imports: [
@@ -1224,7 +1224,7 @@ var FormFieldModule = class FormFieldModule {
 	static {
 		this.ɵinj = i0.ɵɵngDeclareInjector({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FormFieldModule,
 			imports: [
@@ -1237,7 +1237,7 @@ var FormFieldModule = class FormFieldModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FormFieldModule,
 	decorators: [{