@kirbydesign/designsystem 11.11.2-dev-5e0acd6 → 11.11.2-dev-f528d7a
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.
- package/data-grid/package.json +4 -0
- package/data-grid-composable/package.json +4 -0
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-accordion.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +4 -12
- package/fesm2022/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-badge.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-button.mjs +6 -5
- package/fesm2022/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +21 -53
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +7 -19
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-grid-composable.mjs +162 -0
- package/fesm2022/kirbydesign-designsystem-data-grid-composable.mjs.map +1 -0
- package/fesm2022/kirbydesign-designsystem-data-grid.mjs +42 -0
- package/fesm2022/kirbydesign-designsystem-data-grid.mjs.map +1 -0
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-divider.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-divider.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +8 -21
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-flag.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-flag.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +44 -34
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-gesture.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-gesture.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-header.mjs +20 -20
- package/fesm2022/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +19 -12
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +43 -53
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-modal.mjs +51 -56
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +46 -46
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +27 -64
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-section-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +27 -29
- package/fesm2022/kirbydesign-designsystem-shared.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs +15 -14
- package/fesm2022/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-spinner.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +17 -17
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +287 -289
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-testing.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toast.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toast.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +11 -10
- package/fesm2022/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/person-blocked.svg +3 -0
- package/icons/svg/person-check.svg +3 -0
- package/icons/svg/person-close.svg +3 -0
- package/icons/svg/person-cloud.svg +3 -0
- package/icons/svg/person-power.svg +3 -0
- package/icons/svg/person-warning.svg +3 -0
- package/icons/svg/phone-device-pin.svg +3 -0
- package/icons/svg/phone-device.svg +3 -2
- package/package.json +14 -4
- package/types/kirbydesign-designsystem-avatar.d.ts +1 -5
- package/types/kirbydesign-designsystem-avatar.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-button.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-card.d.ts +2 -12
- package/types/kirbydesign-designsystem-card.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-checkbox.d.ts +1 -7
- package/types/kirbydesign-designsystem-checkbox.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-data-grid-composable.d.ts +48 -0
- package/types/kirbydesign-designsystem-data-grid-composable.d.ts.map +1 -0
- package/types/kirbydesign-designsystem-data-grid.d.ts +16 -0
- package/types/kirbydesign-designsystem-data-grid.d.ts.map +1 -0
- package/types/kirbydesign-designsystem-empty-state.d.ts +1 -8
- package/types/kirbydesign-designsystem-empty-state.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-fab-sheet.d.ts +1 -1
- package/types/kirbydesign-designsystem-form-field.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-item-sliding.d.ts +1 -1
- package/types/kirbydesign-designsystem-item.d.ts +1 -1
- package/types/kirbydesign-designsystem-kirby-app.d.ts +1 -1
- package/types/kirbydesign-designsystem-list.d.ts +2 -12
- package/types/kirbydesign-designsystem-list.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-loading-overlay.d.ts +1 -1
- package/types/kirbydesign-designsystem-modal.d.ts +2 -3
- package/types/kirbydesign-designsystem-modal.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-page.d.ts +2 -2
- package/types/kirbydesign-designsystem-page.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-progress-circle.d.ts +5 -29
- package/types/kirbydesign-designsystem-progress-circle.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-radio.d.ts +1 -1
- package/types/kirbydesign-designsystem-router-outlet.d.ts +2 -2
- package/types/kirbydesign-designsystem-shared.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-tabs.d.ts +3 -3
- package/types/kirbydesign-designsystem-testing-base.d.ts +9 -10
- package/types/kirbydesign-designsystem-testing-base.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-toast.d.ts +1 -1
- package/types/kirbydesign-designsystem.d.ts +1 -0
- package/types/kirbydesign-designsystem.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, HostListener, Directive,
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, HostListener, Directive, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@kirbydesign/designsystem/shared';
|
|
4
4
|
import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
@@ -8,10 +8,10 @@ class CardFooterComponent {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
this.hasPadding = true;
|
|
10
10
|
}
|
|
11
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
11
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: CardFooterComponent, isStandalone: true, 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:var(--kirby-spacing-s);padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:var(--kirby-spacing-s)}footer{display:inherit;flex:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'kirby-card-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer>\n <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:var(--kirby-spacing-s);padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:var(--kirby-spacing-s)}footer{display:inherit;flex:inherit}\n"] }]
|
|
17
17
|
}], propDecorators: { hasPadding: [{
|
|
@@ -29,12 +29,12 @@ class CardHeaderComponent {
|
|
|
29
29
|
get _cssClass() {
|
|
30
30
|
return [this.flagged, this.flagged ? 'flagged' : null];
|
|
31
31
|
}
|
|
32
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
33
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
32
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: CardHeaderComponent, isStandalone: true, 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: "@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block;border-top-left-radius:var(--kirby-border-radius-n);border-top-right-radius:var(--kirby-border-radius-n);text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-success-tint)}:host.warning{--kirby-card-header-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-card-header-background-color: var(--kirby-danger-tint)}:host.info{--kirby-card-header-background-color: var(--kirby-semi-light)}:host{--kirby-card-header-color: var(--kirby-black)}.title{margin-bottom:var(--kirby-internal-card-header-margin-bottom, var(--kirby-spacing-s));line-height:var(--kirby-internal-card-header-line-height)}.title.bold{font-weight:var(--kirby-font-weight-bold)}.subtitle{font-size:var(--kirby-font-size-s);margin-bottom:0}:host:has(.subtitle) .title{margin-top:var(--kirby-spacing-xxxs)}:host(.flagged){--kirby-internal-card-header-padding: var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs)}:host(.flagged) p{--kirby-internal-card-header-line-height: var(--kirby-line-height-n);--kirby-internal-card-header-margin-bottom: 0px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-
|
|
37
|
+
args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block;border-top-left-radius:var(--kirby-border-radius-n);border-top-right-radius:var(--kirby-border-radius-n);text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-success-tint)}:host.warning{--kirby-card-header-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-card-header-background-color: var(--kirby-danger-tint)}:host.info{--kirby-card-header-background-color: var(--kirby-semi-light)}:host{--kirby-card-header-color: var(--kirby-black)}.title{margin-bottom:var(--kirby-internal-card-header-margin-bottom, var(--kirby-spacing-s));line-height:var(--kirby-internal-card-header-line-height)}.title.bold{font-weight:var(--kirby-font-weight-bold)}.subtitle{font-size:var(--kirby-font-size-s);margin-bottom:0}:host:has(.subtitle) .title{margin-top:var(--kirby-spacing-xxxs)}:host(.flagged){--kirby-internal-card-header-padding: var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs)}:host(.flagged) p{--kirby-internal-card-header-line-height: var(--kirby-line-height-n);--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
|
|
38
38
|
}], propDecorators: { title: [{
|
|
39
39
|
type: Input
|
|
40
40
|
}], subtitle: [{
|
|
@@ -75,10 +75,10 @@ class CardAsButtonDirective {
|
|
|
75
75
|
_onInactiveHandler() {
|
|
76
76
|
this._pressed = false;
|
|
77
77
|
}
|
|
78
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
79
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
78
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardAsButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: CardAsButtonDirective, isStandalone: true, 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 }); }
|
|
80
80
|
}
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardAsButtonDirective, decorators: [{
|
|
82
82
|
type: Directive,
|
|
83
83
|
args: [{
|
|
84
84
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -110,14 +110,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
110
110
|
args: ['blur']
|
|
111
111
|
}] } });
|
|
112
112
|
|
|
113
|
-
const variantSurfaces = {
|
|
114
|
-
elevated: 'raised',
|
|
115
|
-
flat: 'raised',
|
|
116
|
-
outlined: 'base',
|
|
117
|
-
base: 'base',
|
|
118
|
-
raised: 'raised',
|
|
119
|
-
brand: 'brand',
|
|
120
|
-
};
|
|
121
113
|
class CardComponent {
|
|
122
114
|
set backgroundImageUrl(value) {
|
|
123
115
|
this._backgroundImage = `url('${value}')`;
|
|
@@ -128,38 +120,15 @@ class CardComponent {
|
|
|
128
120
|
}
|
|
129
121
|
this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
|
|
130
122
|
}
|
|
131
|
-
get hostClasses() {
|
|
132
|
-
const surface = this.surface;
|
|
133
|
-
return surface ? `${this.variant} kirby-surface-${surface}` : this.variant;
|
|
134
|
-
}
|
|
135
|
-
get surface() {
|
|
136
|
-
const theme = this.themeColor;
|
|
137
|
-
if (!theme || theme.isDefault || this.variant === 'outlined') {
|
|
138
|
-
return variantSurfaces[this.variant];
|
|
139
|
-
}
|
|
140
|
-
if (theme.isLight || theme.isMedium)
|
|
141
|
-
return 'base';
|
|
142
|
-
if (theme.isWhite || theme.isSuccess || theme.isWarning || theme.isDanger)
|
|
143
|
-
return 'raised';
|
|
144
|
-
if (theme.isPrimary || theme.isSecondary || theme.isTertiary || theme.isDark)
|
|
145
|
-
return 'brand';
|
|
146
|
-
return null;
|
|
147
|
-
}
|
|
148
123
|
constructor(elementRef, resizeObserverService, renderer) {
|
|
149
124
|
this.elementRef = elementRef;
|
|
150
125
|
this.resizeObserverService = resizeObserverService;
|
|
151
126
|
this.renderer = renderer;
|
|
152
|
-
this.themeColor = inject(ThemeColorDirective, { optional: true, self: true });
|
|
153
127
|
this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
|
|
154
128
|
small: 360,
|
|
155
129
|
medium: 720,
|
|
156
130
|
large: 1024,
|
|
157
131
|
});
|
|
158
|
-
/**
|
|
159
|
-
* `base`, `raised` and `brand` set the surface directly.
|
|
160
|
-
* `elevated` (default) and `flat` are raised surfaces, `outlined` is a base surface.
|
|
161
|
-
* A `themeColor` takes precedence over the surface of the variant.
|
|
162
|
-
*/
|
|
163
132
|
this.variant = 'elevated';
|
|
164
133
|
}
|
|
165
134
|
ngOnInit() {
|
|
@@ -189,12 +158,12 @@ class CardComponent {
|
|
|
189
158
|
});
|
|
190
159
|
}
|
|
191
160
|
}
|
|
192
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
193
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
161
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
162
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: CardComponent, isStandalone: true, 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}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-color-hover: 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-inputs-color-hover: 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-color-hover: 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:var(--kirby-border-radius-n);box-shadow:var(--kirby-elevation-2);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:var(--kirby-z-index-default);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:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}: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, var(--kirby-z-index-default))}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;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)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}:host[role=button]{outline:none}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: var(--kirby-border-radius-n)}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: var(--kirby-border-radius-n)}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}.content-layer{height:100%}:host(:not(.outlined)).primary{--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(:not(.outlined)).secondary{--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(:not(.outlined)).tertiary{--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(:not(.outlined)).success{--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(:not(.outlined)).warning{--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(:not(.outlined)).danger{--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(:not(.outlined)).white-overlay{--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(:not(.outlined)).light{--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(:not(.outlined)).medium{--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(:not(.outlined)).dark{--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(:not(.outlined)).dark-overlay{--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
|
|
194
163
|
}
|
|
195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardComponent, decorators: [{
|
|
196
165
|
type: Component,
|
|
197
|
-
args: [{ selector: 'kirby-card', template: "<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n
|
|
166
|
+
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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}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-color-hover: 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-inputs-color-hover: 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-color-hover: 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:var(--kirby-border-radius-n);box-shadow:var(--kirby-elevation-2);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:var(--kirby-z-index-default);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:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}: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, var(--kirby-z-index-default))}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;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)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}:host[role=button]{outline:none}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: var(--kirby-border-radius-n)}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: var(--kirby-border-radius-n)}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}.content-layer{height:100%}:host(:not(.outlined)).primary{--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(:not(.outlined)).secondary{--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(:not(.outlined)).tertiary{--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(:not(.outlined)).success{--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(:not(.outlined)).warning{--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(:not(.outlined)).danger{--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(:not(.outlined)).white-overlay{--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(:not(.outlined)).light{--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(:not(.outlined)).medium{--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(:not(.outlined)).dark{--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(:not(.outlined)).dark-overlay{--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
|
|
198
167
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ResizeObserverService }, { type: i0.Renderer2 }], propDecorators: { title: [{
|
|
199
168
|
type: Input
|
|
200
169
|
}], subtitle: [{
|
|
@@ -209,20 +178,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
209
178
|
}], sizes: [{
|
|
210
179
|
type: Input
|
|
211
180
|
}], variant: [{
|
|
212
|
-
type: Input,
|
|
213
|
-
args: [{ transform: (value) => value ?? 'elevated' }]
|
|
214
|
-
}], hostClasses: [{
|
|
215
181
|
type: HostBinding,
|
|
216
182
|
args: ['class']
|
|
183
|
+
}, {
|
|
184
|
+
type: Input
|
|
217
185
|
}] } });
|
|
218
186
|
|
|
219
187
|
const imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];
|
|
220
188
|
class CardModule {
|
|
221
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
222
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
223
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
189
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
190
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: CardModule, imports: [CommonModule, ThemeColorDirective, CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective], exports: [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective, ThemeColorDirective] }); }
|
|
191
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
|
|
224
192
|
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardModule, decorators: [{
|
|
226
194
|
type: NgModule,
|
|
227
195
|
args: [{
|
|
228
196
|
imports: [CommonModule, ThemeColorDirective, ...imports],
|
|
@@ -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-as-button/card-as-button.directive.ts","../../card/src/card.component.ts","../../card/src/card.component.html","../../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","@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n","import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';\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(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 {\n Component,\n ElementRef,\n HostBinding,\n inject,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService, ThemeColorDirective } from '@kirbydesign/designsystem/shared';\n\nexport type CardVariant = 'elevated' | 'flat' | 'outlined' | 'base' | 'raised' | 'brand';\n\nconst variantSurfaces: Record<CardVariant, string> = {\n elevated: 'raised',\n flat: 'raised',\n outlined: 'base',\n base: 'base',\n raised: 'raised',\n brand: 'brand',\n};\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 private themeColor = inject(ThemeColorDirective, { optional: true, self: true });\n\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 /**\n * `base`, `raised` and `brand` set the surface directly.\n * `elevated` (default) and `flat` are raised surfaces, `outlined` is a base surface.\n * A `themeColor` takes precedence over the surface of the variant.\n */\n @Input({ transform: (value: CardVariant | null | undefined) => value ?? 'elevated' })\n variant: CardVariant = 'elevated';\n\n @HostBinding('class')\n get hostClasses(): string {\n const surface = this.surface;\n return surface ? `${this.variant} kirby-surface-${surface}` : this.variant;\n }\n\n private get surface(): string | null {\n const theme = this.themeColor;\n if (!theme || theme.isDefault || this.variant === 'outlined') {\n return variantSurfaces[this.variant];\n }\n\n if (theme.isLight || theme.isMedium) return 'base';\n if (theme.isWhite || theme.isSuccess || theme.isWarning || theme.isDanger) return 'raised';\n if (theme.isPrimary || theme.isSecondary || theme.isTertiary || theme.isDark) return 'brand';\n return null;\n }\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","<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","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 imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective, ...imports],\n exports: [...imports, ThemeColorDirective],\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-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-as-button/card-as-button.directive.ts","../../card/src/card.component.ts","../../card/src/card.component.html","../../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","@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n","import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';\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(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 {\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 { 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 imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective, ...imports],\n exports: [...imports, ThemeColorDirective],\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -629,10 +629,10 @@ class ChartConfigService {
|
|
|
629
629
|
},
|
|
630
630
|
};
|
|
631
631
|
}
|
|
632
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
633
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
632
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
633
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartConfigService }); }
|
|
634
634
|
}
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartConfigService, decorators: [{
|
|
636
636
|
type: Injectable
|
|
637
637
|
}] });
|
|
638
638
|
|
|
@@ -800,10 +800,10 @@ class ChartJSService {
|
|
|
800
800
|
return this.getDefaultLabels(datasets);
|
|
801
801
|
}
|
|
802
802
|
}
|
|
803
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
804
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
803
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
804
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartJSService }); }
|
|
805
805
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartJSService, decorators: [{
|
|
807
807
|
type: Injectable
|
|
808
808
|
}], ctorParameters: () => [{ type: ChartConfigService }] });
|
|
809
809
|
|
|
@@ -1065,10 +1065,10 @@ class BaseChartComponent {
|
|
|
1065
1065
|
ngOnDestroy() {
|
|
1066
1066
|
this.chartJSService.destroyChart();
|
|
1067
1067
|
}
|
|
1068
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1069
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
1068
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1069
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: BaseChartComponent, isStandalone: true, 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"] }); }
|
|
1070
1070
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BaseChartComponent, decorators: [{
|
|
1072
1072
|
type: Component,
|
|
1073
1073
|
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"] }]
|
|
1074
1074
|
}], ctorParameters: () => [{ type: ChartJSService }], propDecorators: { type: [{
|
|
@@ -1098,10 +1098,10 @@ class ChartComponent extends BaseChartComponent {
|
|
|
1098
1098
|
super(...arguments);
|
|
1099
1099
|
this.type = 'column';
|
|
1100
1100
|
}
|
|
1101
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1102
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
1101
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1102
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ChartComponent, isStandalone: true, 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"] }); }
|
|
1103
1103
|
}
|
|
1104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartComponent, decorators: [{
|
|
1105
1105
|
type: Component,
|
|
1106
1106
|
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"] }]
|
|
1107
1107
|
}], propDecorators: { type: [{
|
|
@@ -1196,10 +1196,10 @@ class StockChartJSService extends ChartJSService {
|
|
|
1196
1196
|
});
|
|
1197
1197
|
return { value, pointer };
|
|
1198
1198
|
}
|
|
1199
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1200
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
1199
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1200
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartJSService }); }
|
|
1201
1201
|
}
|
|
1202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartJSService, decorators: [{
|
|
1203
1203
|
type: Injectable
|
|
1204
1204
|
}] });
|
|
1205
1205
|
|
|
@@ -1211,10 +1211,10 @@ class StockChartComponent extends BaseChartComponent {
|
|
|
1211
1211
|
renderChart() {
|
|
1212
1212
|
super.renderChart({ dataLabelOptions: this.dataLabelOptions });
|
|
1213
1213
|
}
|
|
1214
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1215
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
1214
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1215
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: StockChartComponent, isStandalone: true, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }, ChartConfigService], 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"] }); }
|
|
1216
1216
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartComponent, decorators: [{
|
|
1218
1218
|
type: Component,
|
|
1219
1219
|
args: [{ selector: 'kirby-stock-chart', providers: [{ provide: ChartJSService, useClass: StockChartJSService }, ChartConfigService], 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"] }]
|
|
1220
1220
|
}], propDecorators: { dataLabelOptions: [{
|
|
@@ -1222,11 +1222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
1222
1222
|
}] } });
|
|
1223
1223
|
|
|
1224
1224
|
class ChartsModule {
|
|
1225
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1226
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
1227
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
1225
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1226
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, imports: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
|
|
1227
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
|
|
1228
1228
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, decorators: [{
|
|
1230
1230
|
type: NgModule,
|
|
1231
1231
|
args: [{
|
|
1232
1232
|
imports: [ChartComponent, StockChartComponent],
|
|
@@ -3,22 +3,10 @@ import { EventEmitter, ElementRef, forwardRef, Output, HostBinding, Input, ViewC
|
|
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
import * as i1 from '@kirbydesign/designsystem/helpers';
|
|
5
5
|
import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
|
|
6
|
-
import { IonCheckbox } from '@ionic/angular
|
|
6
|
+
import { IonCheckbox } from '@ionic/angular';
|
|
7
7
|
import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
|
|
8
8
|
|
|
9
9
|
class CheckboxComponent {
|
|
10
|
-
/**
|
|
11
|
-
* @deprecated Attention levels 1 and 2 now look the same, so this input no longer has any effect.
|
|
12
|
-
* This input will be removed in a future major version.
|
|
13
|
-
*/
|
|
14
|
-
set attentionLevel(value) {
|
|
15
|
-
console.warn(`[Kirby Checkbox] The 'attentionLevel' input is deprecated and no longer has any effect.
|
|
16
|
-
Attention levels 1 and 2 now look the same. This input will be removed in a future major version.`);
|
|
17
|
-
this._attentionLevel = value;
|
|
18
|
-
}
|
|
19
|
-
get attentionLevel() {
|
|
20
|
-
return this._attentionLevel;
|
|
21
|
-
}
|
|
22
10
|
get _isDisabled() {
|
|
23
11
|
return this.disabled ? 'disabled' : null;
|
|
24
12
|
}
|
|
@@ -34,7 +22,7 @@ class CheckboxComponent {
|
|
|
34
22
|
this.cdr = cdr;
|
|
35
23
|
this.checked = false;
|
|
36
24
|
this.indeterminate = false;
|
|
37
|
-
this.
|
|
25
|
+
this.attentionLevel = '2';
|
|
38
26
|
this.size = 'md';
|
|
39
27
|
this.hasError = false;
|
|
40
28
|
this.disabled = false;
|
|
@@ -122,17 +110,17 @@ class CheckboxComponent {
|
|
|
122
110
|
this.disabled = isDisabled;
|
|
123
111
|
this.cdr.markForCheck();
|
|
124
112
|
}
|
|
125
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
126
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
113
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
114
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", 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: [
|
|
127
115
|
IonicElementPartHelper,
|
|
128
116
|
{
|
|
129
117
|
provide: NG_VALUE_ACCESSOR,
|
|
130
118
|
useExisting: forwardRef((() => CheckboxComponent)),
|
|
131
119
|
multi: true,
|
|
132
120
|
},
|
|
133
|
-
], 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 [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n @if (_labelText) {\n <span class=\"hidden-label\">{{ _labelText }}</span>\n }\n @if (text) {\n <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n }\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled] ion-checkbox::part(label-text-wrapper)
|
|
121
|
+
], 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 [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n @if (_labelText) {\n <span class=\"hidden-label\">{{ _labelText }}</span>\n }\n @if (text) {\n <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n }\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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-medium)}: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:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}:host ion-checkbox:focus-visible{outline:none;--border-width: 0;--border-color: transparent;--border-color-checked: transparent}:host ion-checkbox:focus-visible::part(container){padding:calc(var(--kirby-checkbox-container-padding) + 1px);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}@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: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}: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:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}: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: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
134
122
|
}
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
136
124
|
type: Component,
|
|
137
125
|
args: [{ imports: [IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
138
126
|
IonicElementPartHelper,
|
|
@@ -141,7 +129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
141
129
|
useExisting: forwardRef((() => CheckboxComponent)),
|
|
142
130
|
multi: true,
|
|
143
131
|
},
|
|
144
|
-
], template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n @if (_labelText) {\n <span class=\"hidden-label\">{{ _labelText }}</span>\n }\n @if (text) {\n <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n }\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled] ion-checkbox::part(label-text-wrapper)
|
|
132
|
+
], template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n @if (_labelText) {\n <span class=\"hidden-label\">{{ _labelText }}</span>\n }\n @if (text) {\n <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n }\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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-medium)}: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:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}:host ion-checkbox:focus-visible{outline:none;--border-width: 0;--border-color: transparent;--border-color-checked: transparent}:host ion-checkbox:focus-visible::part(container){padding:calc(var(--kirby-checkbox-container-padding) + 1px);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}@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: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}: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:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
|
|
145
133
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }, { type: i0.ChangeDetectorRef }], propDecorators: { ionCheckboxElement: [{
|
|
146
134
|
type: ViewChild,
|
|
147
135
|
args: [IonCheckbox, { read: ElementRef, static: true }]
|