npm - @kirbydesign/designsystem - Versions diffs - 10.2.0 → 10.3.0 - Mend

@kirbydesign/designsystem 10.2.0 → 10.3.0

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

Files changed (1343) hide show

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

@@ -21,12 +21,12 @@ class AvatarComponent {
     onImageError($event) {
         this.imageError.emit($event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", 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\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\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: "19.1.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", 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\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\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: "18.2.13", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\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"] }]
+            args: [{ imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\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: [{
                 type: Input
             }], imageLoading: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-avatar.mjs","sources":["../../avatar/src/avatar.component.ts","../../avatar/src/avatar.component.html","../../avatar/src/kirbydesign-designsystem-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n} from '@angular/core';\n\nimport { BrandColor, NotificationColor } from '@kirbydesign/core';\n\nexport enum AvatarSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\n@Component({\n ~~standalone: true,\n~~ imports: [CommonModule],\n selector: 'kirby-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n @Input() imageSrc: string;\n @Input() imageLoading: 'eager' \| 'lazy' \| undefined;\n @Input() altText: string;\n @Input() stroke: boolean;\n @Input() text: string;\n @Input() overlay: boolean;\n @Input() size: AvatarSize \| `${AvatarSize}` = AvatarSize.SM;\n @Input()\n themeColor: NotificationColor \| BrandColor \| 'medium' \| 'white' \| 'dark' \| 'light' \| 'semi-light';\n @Output()\n imageError: EventEmitter<ErrorEvent> = new EventEmitter();\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n }\n\n onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img\n ngIf=\"imageSrc\"\n [src]=\"imageSrc\"\n [attr.alt]=\"altText\"\n [attr.loading]=\"imageLoading\"\n (error)=\"onImageError($event)\"\n />\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","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;IAYY~~,WAKX~~;~~AALD~~,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS~~,CAAA~~;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS~~,CAAA~~;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS~~,CAAA~~;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS~~,CAAA~~;AACX,CAAC,EALW,UAAU,KAAV,UAAU,GAKrB,EAAA,CAAA,CAAA~~,CAAA~~;~~MAUY~~,eAAe,CAAA;~~AAR5B~~,IAAA,WAAA,GAAA;~~AAeW~~,QAAA,IAAA,CAAA,IAAI,GAAiC,UAAU,CAAC,EAAE~~,CAAC~~;~~AAI5D~~,QAAA,IAAA,CAAA,UAAU,GAA6B,IAAI,YAAY,EAAE~~,CAAC~~;~~AAU3D,KAAA~~;AARC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,~~CAAC;KACtE;AAED,~~IAAA,YAAY,CAAC,MAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,~~CAAC;KAC9B;kIApBU,~~eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA~~,EAAA~~;~~sHAAf~~,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EC3B5B~~,+aAYA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EDSY~~,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA~~,EAAA~~;;~~4FAMX~~,eAAe,EAAA,UAAA,EAAA,CAAA;~~kBAR3B~~,SAAS;~~iCACI~~,~~IAAI~~,EAAA,OAAA,~~EACP~~,CAAC,YAAY,CAAC,~~YACb~~,cAAc,~~EAAA~~,eAAA,~~EAGP~~,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+aAAA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA~~,CAAA~~;8BAGtC,QAAQ,EAAA,CAAA;sBAAhB~~,KAAK~~;~~gBACG~~,YAAY,EAAA,CAAA;sBAApB~~,KAAK~~;~~gBACG~~,OAAO,EAAA,CAAA;sBAAf~~,KAAK~~;~~gBACG~~,MAAM,EAAA,CAAA;sBAAd~~,KAAK~~;~~gBACG~~,IAAI,EAAA,CAAA;sBAAZ~~,KAAK~~;~~gBACG~~,OAAO,EAAA,CAAA;sBAAf~~,KAAK~~;~~gBACG~~,IAAI,EAAA,CAAA;sBAAZ~~,KAAK~~;~~gBAEN~~,UAAU,EAAA,CAAA;sBADT~~,KAAK~~;~~gBAGN~~,UAAU,EAAA,CAAA;sBADT~~,MAAM~~;~~gBAIH~~,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO~~,CAAA~~;;;~~AExCtB~~;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-avatar.mjs","sources":["../../avatar/src/avatar.component.ts","../../avatar/src/avatar.component.html","../../avatar/src/kirbydesign-designsystem-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n} from '@angular/core';\n\nimport { BrandColor, NotificationColor } from '@kirbydesign/core';\n\nexport enum AvatarSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n @Input() imageSrc: string;\n @Input() imageLoading: 'eager' \| 'lazy' \| undefined;\n @Input() altText: string;\n @Input() stroke: boolean;\n @Input() text: string;\n @Input() overlay: boolean;\n @Input() size: AvatarSize \| `${AvatarSize}` = AvatarSize.SM;\n @Input()\n themeColor: NotificationColor \| BrandColor \| 'medium' \| 'white' \| 'dark' \| 'light' \| 'semi-light';\n @Output()\n imageError: EventEmitter<ErrorEvent> = new EventEmitter();\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n }\n\n onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img\n ngIf=\"imageSrc\"\n [src]=\"imageSrc\"\n [attr.alt]=\"altText\"\n [attr.loading]=\"imageLoading\"\n (error)=\"onImageError($event)\"\n />\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","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;IAYY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EALW,UAAU,KAAV,UAAU,GAKrB,EAAA,CAAA,CAAA;MASY,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAcW,QAAA,IAAA,CAAA,IAAI,GAAiC,UAAU,CAAC,EAAE;AAI3D,QAAA,IAAA,CAAA,UAAU,GAA6B,IAAI,YAAY,EAAE;AAU1D;AARC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC;;AAGtE,IAAA,YAAY,CAAC,MAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;iIAnBnB,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1B5B,+aAYA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDQY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,cAAc,EAGP,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+aAAA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA;8BAGtC,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAED,UAAU,EAAA,CAAA;sBADT;gBAGD,UAAU,EAAA,CAAA;sBADT;gBAIG,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO;;;AEvCtB;;AAEG;;;;"}

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

@@ -22,12 +22,12 @@ class BadgeComponent {
         console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);
         this._text = value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "19.1.4", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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: "18.2.13", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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"] }]
+            args: [{ selector: 'kirby-badge', 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: [{
                 type: Input
             }], size: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-badge.mjs","sources":["../../badge/src/badge.component.ts","../../badge/src/badge.component.html","../../badge/src/kirbydesign-designsystem-badge.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonBadge } from '@ionic/angular/standalone';\n\nexport type BadgeSize = 'sm' \| 'md';\n\nconst KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING =\n '[Kirby Badge] The `text` property has been deprecated. Please set the text of the Badge between the opening and closing tag.';\n\n@Component({\n selector: 'kirby-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n ~~standalone: true,\n~~ imports: [CommonModule, IonBadge],\n hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }],\n})\nexport class BadgeComponent {\n private _text: string;\n get text(): string {\n return this._text;\n }\n /*\n @deprecated The 'text' property has been deprecated.\n * Please set the text of the Badge between the opening and closing tag.\n /\n @Input() set text(value: string) {\n console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);\n this._text = value;\n }\n\n @HostBinding('class')\n @Input()\n size: BadgeSize = 'md';\n}\n","<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","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,6CAA6C,GACjD,8HAA8H~~,CAAC~~;~~MAUpH~~,cAAc,CAAA;~~AAR3B~~,IAAA,WAAA,GAAA;~~QAwBE~~,IAAI,CAAA,IAAA,GAAc,IAAI~~,CAAC~~;~~AACxB,KAAA~~;AAfC,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,KAAK~~,CAAC;KACnB;AACD~~;;;AAGG;IACH,IAAa,IAAI,CAAC,KAAa,EAAA;AAC7B,QAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC~~,CAAC~~;~~AAC5D~~,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,~~CAAC;KACpB;kIAZU,~~cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA~~,EAAA~~;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~SAAA~~,EAAA,IAAA,EAAA,cAAc,~~EClB3B~~,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+MAKA,~~EDUY~~,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,mIAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA~~,EAAA~~;;~~4FAGrB~~,cAAc,EAAA,UAAA,EAAA,CAAA;~~kBAR1B~~,SAAS~~;+BACE~~,~~aAAa~~,EAAA,~~UAAA~~,~~EAGX~~,~~IAAI~~,~~EACP~~,~~OAAA~~,~~EAAA~~,CAAC,YAAY,EAAE,QAAQ,CAAC,~~EACjB~~,~~cAAA,EAAA,~~CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,+MAAA,EAAA,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA~~,CAAA~~;8BAW/D,IAAI,EAAA,CAAA;sBAAhB~~,KAAK~~;~~gBAON~~,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO~~,CAAA~~;;sBACnB~~,KAAK~~;;;~~AEjCR~~;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-badge.mjs","sources":["../../badge/src/badge.component.ts","../../badge/src/badge.component.html","../../badge/src/kirbydesign-designsystem-badge.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonBadge } from '@ionic/angular/standalone';\n\nexport type BadgeSize = 'sm' \| 'md';\n\nconst KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING =\n '[Kirby Badge] The `text` property has been deprecated. Please set the text of the Badge between the opening and closing tag.';\n\n@Component({\n selector: 'kirby-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n imports: [CommonModule, IonBadge],\n hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }],\n})\nexport class BadgeComponent {\n private _text: string;\n get text(): string {\n return this._text;\n }\n /*\n @deprecated The 'text' property has been deprecated.\n * Please set the text of the Badge between the opening and closing tag.\n /\n @Input() set text(value: string) {\n console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);\n this._text = value;\n }\n\n @HostBinding('class')\n @Input()\n size: BadgeSize = 'md';\n}\n","<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","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,6CAA6C,GACjD,8HAA8H;MASnH,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;QAuBE,IAAI,CAAA,IAAA,GAAc,IAAI;AACvB;AAfC,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,KAAK;;AAEnB;;;AAGG;IACH,IAAa,IAAI,CAAC,KAAa,EAAA;AAC7B,QAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;AAC3D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;iIAXT,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,ECjB3B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+MAKA,EDSY,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,mIAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGrB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WAGd,CAAC,YAAY,EAAE,QAAQ,CAAC,kBACjB,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,+MAAA,EAAA,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA;8BAW/D,IAAI,EAAA,CAAA;sBAAhB;gBAOD,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO;;sBACnB;;;AEhCH;;AAEG;;;;"}

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

@@ -108,12 +108,12 @@ class ButtonComponent {
             event.stopImmediatePropagation();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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: { listeners: { "keydown.enter": "_onEnterOrSpace($event)", "keydown.space": "_onEnterOrSpace($event)" }, 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}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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{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.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){position:absolute;scale:0}:host.xs{position:relative}: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{font-size:12px;height:24px;min-width:44px}: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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]: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:16px 0}: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: "19.1.4", 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: "19.1.4", 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: { listeners: { "keydown.enter": "_onEnterOrSpace($event)", "keydown.space": "_onEnterOrSpace($event)" }, 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}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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{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.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){position:absolute;scale:0}:host.xs{position:relative}: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{font-size:12px;height:24px;min-width:44px}: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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]: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:16px 0}: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: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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{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.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){position:absolute;scale:0}:host.xs{position:relative}: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{font-size:12px;height:24px;min-width:44px}: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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]: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:16px 0}: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"] }]
+            args: [{ 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}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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{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.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){position:absolute;scale:0}:host.xs{position:relative}: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{font-size:12px;height:24px;min-width:44px}: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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]: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:16px 0}: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: [{
                 type: Input
             }], noDecoration: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type AttentionLevel = '1' \| '2' \| '3';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n @Input() attentionLevel: AttentionLevel;\n\n @HostBinding('class.no-decoration')\n @Input()\n noDecoration = false;\n\n @HostBinding('class.floating')\n public get isButtonFloating(): boolean {\n return this.isFloating;\n }\n\n @HostBinding('class.icon-only')\n public get isIconOnly(): boolean {\n return !!this.iconElementRef && this.showIconOnly;\n }\n private _isIconLeft = false;\n @HostBinding('class.icon-left')\n public get isIconLeft() {\n return this._isIconLeft && !this.showIconOnly;\n }\n private _isIconRight = false;\n @HostBinding('class.icon-right')\n public get isIconRight() {\n return this._isIconRight && !this.showIconOnly;\n }\n\n @HostBinding('class')\n get _cssClass() {\n const attentionLevel = this.getAttentionLevelCssClass();\n return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n }\n\n private getAttentionLevelCssClass() {\n if (this.noDecoration) return;\n const attentionLevelDefault: AttentionLevel = '1';\n return `attention-level${this.attentionLevel \|\| attentionLevelDefault}`;\n }\n\n @Input()\n themeColor: NotificationColor;\n @Input() expand: 'full' \| 'block';\n @Input() isFloating: boolean = false;\n @Input()\n size: ButtonSize \| `${ButtonSize}` = ButtonSize.MD;\n\n private _showIconOnly: boolean = false;\n get showIconOnly() {\n return this._showIconOnly;\n }\n @Input() set showIconOnly(value: boolean) {\n if (value) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(this.iconElementRef?.nativeElement);\n }\n this._showIconOnly = value;\n }\n\n @ContentChild(IconComponent, { read: ElementRef })\n iconElementRef?: ElementRef<HTMLElement>;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n private wrapTextNode(iconElement?: HTMLElement) {\n if (!iconElement) {\n return;\n }\n\n const ifTextNode = (node?: ChildNode): ChildNode \| undefined => {\n return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n };\n\n const textNode = ifTextNode(iconElement.previousSibling) \|\| ifTextNode(iconElement.nextSibling);\n if (textNode) {\n const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n const textWrapper = this.renderer.createElement('span');\n const parent = textNode.parentNode;\n this.renderer.removeChild(textNode.parentNode, textNode);\n this.renderer.appendChild(textWrapper, textNode);\n if (placement === 'before') {\n this.renderer.insertBefore(parent, textWrapper, iconElement);\n } else if (placement === 'after') {\n this.renderer.appendChild(parent, textWrapper);\n }\n }\n }\n\n ngAfterContentInit(): void {\n const iconElement = this.iconElementRef?.nativeElement;\n\n if (iconElement === undefined) {\n // Nothing to do here when there's no icon:\n return;\n }\n\n // Ensure buttons with icon is always shown as icon only inside the toolbar:\n if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n this._showIconOnly = true;\n }\n\n if (this.showIconOnly) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(iconElement);\n }\n\n const hasText = !!this.elementRef.nativeElement.textContent;\n if (!hasText) {\n // Button doesn't contain any text, make it round:\n this._showIconOnly = true;\n }\n\n if (hasText && !this.showIconOnly) {\n this._isIconLeft =\n this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n this._isIconRight = !this._isIconLeft;\n }\n }\n\n @HostListener('keydown.enter', ['$event'])\n @HostListener('keydown.space', ['$event'])\n _onEnterOrSpace(event: KeyboardEvent) {\n if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n}\n","<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","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type AttentionLevel = '1' \| '2' \| '3';\n\n@Component({\n imports: [CommonModule],\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n @Input() attentionLevel: AttentionLevel;\n\n @HostBinding('class.no-decoration')\n @Input()\n noDecoration = false;\n\n @HostBinding('class.floating')\n public get isButtonFloating(): boolean {\n return this.isFloating;\n }\n\n @HostBinding('class.icon-only')\n public get isIconOnly(): boolean {\n return !!this.iconElementRef && this.showIconOnly;\n }\n private _isIconLeft = false;\n @HostBinding('class.icon-left')\n public get isIconLeft() {\n return this._isIconLeft && !this.showIconOnly;\n }\n private _isIconRight = false;\n @HostBinding('class.icon-right')\n public get isIconRight() {\n return this._isIconRight && !this.showIconOnly;\n }\n\n @HostBinding('class')\n get _cssClass() {\n const attentionLevel = this.getAttentionLevelCssClass();\n return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n }\n\n private getAttentionLevelCssClass() {\n if (this.noDecoration) return;\n const attentionLevelDefault: AttentionLevel = '1';\n return `attention-level${this.attentionLevel \|\| attentionLevelDefault}`;\n }\n\n @Input()\n themeColor: NotificationColor;\n @Input() expand: 'full' \| 'block';\n @Input() isFloating: boolean = false;\n @Input()\n size: ButtonSize \| `${ButtonSize}` = ButtonSize.MD;\n\n private _showIconOnly: boolean = false;\n get showIconOnly() {\n return this._showIconOnly;\n }\n @Input() set showIconOnly(value: boolean) {\n if (value) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(this.iconElementRef?.nativeElement);\n }\n this._showIconOnly = value;\n }\n\n @ContentChild(IconComponent, { read: ElementRef })\n iconElementRef?: ElementRef<HTMLElement>;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n private wrapTextNode(iconElement?: HTMLElement) {\n if (!iconElement) {\n return;\n }\n\n const ifTextNode = (node?: ChildNode): ChildNode \| undefined => {\n return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n };\n\n const textNode = ifTextNode(iconElement.previousSibling) \|\| ifTextNode(iconElement.nextSibling);\n if (textNode) {\n const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n const textWrapper = this.renderer.createElement('span');\n const parent = textNode.parentNode;\n this.renderer.removeChild(textNode.parentNode, textNode);\n this.renderer.appendChild(textWrapper, textNode);\n if (placement === 'before') {\n this.renderer.insertBefore(parent, textWrapper, iconElement);\n } else if (placement === 'after') {\n this.renderer.appendChild(parent, textWrapper);\n }\n }\n }\n\n ngAfterContentInit(): void {\n const iconElement = this.iconElementRef?.nativeElement;\n\n if (iconElement === undefined) {\n // Nothing to do here when there's no icon:\n return;\n }\n\n // Ensure buttons with icon is always shown as icon only inside the toolbar:\n if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n this._showIconOnly = true;\n }\n\n if (this.showIconOnly) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(iconElement);\n }\n\n const hasText = !!this.elementRef.nativeElement.textContent;\n if (!hasText) {\n // Button doesn't contain any text, make it round:\n this._showIconOnly = true;\n }\n\n if (hasText && !this.showIconOnly) {\n this._isIconLeft =\n this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n this._isIconRight = !this._isIconLeft;\n }\n }\n\n @HostListener('keydown.enter', ['$event'])\n @HostListener('keydown.space', ['$event'])\n _onEnterOrSpace(event: KeyboardEvent) {\n if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n}\n","<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","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -405,6 +405,7 @@ class CalendarComponent {
     focusDate(newDate) {
         if (!newDate)
             return;
+        newDate = this.normalizeDate(newDate);
         if (this.timezone === 'UTC') {
             newDate = fromZonedTime(this.subtractTimezoneOffset(newDate), this.timeZoneName);
         }
@@ -458,12 +459,12 @@ class CalendarComponent {
         event.preventDefault();
         this.focusDate(newDate);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, deps: [{ token: LOCALE_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    [attr.aria-label]=\"translations.get('selectYear')\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n        <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n        <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n        <button\n          kirby-button\n          type=\"button\"\n          (click)=\"_onDateSelected(day)\"\n          (keydown)=\"_onDateKeydown($event)\"\n          class=\"day\"\n          [class.current-month]=\"day.isCurrentMonth\"\n          [class.weekend]=\"day.isWeekend\"\n          [class.today]=\"day.isToday\"\n          [class.selectable]=\"day.isSelectable\"\n          [class.selected]=\"day.isSelected\"\n          [class.focussed]=\"day.isFocussed\"\n          [class.past]=\"day.isPast\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n          [noDecoration]=\"true\"\n          [disabled]=\"day.isFocusable ? null : true\"\n          [tabIndex]=\"day.isFocussed ? 0 : -1\"\n        >\n          {{ day.date }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}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-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{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;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CalendarComponent, deps: [{ token: LOCALE_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    [attr.aria-label]=\"translations.get('selectYear')\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n        <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n        <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n        <button\n          kirby-button\n          type=\"button\"\n          (click)=\"_onDateSelected(day)\"\n          (keydown)=\"_onDateKeydown($event)\"\n          class=\"day\"\n          [class.current-month]=\"day.isCurrentMonth\"\n          [class.weekend]=\"day.isWeekend\"\n          [class.today]=\"day.isToday\"\n          [class.selectable]=\"day.isSelectable\"\n          [class.selected]=\"day.isSelected\"\n          [class.focussed]=\"day.isFocussed\"\n          [class.past]=\"day.isPast\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n          [noDecoration]=\"true\"\n          [disabled]=\"day.isFocusable ? null : true\"\n          [tabIndex]=\"day.isFocussed ? 0 : -1\"\n        >\n          {{ day.date }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}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-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{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;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    [attr.aria-label]=\"translations.get('selectYear')\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n        <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n        <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n        <button\n          kirby-button\n          type=\"button\"\n          (click)=\"_onDateSelected(day)\"\n          (keydown)=\"_onDateKeydown($event)\"\n          class=\"day\"\n          [class.current-month]=\"day.isCurrentMonth\"\n          [class.weekend]=\"day.isWeekend\"\n          [class.today]=\"day.isToday\"\n          [class.selectable]=\"day.isSelectable\"\n          [class.selected]=\"day.isSelected\"\n          [class.focussed]=\"day.isFocussed\"\n          [class.past]=\"day.isPast\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n          [noDecoration]=\"true\"\n          [disabled]=\"day.isFocusable ? null : true\"\n          [tabIndex]=\"day.isFocussed ? 0 : -1\"\n        >\n          {{ day.date }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}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-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{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;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\n"] }]
+            args: [{ imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    [attr.aria-label]=\"translations.get('selectYear')\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n        <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n        <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n        <button\n          kirby-button\n          type=\"button\"\n          (click)=\"_onDateSelected(day)\"\n          (keydown)=\"_onDateKeydown($event)\"\n          class=\"day\"\n          [class.current-month]=\"day.isCurrentMonth\"\n          [class.weekend]=\"day.isWeekend\"\n          [class.today]=\"day.isToday\"\n          [class.selectable]=\"day.isSelectable\"\n          [class.selected]=\"day.isSelected\"\n          [class.focussed]=\"day.isFocussed\"\n          [class.past]=\"day.isPast\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n          [noDecoration]=\"true\"\n          [disabled]=\"day.isFocusable ? null : true\"\n          [tabIndex]=\"day.isFocussed ? 0 : -1\"\n        >\n          {{ day.date }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}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-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{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;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]