npm - @kirbydesign/designsystem - Versions diffs - 10.0.0 → 10.1.1 - Mend

@kirbydesign/designsystem 10.0.0 → 10.1.1

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

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

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

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

@@ -9,10 +9,10 @@ class CardFooterComponent {
     constructor() {
         this.hasPadding = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: CardFooterComponent, selector: "kirby-card-footer", inputs: { hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding" } }, ngImport: i0, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:16px}footer{display:inherit;flex:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CardFooterComponent, selector: "kirby-card-footer", inputs: { hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding" } }, ngImport: i0, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:16px}footer{display:inherit;flex:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-card-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:16px}footer{display:inherit;flex:inherit}\n"] }]
         }], propDecorators: { hasPadding: [{
@@ -30,10 +30,10 @@ class CardHeaderComponent {
     get _cssClass() {
         return [this.flagged, this.flagged ? 'flagged' : null];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
         }], propDecorators: { title: [{
@@ -102,12 +102,12 @@ class CardComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", variant: "variant" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class": "this.variant" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", variant: "variant" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class": "this.variant" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host{border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host[role=button]{outline:none}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
+            args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host{border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host[role=button]{outline:none}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.ResizeObserverService }, { type: i0.Renderer2 }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -151,10 +151,10 @@ class CardAsButtonDirective {
     _onInactiveHandler() {
         this._pressed = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardAsButtonDirective, deps: [{ token: CardComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: CardAsButtonDirective, selector: "kirby-card[click]", host: { listeners: { "keydown.space": "_onKeydownHandler($event)", "keydown.enter": "_onKeydownHandler($event)", "keyup.space": "_onInactiveHandler()", "keyup.enter": "_onInactiveHandler()", "blur": "_onInactiveHandler()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.interaction-state-active": "this._pressed" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardAsButtonDirective, deps: [{ token: CardComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: CardAsButtonDirective, selector: "kirby-card[click]", host: { listeners: { "keydown.space": "_onKeydownHandler($event)", "keydown.enter": "_onKeydownHandler($event)", "keyup.space": "_onInactiveHandler()", "keyup.enter": "_onInactiveHandler()", "blur": "_onInactiveHandler()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.interaction-state-active": "this._pressed" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardAsButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardAsButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -195,17 +195,17 @@ const declarations = [
     CardAsButtonDirective,
 ];
 class CardModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: CardModule, declarations: [CardComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: CardModule, declarations: [CardComponent,
             CardFooterComponent,
             CardHeaderComponent,
             CardAsButtonDirective], imports: [CommonModule, ThemeColorDirective], exports: [CardComponent,
             CardFooterComponent,
             CardHeaderComponent,
             CardAsButtonDirective, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ThemeColorDirective],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../card/src/card-footer/card-footer.component.ts","../../card/src/card-footer/card-footer.component.html","../../card/src/card-header/card-header.component.ts","../../card/src/card-header/card-header.component.html","../../card/src/card.component.ts","../../card/src/card.component.html","../../card/src/card-as-button/card-as-button.directive.ts","../../card/src/card.module.ts","../../card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","<header>\n <h2 ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n","import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n @HostBinding('class')\n @Input()\n variant: 'elevated' \| 'flat' \| 'outlined' = 'elevated';\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n @HostBinding('class.interaction-state-active') _pressed = false;\n\n constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n if (event.currentTarget !== event.target) return; // Do not handle keydown events for nested elements - let event bubbling take place as normal\n\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /\n Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n /\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n CardComponent,\n CardFooterComponent,\n CardHeaderComponent,\n CardAsButtonDirective,\n];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective],\n declarations: [...declarations],\n exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../card/src/card-footer/card-footer.component.ts","../../card/src/card-footer/card-footer.component.html","../../card/src/card-header/card-header.component.ts","../../card/src/card-header/card-header.component.html","../../card/src/card.component.ts","../../card/src/card.component.html","../../card/src/card-as-button/card-as-button.directive.ts","../../card/src/card.module.ts","../../card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","<header>\n <h2 ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n","import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n @HostBinding('class')\n @Input()\n variant: 'elevated' \| 'flat' \| 'outlined' = 'elevated';\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n @HostBinding('class.interaction-state-active') _pressed = false;\n\n constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n if (event.currentTarget !== event.target) return; // Do not handle keydown events for nested elements - let event bubbling take place as normal\n\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /\n Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n /\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n CardComponent,\n CardFooterComponent,\n CardHeaderComponent,\n CardAsButtonDirective,\n];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective],\n declarations: [...declarations],\n exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}

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

@@ -324,10 +324,10 @@ class ChartConfigService {
             },
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartConfigService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartConfigService, decorators: [{
             type: Injectable
         }] });
@@ -800,10 +800,10 @@ class ChartJSService {
             return this.getDefaultLabels(datasets);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartJSService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartJSService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartJSService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartJSService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ChartConfigService }] });
@@ -1065,10 +1065,10 @@ class BaseChartComponent {
     ngOnDestroy() {
         this.chartJSService.destroyChart();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: BaseChartComponent, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: BaseChartComponent, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BaseChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-base-chart', template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
         }], ctorParameters: () => [{ type: ChartJSService }], propDecorators: { type: [{
@@ -1098,10 +1098,10 @@ class ChartComponent extends BaseChartComponent {
         super(...arguments);
         this.type = 'column';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ChartComponent, selector: "kirby-chart", inputs: { type: "type" }, providers: [ChartJSService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ChartComponent, selector: "kirby-chart", inputs: { type: "type" }, providers: [ChartJSService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-chart', providers: [ChartJSService], template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
         }], propDecorators: { type: [{
@@ -1196,10 +1196,10 @@ class StockChartJSService extends ChartJSService {
         });
         return { value, pointer };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StockChartJSService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StockChartJSService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StockChartJSService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StockChartJSService, decorators: [{
             type: Injectable
         }] });
@@ -1211,10 +1211,10 @@ class StockChartComponent extends BaseChartComponent {
     renderChart() {
         super.renderChart({ dataLabelOptions: this.dataLabelOptions });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: StockChartComponent, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: StockChartComponent, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StockChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StockChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-stock-chart', providers: [{ provide: ChartJSService, useClass: StockChartJSService }], template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
         }], propDecorators: { dataLabelOptions: [{
@@ -1222,11 +1222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }] } });
 class ChartsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: ChartsModule, declarations: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: ChartsModule, declarations: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ChartsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ChartsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ChartComponent, StockChartComponent],

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

@@ -6,6 +6,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@kirbydesign/designsystem/helpers';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
 import { IonCheckbox } from '@ionic/angular/standalone';
+import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
 class CheckboxComponent {
     get _isDisabled() {
@@ -35,8 +36,16 @@ class CheckboxComponent {
         this._onTouched = () => { };
     }
     ngOnInit() {
+        /**
+         * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.
+         * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.
+         * So it has to be done by querying an additional wrapper around the default content slot like this.
+         */
+        this._hasSlottedContent = this.element.nativeElement
+            .querySelector('.default-content')
+            .hasChildNodes();
         const slot = this.element.nativeElement.getAttribute('slot');
-        if (slot === 'end') {
+        if (slot === 'end' && this._hasSlottedContent) {
             this._justify = 'space-between';
             this._labelPlacement = 'start';
         }
@@ -46,6 +55,13 @@ class CheckboxComponent {
         this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionCheckboxElement, '.label-text-wrapper');
         this.ionicElementPartHelper.setPart('native-wrapper', this.ionCheckboxElement, '.native-wrapper');
     }
+    ngAfterContentInit() {
+        this._labelText = inheritAriaLabelText(this.element.nativeElement);
+        if (!this.text && !this._labelText && !this._hasSlottedContent) {
+            // if no label has been set try to find a label in an item and use its text content
+            this._labelText = setAccessibleLabel(this.element.nativeElement);
+        }
+    }
     onChecked(checked) {
         this.checked = checked;
         this._onChange(this.checked);
@@ -92,17 +108,17 @@ class CheckboxComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.has-hidden-label": "this._labelText" } }, providers: [
             IonicElementPartHelper,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => CheckboxComponent)),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n  <ng-content></ng-content>\n</ion-checkbox>\n", styles: [":host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #2dc172;--border-color-checked: #2dc172}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #29ae67;--border-color-checked: #29ae67}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  <span class=\"hidden-label\" *ngIf=\"_labelText\">{{ _labelText }}</span>\n  <span *ngIf=\"text\">{{ text }}</span>\n  <span class=\"default-content\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [":host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--border-color-checked: rgb(45.030660793, 192.689339207, 114.1474889868)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--border-color-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(91.56, 91.56, 91.56);--border-color-checked: rgb(91.56, 91.56, 91.56)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(234.6, 234.6, 234.6);--checkbox-background-checked: rgb(109.72, 109.72, 109.72);--border-color-checked: rgb(109.72, 109.72, 109.72)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(234.6, 234.6, 234.6)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(224.4, 224.4, 224.4)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label{position:initial}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label ion-checkbox{position:initial}:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         IonicElementPartHelper,
@@ -111,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                             useExisting: forwardRef((() => CheckboxComponent)),
                             multi: true,
                         },
-                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  <span *ngIf=\"text\">{{ text }}</span>\n  <ng-content></ng-content>\n</ion-checkbox>\n", styles: [":host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #2dc172;--border-color-checked: #2dc172}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #29ae67;--border-color-checked: #29ae67}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
+                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  <span class=\"hidden-label\" *ngIf=\"_labelText\">{{ _labelText }}</span>\n  <span *ngIf=\"text\">{{ text }}</span>\n  <span class=\"default-content\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [":host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--border-color-checked: rgb(45.030660793, 192.689339207, 114.1474889868)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--border-color-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(91.56, 91.56, 91.56);--border-color-checked: rgb(91.56, 91.56, 91.56)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(234.6, 234.6, 234.6);--checkbox-background-checked: rgb(109.72, 109.72, 109.72);--border-color-checked: rgb(109.72, 109.72, 109.72)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(234.6, 234.6, 234.6)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(224.4, 224.4, 224.4)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label{position:initial}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label ion-checkbox{position:initial}:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }], propDecorators: { ionCheckboxElement: [{
                 type: ViewChild,
                 args: [IonCheckbox, { read: ElementRef, static: true }]
@@ -142,6 +158,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], isAttentionLevel2: [{
                 type: HostBinding,
                 args: ['class.attention-level2']
+            }], _labelText: [{
+                type: HostBinding,
+                args: ['class.has-hidden-label']
             }], checkedChange: [{
                 type: Output
             }] } });