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

@kirbydesign/designsystem 9.7.0 → 9.7.2-sb

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

Files changed (308) hide show

package/checkbox/checkbox.component.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
 import * as i0 from "@angular/core";
-export declare class CheckboxComponent implements AfterViewInit, ControlValueAccessor, OnInit {
+export declare class CheckboxComponent implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit {
     private element;
     private ionicElementPartHelper;
     private ionCheckboxElement?;
@@ -15,12 +15,15 @@ export declare class CheckboxComponent implements AfterViewInit, ControlValueAcc
     get _isDisabled(): string;
     get isAttentionLevel1(): boolean;
     get isAttentionLevel2(): boolean;
+    _labelText: string;
     checkedChange: EventEmitter<boolean>;
     _justify: 'start' | 'end' | 'space-between';
     _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start';
+    _hasSlottedContent: boolean;
     constructor(element: ElementRef<HTMLElement>, ionicElementPartHelper: IonicElementPartHelper);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
     onChecked(checked: boolean): void;
     onBlur(): void;
     private _onChange;

package/esm2022/accordion/accordion-item.component.mjs CHANGED Viewed

@@ -34,8 +34,8 @@ export class AccordionItemComponent {
         this.isExpanded = !this.isExpanded && !this.isDisabled;
         this.toggle.emit(this.isExpanded);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding" }, outputs: { toggle: "toggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: AccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding" }, outputs: { toggle: "toggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], animations: [
             trigger('isExpanded', [
                 state('true', style({ height: '*', visibility: 'visible' })),
                 state('false', style({ height: '0px', visibility: 'hidden' })),
@@ -43,7 +43,7 @@ export class AccordionItemComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('isExpanded', [

package/esm2022/accordion/accordion.directive.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import { Directive } from '@angular/core';
 import * as i0 from "@angular/core";
 export class AccordionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AccordionDirective, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: AccordionDirective, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyAccordion], kirby-accordion',

package/esm2022/accordion/accordion.module.mjs CHANGED Viewed

@@ -5,11 +5,11 @@ import { AccordionDirective } from './accordion.directive';
 import * as i0 from "@angular/core";
 const declarations = [AccordionDirective, AccordionItemComponent];
 export class AccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...declarations],

package/esm2022/action-group/action-group.component.mjs CHANGED Viewed

@@ -94,10 +94,10 @@ export class ActionGroupComponent {
             text: button.textContent.trim(),
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ActionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, ItemModule, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{

package/esm2022/avatar/avatar.component.mjs CHANGED Viewed

@@ -20,10 +20,10 @@ export class AvatarComponent {
     onImageError($event) {
         this.imageError.emit($event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" (error)=\"onImageError($event)\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" (error)=\"onImageError($event)\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" (error)=\"onImageError($event)\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
         }], propDecorators: { imageSrc: [{

package/esm2022/badge/badge.component.mjs CHANGED Viewed

@@ -9,10 +9,10 @@ export class BadgeComponent {
     constructor() {
         this.size = 'md';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-badge', standalone: true, imports: [CommonModule, IonBadge], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"] }]
         }], propDecorators: { text: [{

package/esm2022/button/button.component.mjs CHANGED Viewed

@@ -101,10 +101,10 @@ export class ButtonComponent {
             this._isIconRight = !this._isIconLeft;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{position:relative;font-size:12px;height:24px;min-width:44px}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{position:relative;font-size:12px;height:24px;min-width:44px}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{position:relative;font-size:12px;height:24px;min-width:44px}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { attentionLevel: [{

package/esm2022/calendar/calendar.component.mjs CHANGED Viewed

@@ -388,10 +388,10 @@ export class CalendarComponent {
         const numberOfYears = endYear - startYear;
         return Array.from({ length: numberOfYears + 1 }, (_, i) => (startYear + i).toString());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.CalendarHelper }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: #b4b4b4;pointer-events:none}.day.selectable:not(.current-month){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.CalendarHelper }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: #b4b4b4;pointer-events:none}.day.selectable:not(.current-month){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', providers: [CalendarHelper], template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: #b4b4b4;pointer-events:none}.day.selectable:not(.current-month){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
         }], ctorParameters: () => [{ type: i1.CalendarHelper }, { type: undefined, decorators: [{

package/esm2022/calendar/helpers/calendar.helper.mjs CHANGED Viewed

@@ -71,10 +71,10 @@ export class CalendarHelper {
     validateNavigateMonthMessage(event) {
         return event.data.type === 'kirbyCalendarChangeMonth' && typeof event.data.index === 'number';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarHelper, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CalendarHelper, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CalendarHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CalendarHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.WindowRef }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kYXIuaGVscGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY2FsZW5kYXIvc3JjL2hlbHBlcnMvY2FsZW5kYXIuaGVscGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBYyxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7QUFLNUQsTUFBTSxPQUFPLGNBQWM7SUFJekIsWUFBb0IsU0FBb0I7UUFBcEIsY0FBUyxHQUFULFNBQVMsQ0FBVztRQUZoQyxzQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFFUyxDQUFDO0lBRXJDLElBQUksQ0FDVCxpQkFBNkIsRUFDN0IsT0FBd0IsRUFDeEIsYUFBc0UsRUFDdEUsYUFBc0M7UUFFdEMsSUFBSSxJQUFJLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLEVBQUU7WUFDM0MsTUFBTSxNQUFNLEdBQXNCLGlCQUFpQixDQUFDLGFBQWEsQ0FBQztZQUNsRSxNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRTtnQkFDbkIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQztnQkFDOUIsSUFBSSxDQUFDLHlCQUF5QixDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzFDLENBQUMsQ0FBQztZQUNGLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQztZQUV6QyxJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTLEVBQUUsQ0FBQyxLQUFtQixFQUFFLEVBQUUsQ0FDOUUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLEtBQUssRUFBRSxhQUFhLEVBQUUsYUFBYSxDQUFDLENBQzdELENBQUM7U0FDSDtJQUNILENBQUM7SUFFTSxNQUFNLENBQUMsT0FBd0I7UUFDcEMsSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDMUIsSUFBSSxDQUFDLHlCQUF5QixDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQ3pDO0lBQ0gsQ0FBQztJQUVNLGNBQWMsQ0FBQyxHQUFXO1FBQy9CLElBQUksSUFBSSxDQUFDLGlCQUFpQixFQUFFO1lBQzFCLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUMzQjtnQkFDRSxJQUFJLEVBQUUsNkJBQTZCO2dCQUNuQyxXQUFXLEVBQUUsR0FBRzthQUNqQixFQUNELEdBQUcsQ0FDSixDQUFDO1NBQ0g7SUFDSCxDQUFDO0lBRU8sZUFBZSxDQUFDLGlCQUE2QjtRQUNuRCxPQUFPLENBQ0wsaUJBQWlCO1lBQ2pCLGlCQUFpQixDQUFDLGFBQWE7WUFDL0IsaUJBQWlCLENBQUMsYUFBYSxZQUFZLGlCQUFpQjtZQUM1RCxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUM5QyxDQUFDO0lBQ0osQ0FBQztJQUVPLHlCQUF5QixDQUFDLE9BQXdCO1FBQ3hELElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUMzQjtZQUNFLElBQUksRUFBRSxtQkFBbUI7WUFDekIsR0FBRyxPQUFPO1NBQ1gsRUFDRCxHQUFHLENBQ0osQ0FBQztJQUNKLENBQUM7SUFFTyxrQkFBa0IsQ0FDeEIsS0FBbUIsRUFDbkIsYUFBc0UsRUFDdEUsYUFBc0M7UUFFdEMsSUFBSSxJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQy9CLFFBQVEsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUU7Z0JBQ3ZCLEtBQUssMEJBQTBCO29CQUM3QixJQUFJLElBQUksQ0FBQywyQkFBMkIsQ0FBQyxLQUFLLENBQUMsRUFBRTt3QkFDM0MsYUFBYSxDQUFDLEVBQUUsWUFBWSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO3FCQUM3RDtvQkFDRCxNQUFNO2dCQUNSLEtBQUssMEJBQTBCO29CQUM3QixJQUFJLElBQUksQ0FBQyw0QkFBNEIsQ0FBQyxLQUFLLENBQUMsRUFBRTt3QkFDNUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7cUJBQ2pDO29CQUNELE1BQU07YUFDVDtTQUNGO0lBQ0gsQ0FBQztJQUVPLGVBQWUsQ0FBQyxLQUFtQjtRQUN6QyxPQUFPLENBQ0wsSUFBSSxDQUFDLFlBQVksS0FBSyxLQUFLLENBQUMsTUFBTTtZQUNsQyxLQUFLLENBQUMsSUFBSSxLQUFLLFNBQVM7WUFDeEIsS0FBSyxDQUFDLElBQUk7WUFDVixLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FDaEIsQ0FBQztJQUNKLENBQUM7SUFFTywyQkFBMkIsQ0FBQyxLQUFtQjtRQUNyRCxPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLDBCQUEwQixJQUFJLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQzFFLENBQUM7SUFFTyw0QkFBNEIsQ0FBQyxLQUFtQjtRQUN0RCxPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLDBCQUEwQixJQUFJLE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUssUUFBUSxDQUFDO0lBQ2hHLENBQUM7a0lBbkdVLGNBQWM7c0lBQWQsY0FBYzs7NEZBQWQsY0FBYztrQkFEMUIsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVsZW1lbnRSZWYsIEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFdpbmRvd1JlZiB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vdHlwZXMnO1xuXG5pbXBvcnQgeyBDYWxlbmRhck9wdGlvbnMgfSBmcm9tICcuL2NhbGVuZGFyLW9wdGlvbnMubW9kZWwnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgQ2FsZW5kYXJIZWxwZXIge1xuICBwcml2YXRlIGVtYmVkZGVkVmlldzogV2luZG93O1xuICBwcml2YXRlIGVtYmVkZGVkVmlld1JlYWR5ID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSB3aW5kb3dSZWY6IFdpbmRvd1JlZikge31cblxuICBwdWJsaWMgaW5pdChcbiAgICBjYWxlbmRhckNvbnRhaW5lcjogRWxlbWVudFJlZixcbiAgICBvcHRpb25zOiBDYWxlbmRhck9wdGlvbnMsXG4gICAgb25EYXlTZWxlY3RlZDogKGNlbGw6IHsgaXNTZWxlY3RhYmxlOiBib29sZWFuOyBkYXRlOiBudW1iZXIgfSkgPT4gdm9pZCxcbiAgICBvbkNoYW5nZU1vbnRoOiAoaW5kZXg6IG51bWJlcikgPT4gdm9pZFxuICApIHtcbiAgICBpZiAodGhpcy5oYXNFbWJlZGRlZFZpZXcoY2FsZW5kYXJDb250YWluZXIpKSB7XG4gICAgICBjb25zdCBpZnJhbWUgPSA8SFRNTElGcmFtZUVsZW1lbnQ+Y2FsZW5kYXJDb250YWluZXIubmF0aXZlRWxlbWVudDtcbiAgICAgIGlmcmFtZS5vbmxvYWQgPSAoKSA9PiB7XG4gICAgICAgIHRoaXMuZW1iZWRkZWRWaWV3UmVhZHkgPSB0cnVlO1xuICAgICAgICB0aGlzLmVtaXRPcHRpb25zVG9FbWJlZGRlZFZpZXcob3B0aW9ucyk7XG4gICAgICB9O1xuICAgICAgdGhpcy5lbWJlZGRlZFZpZXcgPSBpZnJhbWUuY29udGVudFdpbmRvdztcblxuICAgICAgdGhpcy53aW5kb3dSZWYubmF0aXZlV2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCAoZXZlbnQ6IE1lc3NhZ2VFdmVudCkgPT5cbiAgICAgICAgdGhpcy5oYW5kbGVNZXNzYWdlRXZlbnQoZXZlbnQsIG9uRGF5U2VsZWN0ZWQsIG9uQ2hhbmdlTW9udGgpXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyB1cGRhdGUob3B0aW9uczogQ2FsZW5kYXJPcHRpb25zKSB7XG4gICAgaWYgKHRoaXMuZW1iZWRkZWRWaWV3UmVhZHkpIHtcbiAgICAgIHRoaXMuZW1pdE9wdGlvbnNUb0VtYmVkZGVkVmlldyhvcHRpb25zKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc2V0U2VsZWN0ZWREYXkoZGF5OiBudW1iZXIpIHtcbiAgICBpZiAodGhpcy5lbWJlZGRlZFZpZXdSZWFkeSkge1xuICAgICAgdGhpcy5lbWJlZGRlZFZpZXcucG9zdE1lc3NhZ2UoXG4gICAgICAgIHtcbiAgICAgICAgICB0eXBlOiAna2lyYnlDYWxlbmRhclNldFNlbGVjdGVkRGF5JyxcbiAgICAgICAgICBzZWxlY3RlZERheTogZGF5LFxuICAgICAgICB9LFxuICAgICAgICAnKidcbiAgICAgICk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBoYXNFbWJlZGRlZFZpZXcoY2FsZW5kYXJDb250YWluZXI6IEVsZW1lbnRSZWYpIHtcbiAgICByZXR1cm4gKFxuICAgICAgY2FsZW5kYXJDb250YWluZXIgJiZcbiAgICAgIGNhbGVuZGFyQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQgJiZcbiAgICAgIGNhbGVuZGFyQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQgaW5zdGFuY2VvZiBIVE1MSUZyYW1lRWxlbWVudCAmJlxuICAgICAgY2FsZW5kYXJDb250YWluZXIubmF0aXZlRWxlbWVudC5jb250ZW50V2luZG93XG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgZW1pdE9wdGlvbnNUb0VtYmVkZGVkVmlldyhvcHRpb25zOiBDYWxlbmRhck9wdGlvbnMpIHtcbiAgICB0aGlzLmVtYmVkZGVkVmlldy5wb3N0TWVzc2FnZShcbiAgICAgIHtcbiAgICAgICAgdHlwZTogJ2tpcmJ5Q2FsZW5kYXJJbml0JyxcbiAgICAgICAgLi4ub3B0aW9ucyxcbiAgICAgIH0sXG4gICAgICAnKidcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVNZXNzYWdlRXZlbnQoXG4gICAgZXZlbnQ6IE1lc3NhZ2VFdmVudCxcbiAgICBvbkRheVNlbGVjdGVkOiAoY2VsbDogeyBpc1NlbGVjdGFibGU6IGJvb2xlYW47IGRhdGU6IG51bWJlciB9KSA9PiB2b2lkLFxuICAgIG9uQ2hhbmdlTW9udGg6IChpbmRleDogbnVtYmVyKSA9PiB2b2lkXG4gICkge1xuICAgIGlmICh0aGlzLnZhbGlkYXRlTWVzc2FnZShldmVudCkpIHtcbiAgICAgIHN3aXRjaCAoZXZlbnQuZGF0YS50eXBlKSB7XG4gICAgICAgIGNhc2UgJ2tpcmJ5Q2FsZW5kYXJEYXlTZWxlY3RlZCc6XG4gICAgICAgICAgaWYgKHRoaXMudmFsaWRhdGVEYXRlU2VsZWN0ZWRNZXNzYWdlKGV2ZW50KSkge1xuICAgICAgICAgICAgb25EYXlTZWxlY3RlZCh7IGlzU2VsZWN0YWJsZTogdHJ1ZSwgZGF0ZTogZXZlbnQuZGF0YS5kYXkgfSk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGJyZWFrO1xuICAgICAgICBjYXNlICdraXJieUNhbGVuZGFyQ2hhbmdlTW9udGgnOlxuICAgICAgICAgIGlmICh0aGlzLnZhbGlkYXRlTmF2aWdhdGVNb250aE1lc3NhZ2UoZXZlbnQpKSB7XG4gICAgICAgICAgICBvbkNoYW5nZU1vbnRoKGV2ZW50LmRhdGEuaW5kZXgpO1xuICAgICAgICAgIH1cbiAgICAgICAgICBicmVhaztcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHZhbGlkYXRlTWVzc2FnZShldmVudDogTWVzc2FnZUV2ZW50KSB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMuZW1iZWRkZWRWaWV3ID09PSBldmVudC5zb3VyY2UgJiZcbiAgICAgIGV2ZW50LnR5cGUgPT09ICdtZXNzYWdlJyAmJlxuICAgICAgZXZlbnQuZGF0YSAmJlxuICAgICAgZXZlbnQuZGF0YS50eXBlXG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgdmFsaWRhdGVEYXRlU2VsZWN0ZWRNZXNzYWdlKGV2ZW50OiBNZXNzYWdlRXZlbnQpIHtcbiAgICByZXR1cm4gZXZlbnQuZGF0YS50eXBlID09PSAna2lyYnlDYWxlbmRhckRheVNlbGVjdGVkJyAmJiBldmVudC5kYXRhLmRheTtcbiAgfVxuXG4gIHByaXZhdGUgdmFsaWRhdGVOYXZpZ2F0ZU1vbnRoTWVzc2FnZShldmVudDogTWVzc2FnZUV2ZW50KSB7XG4gICAgcmV0dXJuIGV2ZW50LmRhdGEudHlwZSA9PT0gJ2tpcmJ5Q2FsZW5kYXJDaGFuZ2VNb250aCcgJiYgdHlwZW9mIGV2ZW50LmRhdGEuaW5kZXggPT09ICdudW1iZXInO1xuICB9XG59XG4iXX0=

package/esm2022/card/card-as-button/card-as-button.directive.mjs CHANGED Viewed

@@ -25,10 +25,10 @@ export class CardAsButtonDirective {
     _onInactiveHandler() {
         this._pressed = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardAsButtonDirective, deps: [{ token: i1.CardComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: CardAsButtonDirective, selector: "kirby-card[click]", host: { listeners: { "keydown.space": "_onKeydownHandler($event)", "keydown.enter": "_onKeydownHandler($event)", "keyup.space": "_onInactiveHandler()", "keyup.enter": "_onInactiveHandler()", "blur": "_onInactiveHandler()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.interaction-state-active": "this._pressed" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardAsButtonDirective, deps: [{ token: i1.CardComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: CardAsButtonDirective, selector: "kirby-card[click]", host: { listeners: { "keydown.space": "_onKeydownHandler($event)", "keydown.enter": "_onKeydownHandler($event)", "keyup.space": "_onInactiveHandler()", "keyup.enter": "_onInactiveHandler()", "blur": "_onInactiveHandler()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.interaction-state-active": "this._pressed" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardAsButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardAsButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/esm2022/card/card-footer/card-footer.component.mjs CHANGED Viewed

@@ -4,10 +4,10 @@ export class CardFooterComponent {
     constructor() {
         this.hasPadding = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardFooterComponent, selector: "kirby-card-footer", inputs: { hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding" } }, ngImport: i0, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:16px}footer{display:inherit;flex:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CardFooterComponent, selector: "kirby-card-footer", inputs: { hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding" } }, ngImport: i0, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:16px}footer{display:inherit;flex:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-card-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:16px}footer{display:inherit;flex:inherit}\n"] }]
         }], propDecorators: { hasPadding: [{

package/esm2022/card/card-header/card-header.component.mjs CHANGED Viewed

@@ -9,10 +9,10 @@ export class CardHeaderComponent {
     get _cssClass() {
         return [this.flagged, this.flagged ? 'flagged' : null];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
         }], propDecorators: { title: [{

package/esm2022/card/card.component.mjs CHANGED Viewed

@@ -66,10 +66,10 @@ export class CardComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat", variant: "variant" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat", variant: "variant" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ResizeObserverService }, { type: i0.Renderer2 }], propDecorators: { title: [{

package/esm2022/card/card.module.mjs CHANGED Viewed

@@ -13,17 +13,17 @@ const declarations = [
     CardAsButtonDirective,
 ];
 export class CardModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CardModule, declarations: [CardComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: CardModule, declarations: [CardComponent,
             CardFooterComponent,
             CardHeaderComponent,
             CardAsButtonDirective], imports: [CommonModule, ThemeColorDirective], exports: [CardComponent,
             CardFooterComponent,
             CardHeaderComponent,
             CardAsButtonDirective, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ThemeColorDirective],