@kirbydesign/designsystem 11.5.0 → 11.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-badge.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +12 -9
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +16 -16
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-data-table.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-divider.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +43 -122
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-flag.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +28 -28
- package/fesm2022/kirbydesign-designsystem-header.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +14 -10
- 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 +3 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-list.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-menu.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-modal.mjs +44 -44
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-radio.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +18 -18
- 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 +13 -13
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +286 -286
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-toast.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-toast.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +15 -15
- package/fesm2022/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/id-card.svg +3 -0
- package/icons/svg/maintenance.svg +3 -0
- package/icons/svg/message-read.svg +3 -0
- package/icons/svg/ownership.svg +3 -0
- package/icons/svg/top-up.svg +3 -1
- package/package.json +3 -4
- package/types/kirbydesign-designsystem-action-group.d.ts +1 -1
- package/types/kirbydesign-designsystem-calendar.d.ts +5 -1
- package/types/kirbydesign-designsystem-calendar.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-config.d.ts +1 -1
- package/types/kirbydesign-designsystem-dropdown.d.ts +9 -17
- package/types/kirbydesign-designsystem-dropdown.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-page.d.ts +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts +1 -1
- package/types/kirbydesign-designsystem-toast.d.ts +2 -2
- package/types/kirbydesign-designsystem-toast.d.ts.map +1 -1
|
@@ -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.
|
|
12
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
11
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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: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 }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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: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"] }]
|
|
17
17
|
}], propDecorators: { hasPadding: [{
|
|
@@ -29,10 +29,10 @@ 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.
|
|
33
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
32
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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: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)}: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, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}.title.bold{font-weight:700}.subtitle{font-size:14px;margin-bottom:0}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) p{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
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: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)}: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, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}.title.bold{font-weight:700}.subtitle{font-size:14px;margin-bottom:0}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) p{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
|
|
38
38
|
}], propDecorators: { title: [{
|
|
@@ -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.
|
|
79
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
78
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", 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.1.4", 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.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardAsButtonDirective, decorators: [{
|
|
82
82
|
type: Directive,
|
|
83
83
|
args: [{
|
|
84
84
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -158,10 +158,10 @@ class CardComponent {
|
|
|
158
158
|
});
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
162
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
161
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", 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.1.4", 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: ["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: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)}@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"] }); }
|
|
163
163
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
165
165
|
type: Component,
|
|
166
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: ["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: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)}@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"] }]
|
|
167
167
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ResizeObserverService }, { type: i0.Renderer2 }], propDecorators: { title: [{
|
|
@@ -186,11 +186,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
186
186
|
|
|
187
187
|
const imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];
|
|
188
188
|
class CardModule {
|
|
189
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
190
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
191
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
189
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
190
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", 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.1.4", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
|
|
192
192
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardModule, decorators: [{
|
|
194
194
|
type: NgModule,
|
|
195
195
|
args: [{
|
|
196
196
|
imports: [CommonModule, ThemeColorDirective, ...imports],
|
|
@@ -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.
|
|
633
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
632
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
633
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartConfigService }); }
|
|
634
634
|
}
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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.
|
|
804
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
803
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
804
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartJSService }); }
|
|
805
805
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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.
|
|
1069
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1068
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1069
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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.
|
|
1071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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.
|
|
1102
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1101
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1102
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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.
|
|
1104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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.
|
|
1200
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1199
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1200
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: StockChartJSService }); }
|
|
1201
1201
|
}
|
|
1202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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.
|
|
1215
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1214
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1215
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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.
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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.0.6", ngImpor
|
|
|
1222
1222
|
}] } });
|
|
1223
1223
|
|
|
1224
1224
|
class ChartsModule {
|
|
1225
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1226
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
1227
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
1225
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1226
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: ChartsModule, imports: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
|
|
1227
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
|
|
1228
1228
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChartsModule, decorators: [{
|
|
1230
1230
|
type: NgModule,
|
|
1231
1231
|
args: [{
|
|
1232
1232
|
imports: [ChartComponent, StockChartComponent],
|
|
@@ -110,17 +110,17 @@ class CheckboxComponent {
|
|
|
110
110
|
this.disabled = isDisabled;
|
|
111
111
|
this.cdr.markForCheck();
|
|
112
112
|
}
|
|
113
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
114
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
113
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", 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.1.4", 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: [
|
|
115
115
|
IonicElementPartHelper,
|
|
116
116
|
{
|
|
117
117
|
provide: NG_VALUE_ACCESSOR,
|
|
118
118
|
useExisting: forwardRef((() => CheckboxComponent)),
|
|
119
119
|
multi: true,
|
|
120
120
|
},
|
|
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: [":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: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:focus-visible{outline:none}: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: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: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: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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: [":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: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):focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host ion-checkbox:focus-visible: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:focus-visible{outline:none}: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: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: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: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
122
122
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
125
|
args: [{ imports: [IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
126
126
|
IonicElementPartHelper,
|
|
@@ -129,7 +129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
129
129
|
useExisting: forwardRef((() => CheckboxComponent)),
|
|
130
130
|
multi: true,
|
|
131
131
|
},
|
|
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: [":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: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:focus-visible{outline:none}: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: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: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"] }]
|
|
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: [":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: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):focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host ion-checkbox:focus-visible: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:focus-visible{outline:none}: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: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: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"] }]
|
|
133
133
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }, { type: i0.ChangeDetectorRef }], propDecorators: { ionCheckboxElement: [{
|
|
134
134
|
type: ViewChild,
|
|
135
135
|
args: [IonCheckbox, { read: ElementRef, static: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n imports: [IonCheckbox],\n selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n IonicElementPartHelper,\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxComponent\n implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() indeterminate: boolean = false;\n @Input() attentionLevel: '1' | '2' = '2';\n\n @Input()\n text: string;\n\n @HostBinding('class')\n @Input()\n size: 'xs' | 'sm' | 'md' = 'md';\n\n @HostBinding('class.error')\n @Input()\n hasError: boolean = false;\n\n @Input() disabled = false;\n @HostBinding('attr.disabled')\n get _isDisabled() {\n return this.disabled ? 'disabled' : null;\n }\n\n @HostBinding('class.attention-level1') get isAttentionLevel1() {\n return this.attentionLevel === '1';\n }\n @HostBinding('class.attention-level2') get isAttentionLevel2() {\n return this.attentionLevel === '2';\n }\n\n @HostBinding('class.has-hidden-label') _labelText: string;\n\n @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' | 'end' | 'space-between' = 'start';\n _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n _hasSlottedContent: boolean;\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n /**\n * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n * So it has to be done by querying an additional wrapper around the default content slot like this.\n */\n this._hasSlottedContent = this.element.nativeElement\n .querySelector('.default-content')\n .hasChildNodes();\n\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end' && this._hasSlottedContent) {\n this._justify = 'space-between';\n this._labelPlacement = 'start';\n }\n }\n\n ngAfterViewInit(): void {\n this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n this.ionicElementPartHelper.setPart(\n 'label-text-wrapper',\n this.ionCheckboxElement,\n '.label-text-wrapper'\n );\n this.ionicElementPartHelper.setPart(\n 'native-wrapper',\n this.ionCheckboxElement,\n '.native-wrapper'\n );\n }\n\n ngAfterContentInit(): void {\n this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n if (!this.text && !this._labelText && !this._hasSlottedContent) {\n // if no label has been set try to find a label in an item and use its text content\n this._labelText = setAccessibleLabel(this.element.nativeElement);\n }\n }\n\n onChecked(checked: boolean): void {\n this.checked = checked;\n this._onChange(this.checked);\n this.checkedChange.emit(this.checked);\n }\n\n onBlur() {\n this._onTouched();\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private _onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private _onTouched = () => {};\n\n /**\n * Sets the checkbox's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: boolean): void {\n this.checked = value;\n this.cdr.markForCheck();\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Disables the checkbox. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<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","/**\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-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n imports: [IonCheckbox],\n selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n IonicElementPartHelper,\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxComponent\n implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() indeterminate: boolean = false;\n @Input() attentionLevel: '1' | '2' = '2';\n\n @Input()\n text: string;\n\n @HostBinding('class')\n @Input()\n size: 'xs' | 'sm' | 'md' = 'md';\n\n @HostBinding('class.error')\n @Input()\n hasError: boolean = false;\n\n @Input() disabled = false;\n @HostBinding('attr.disabled')\n get _isDisabled() {\n return this.disabled ? 'disabled' : null;\n }\n\n @HostBinding('class.attention-level1') get isAttentionLevel1() {\n return this.attentionLevel === '1';\n }\n @HostBinding('class.attention-level2') get isAttentionLevel2() {\n return this.attentionLevel === '2';\n }\n\n @HostBinding('class.has-hidden-label') _labelText: string;\n\n @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' | 'end' | 'space-between' = 'start';\n _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n _hasSlottedContent: boolean;\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n /**\n * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n * So it has to be done by querying an additional wrapper around the default content slot like this.\n */\n this._hasSlottedContent = this.element.nativeElement\n .querySelector('.default-content')\n .hasChildNodes();\n\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end' && this._hasSlottedContent) {\n this._justify = 'space-between';\n this._labelPlacement = 'start';\n }\n }\n\n ngAfterViewInit(): void {\n this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n this.ionicElementPartHelper.setPart(\n 'label-text-wrapper',\n this.ionCheckboxElement,\n '.label-text-wrapper'\n );\n this.ionicElementPartHelper.setPart(\n 'native-wrapper',\n this.ionCheckboxElement,\n '.native-wrapper'\n );\n }\n\n ngAfterContentInit(): void {\n this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n if (!this.text && !this._labelText && !this._hasSlottedContent) {\n // if no label has been set try to find a label in an item and use its text content\n this._labelText = setAccessibleLabel(this.element.nativeElement);\n }\n }\n\n onChecked(checked: boolean): void {\n this.checked = checked;\n this._onChange(this.checked);\n this.checkedChange.emit(this.checked);\n }\n\n onBlur() {\n this._onTouched();\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private _onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private _onTouched = () => {};\n\n /**\n * Sets the checkbox's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: boolean): void {\n this.checked = value;\n this.cdr.markForCheck();\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Disables the checkbox. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { InjectionToken, makeEnvironmentProviders } from '@angular/core';
|
|
2
2
|
import { provideIonicAngular, isPlatform, AnimationController, PopoverController, ModalController as ModalController$1 } from '@ionic/angular/standalone';
|
|
3
|
-
import { ConfigToken,
|
|
3
|
+
import { ConfigToken, AngularDelegate, provideComponentInputBinding } from '@ionic/angular/common';
|
|
4
4
|
import { LoadingOverlayService } from '@kirbydesign/designsystem/loading-overlay';
|
|
5
5
|
import { ModalController, ActionSheetHelper, ModalHelper, AlertHelper, CanDismissHelper } from '@kirbydesign/designsystem/modal';
|
|
6
6
|
import { ResizeObserverFactory, ResizeObserverService } from '@kirbydesign/designsystem/shared';
|
|
@@ -29,12 +29,12 @@ class TableSortableComponent {
|
|
|
29
29
|
this.renderer.setAttribute(this.spanElement.nativeElement, 'data-text', this.spanElement.nativeElement.textContent);
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
33
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
32
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableSortableComponent, isStandalone: true, selector: "th[sortable]", inputs: { sortable: "sortable", active: "active", sortDirection: "sortDirection", iconAlignment: "iconAlignment", alignment: "alignment" }, host: { properties: { "class.sortable": "this.sortable", "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "spanElement", first: true, predicate: ["span"], descendants: true }], ngImport: i0, template: "@if (!sortable) {\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon\n class=\"sortable-icon\"\n [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n ></kirby-icon>\n </button>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableSortableComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconComponent], template: "@if (!sortable) {\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon
|
|
37
|
+
args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconComponent], template: "@if (!sortable) {\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon\n class=\"sortable-icon\"\n [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n ></kirby-icon>\n </button>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
38
38
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { sortable: [{
|
|
39
39
|
type: HostBinding,
|
|
40
40
|
args: ['class.sortable']
|
|
@@ -65,11 +65,11 @@ class DataTableModule {
|
|
|
65
65
|
console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.
|
|
66
66
|
Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);
|
|
67
67
|
}
|
|
68
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
69
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
70
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
68
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
69
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent], exports: [TableSortableComponent] }); }
|
|
70
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent] }); }
|
|
71
71
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DataTableModule, decorators: [{
|
|
73
73
|
type: NgModule,
|
|
74
74
|
args: [{
|
|
75
75
|
imports: [TableSortableComponent],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-data-table.mjs","sources":["../../data-table/src/sortable/sortable.component.ts","../../data-table/src/sortable/sortable.component.html","../../data-table/src/data-table.module.ts","../../data-table/src/kirbydesign-designsystem-data-table.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n Renderer2,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'th[sortable]',\n templateUrl: './sortable.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, IconComponent],\n})\nexport class TableSortableComponent implements AfterViewInit {\n constructor(private renderer: Renderer2) {}\n\n @HostBinding('class.sortable')\n @Input()\n sortable = false;\n\n @Input() active = false;\n\n @Input() sortDirection: 'asc' | 'desc' = 'asc';\n @Input() iconAlignment: 'start' | 'end' = 'end';\n @Input() alignment: 'start' | 'center' | 'end' = 'start';\n\n @HostBinding('class.active')\n get isActive() {\n return this.sortable && this.active;\n }\n\n _getAlignmentClasses() {\n const alignmentClasses: string[] = [];\n\n if (this.iconAlignment === 'start') {\n alignmentClasses.push('row-reverse');\n }\n\n alignmentClasses.push(`align-${this.alignment}`);\n\n return alignmentClasses;\n }\n\n @ViewChild('span') spanElement: ElementRef;\n\n ngAfterViewInit(): void {\n if (this.spanElement) {\n this.renderer.setAttribute(\n this.spanElement.nativeElement,\n 'data-text',\n this.spanElement.nativeElement.textContent\n );\n }\n }\n}\n","@if (!sortable) {\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-data-table.mjs","sources":["../../data-table/src/sortable/sortable.component.ts","../../data-table/src/sortable/sortable.component.html","../../data-table/src/data-table.module.ts","../../data-table/src/kirbydesign-designsystem-data-table.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n Renderer2,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'th[sortable]',\n templateUrl: './sortable.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, IconComponent],\n})\nexport class TableSortableComponent implements AfterViewInit {\n constructor(private renderer: Renderer2) {}\n\n @HostBinding('class.sortable')\n @Input()\n sortable = false;\n\n @Input() active = false;\n\n @Input() sortDirection: 'asc' | 'desc' = 'asc';\n @Input() iconAlignment: 'start' | 'end' = 'end';\n @Input() alignment: 'start' | 'center' | 'end' = 'start';\n\n @HostBinding('class.active')\n get isActive() {\n return this.sortable && this.active;\n }\n\n _getAlignmentClasses() {\n const alignmentClasses: string[] = [];\n\n if (this.iconAlignment === 'start') {\n alignmentClasses.push('row-reverse');\n }\n\n alignmentClasses.push(`align-${this.alignment}`);\n\n return alignmentClasses;\n }\n\n @ViewChild('span') spanElement: ElementRef;\n\n ngAfterViewInit(): void {\n if (this.spanElement) {\n this.renderer.setAttribute(\n this.spanElement.nativeElement,\n 'data-text',\n this.spanElement.nativeElement.textContent\n );\n }\n }\n}\n","@if (!sortable) {\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n} @else {\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon\n class=\"sortable-icon\"\n [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"\n ></kirby-icon>\n </button>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { TableSortableComponent } from './sortable/sortable.component';\n\n/**\n * @deprecated 'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.\n * Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.\n */\n@NgModule({\n imports: [TableSortableComponent],\n exports: [TableSortableComponent],\n})\nexport class DataTableModule {\n constructor() {\n console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.\nPlease import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class DividerComponent {
|
|
5
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
5
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7
7
|
}
|
|
8
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
8
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DividerComponent, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
10
|
args: [{ selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr role=\"presentation\" [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
|
|
11
11
|
}], propDecorators: { hasMargin: [{
|