@kirbydesign/designsystem 9.0.0 → 9.1.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/badge/badge.component.d.ts +2 -1
- package/card/card-header/card-header.component.d.ts +1 -0
- package/checkbox/checkbox.component.d.ts +35 -1
- package/esm2022/avatar/avatar.component.mjs +3 -4
- package/esm2022/badge/badge.component.mjs +6 -5
- package/esm2022/card/card-header/card-header.component.mjs +9 -6
- package/esm2022/checkbox/checkbox.component.mjs +66 -4
- package/esm2022/dropdown/dropdown.component.mjs +2 -2
- package/esm2022/fab-sheet/fab-sheet.component.mjs +3 -3
- package/esm2022/flag/flag.component.mjs +3 -3
- package/esm2022/form-field/directives/date/date-input.directive.mjs +9 -3
- package/esm2022/form-field/form-field.component.mjs +18 -12
- package/esm2022/icon/kirby-icon-settings.mjs +5 -1
- package/esm2022/item/item.component.mjs +2 -2
- package/esm2022/item/label/label.component.mjs +2 -2
- package/esm2022/lib/components/segmented-control/segmented-control.component.mjs +3 -3
- package/esm2022/list/list-item/list-item.component.mjs +2 -2
- package/esm2022/list/list.component.mjs +2 -2
- package/esm2022/menu/menu.component.mjs +3 -3
- package/esm2022/modal/modal/action-sheet/action-sheet.component.mjs +3 -3
- package/esm2022/modal/modal/footer/modal-footer.component.mjs +11 -6
- package/esm2022/modal/modal/services/modal.helper.mjs +10 -1
- package/esm2022/modal/modal-wrapper/modal-wrapper.component.mjs +22 -13
- package/esm2022/modal/v2/footer/footer.component.mjs +2 -2
- package/esm2022/progress-circle/progress-circle-ring.component.mjs +3 -3
- package/esm2022/radio/radio.component.mjs +2 -2
- package/esm2022/shared/floating/floating.directive.mjs +1 -1
- package/esm2022/slide/slides.component.mjs +2 -2
- package/esm2022/tab-navigation/tab-navigation/tab-navigation.component.mjs +2 -2
- package/esm2022/tabs/tab-button/tab-button.component.mjs +2 -2
- package/esm2022/toggle/toggle.component.mjs +74 -8
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +2 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-badge.mjs +5 -4
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +8 -5
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +65 -3
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-flag.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-flag.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +25 -13
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-icon.mjs +4 -0
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal-v2.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal.mjs +42 -18
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +73 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/agreement.svg +2 -0
- package/icons/svg/budget.svg +2 -0
- package/icons/svg/dot.svg +3 -0
- package/icons/svg/history.svg +2 -0
- package/modal/modal/footer/modal-footer.component.d.ts +3 -1
- package/modal/modal-wrapper/modal-wrapper.component.d.ts +2 -2
- package/package.json +4 -4
- package/shared/floating/floating.directive.d.ts +1 -2
- package/toggle/toggle.component.d.ts +38 -2
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
+
import * as i1 from "@kirbydesign/designsystem/shared";
|
|
2
3
|
export type BadgeSize = 'sm' | 'md';
|
|
3
4
|
export declare class BadgeComponent {
|
|
4
5
|
text: string;
|
|
5
6
|
size: BadgeSize;
|
|
6
7
|
static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
|
|
7
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "kirby-badge", never, { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true,
|
|
8
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "kirby-badge", never, { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.ThemeColorDirective; inputs: { "themeColor": "themeColor"; }; outputs: {}; }]>;
|
|
8
9
|
}
|
|
@@ -6,6 +6,7 @@ export declare class CardHeaderComponent {
|
|
|
6
6
|
isTitleBold: boolean;
|
|
7
7
|
flagged: CardFlagLevel;
|
|
8
8
|
hasPadding: boolean;
|
|
9
|
+
get _cssClass(): string[];
|
|
9
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
|
|
10
11
|
static ɵcmp: i0.ɵɵComponentDeclaration<CardHeaderComponent, "kirby-card-header", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "isTitleBold": { "alias": "isTitleBold"; "required": false; }; "flagged": { "alias": "flagged"; "required": false; }; "hasPadding": { "alias": "hasPadding"; "required": false; }; }, {}, never, ["*"], false, never>;
|
|
11
12
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { AfterViewInit, EventEmitter } from '@angular/core';
|
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
2
3
|
import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class CheckboxComponent implements AfterViewInit {
|
|
5
|
+
export declare class CheckboxComponent implements AfterViewInit, ControlValueAccessor {
|
|
5
6
|
private ionicElementPartHelper;
|
|
6
7
|
private ionCheckboxElement?;
|
|
7
8
|
checked: boolean;
|
|
@@ -17,6 +18,39 @@ export declare class CheckboxComponent implements AfterViewInit {
|
|
|
17
18
|
constructor(ionicElementPartHelper: IonicElementPartHelper);
|
|
18
19
|
ngAfterViewInit(): void;
|
|
19
20
|
onChecked(checked: boolean): void;
|
|
21
|
+
onBlur(): void;
|
|
22
|
+
private _onChange;
|
|
23
|
+
private _onTouched;
|
|
24
|
+
/**
|
|
25
|
+
* Sets the checkbox's value. Part of the ControlValueAccessor interface
|
|
26
|
+
* required to integrate with Angular's core forms API.
|
|
27
|
+
*
|
|
28
|
+
* @param value New value to be written to the model.
|
|
29
|
+
*/
|
|
30
|
+
writeValue(value: boolean): void;
|
|
31
|
+
/**
|
|
32
|
+
* Saves a callback function to be invoked when the checkbox's value
|
|
33
|
+
* changes from user input. Part of the ControlValueAccessor interface
|
|
34
|
+
* required to integrate with Angular's core forms API.
|
|
35
|
+
*
|
|
36
|
+
* @param fn Callback to be triggered when the value changes.
|
|
37
|
+
*/
|
|
38
|
+
registerOnChange(fn: any): void;
|
|
39
|
+
/**
|
|
40
|
+
* Saves a callback function to be invoked when the checkbox is blurred
|
|
41
|
+
* by the user. Part of the ControlValueAccessor interface required
|
|
42
|
+
* to integrate with Angular's core forms API.
|
|
43
|
+
*
|
|
44
|
+
* @param fn Callback to be triggered when the component has been touched.
|
|
45
|
+
*/
|
|
46
|
+
registerOnTouched(fn: any): void;
|
|
47
|
+
/**
|
|
48
|
+
* Disables the checkbox. Part of the ControlValueAccessor interface required
|
|
49
|
+
* to integrate with Angular's core forms API.
|
|
50
|
+
*
|
|
51
|
+
* @param isDisabled Sets whether the component is disabled.
|
|
52
|
+
*/
|
|
53
|
+
setDisabledState?(isDisabled: boolean): void;
|
|
20
54
|
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
21
55
|
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "kirby-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "attentionLevel": { "alias": "attentionLevel"; "required": false; }; "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
|
|
22
56
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
|
|
3
|
-
import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
|
|
4
3
|
import * as i0 from "@angular/core";
|
|
5
4
|
import * as i1 from "@angular/common";
|
|
6
5
|
export var AvatarSize;
|
|
@@ -18,11 +17,11 @@ export class AvatarComponent {
|
|
|
18
17
|
return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
|
|
19
18
|
}
|
|
20
19
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-
|
|
20
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
21
|
}
|
|
23
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
24
23
|
type: Component,
|
|
25
|
-
args: [{ standalone: true, imports: [CommonModule
|
|
24
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
|
|
26
25
|
}], propDecorators: { imageSrc: [{
|
|
27
26
|
type: Input
|
|
28
27
|
}], altText: [{
|
|
@@ -41,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
41
40
|
type: HostBinding,
|
|
42
41
|
args: ['class']
|
|
43
42
|
}] } });
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2F2YXRhci9zcmMvYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2F2YXRhci9zcmMvYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQUl2RixNQUFNLENBQU4sSUFBWSxVQUtYO0FBTEQsV0FBWSxVQUFVO0lBQ3BCLHVCQUFTLENBQUE7SUFDVCx1QkFBUyxDQUFBO0lBQ1QsdUJBQVMsQ0FBQTtJQUNULHVCQUFTLENBQUE7QUFDWCxDQUFDLEVBTFcsVUFBVSxLQUFWLFVBQVUsUUFLckI7QUFVRCxNQUFNLE9BQU8sZUFBZTtJQVI1QjtRQWNXLFNBQUksR0FBaUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztLQVE3RDtJQUpDLElBQ0ksU0FBUztRQUNYLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN2RSxDQUFDO2lJQWJVLGVBQWU7cUhBQWYsZUFBZSwrUUNwQjVCLGtWQU1BLHVnR0RRWSxZQUFZOzsyRkFNWCxlQUFlO2tCQVIzQixTQUFTO2lDQUNJLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxZQUNiLGNBQWMsbUJBR1AsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVOLFVBQVU7c0JBRFQsS0FBSztnQkFJRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQnJhbmRDb2xvciwgTm90aWZpY2F0aW9uQ29sb3IgfSBmcm9tICdAa2lyYnlkZXNpZ24vY29yZSc7XG5cbmV4cG9ydCBlbnVtIEF2YXRhclNpemUge1xuICBYUyA9ICd4cycsXG4gIFNNID0gJ3NtJyxcbiAgTUQgPSAnbWQnLFxuICBMRyA9ICdsZycsXG59XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgc2VsZWN0b3I6ICdraXJieS1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJDb21wb25lbnQge1xuICBASW5wdXQoKSBpbWFnZVNyYzogc3RyaW5nO1xuICBASW5wdXQoKSBhbHRUZXh0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN0cm9rZTogYm9vbGVhbjtcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nO1xuICBASW5wdXQoKSBvdmVybGF5OiBib29sZWFuO1xuICBASW5wdXQoKSBzaXplOiBBdmF0YXJTaXplIHwgYCR7QXZhdGFyU2l6ZX1gID0gQXZhdGFyU2l6ZS5TTTtcbiAgQElucHV0KClcbiAgdGhlbWVDb2xvcjogTm90aWZpY2F0aW9uQ29sb3IgfCBCcmFuZENvbG9yIHwgJ21lZGl1bScgfCAnd2hpdGUnIHwgJ2RhcmsnIHwgJ2xpZ2h0JyB8ICdzZW1pLWxpZ2h0JztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IF9jc3NDbGFzcygpIHtcbiAgICByZXR1cm4gW3RoaXMudGhlbWVDb2xvciwgdGhpcy5zaXplXS5maWx0ZXIoKGNzc0NsYXNzKSA9PiAhIWNzc0NsYXNzKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImF2YXRhclwiIFtuZ0NsYXNzXT1cInsgb3ZlcmxheTogb3ZlcmxheSwgc3Ryb2tlOiBzdHJva2UgfVwiPlxuICA8aW1nICpuZ0lmPVwiaW1hZ2VTcmNcIiBbc3JjXT1cImltYWdlU3JjXCIgW2F0dHIuYWx0XT1cImFsdFRleHRcIiAvPlxuICA8bmctY29udGVudCAqbmdJZj1cIiF0ZXh0XCIgc2VsZWN0PVwia2lyYnktaWNvblwiPjwvbmctY29udGVudD5cbiAgPHNwYW4gY2xhc3M9XCJhdmF0YXItdGV4dFwiICpuZ0lmPVwidGV4dFwiPnt7IHRleHQgfX08L3NwYW4+XG48L2Rpdj5cbjxuZy1jb250ZW50IHNlbGVjdD1cImtpcmJ5LWJhZGdlXCI+PC9uZy1jb250ZW50PlxuIl19
|
|
@@ -3,18 +3,19 @@ import { Component, HostBinding, Input } from '@angular/core';
|
|
|
3
3
|
import { KirbyIonicModule } from '@kirbydesign/designsystem/kirby-ionic-module';
|
|
4
4
|
import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
|
-
import * as i1 from "@
|
|
7
|
-
import * as i2 from "@
|
|
6
|
+
import * as i1 from "@kirbydesign/designsystem/shared";
|
|
7
|
+
import * as i2 from "@angular/common";
|
|
8
|
+
import * as i3 from "@ionic/angular";
|
|
8
9
|
export class BadgeComponent {
|
|
9
10
|
constructor() {
|
|
10
11
|
this.size = 'md';
|
|
11
12
|
}
|
|
12
13
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<ion-badge>\n <span *ngIf=\"size === 'sm'\"></span>\n <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type:
|
|
14
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n <span *ngIf=\"size === 'sm'\"></span>\n <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: KirbyIonicModule }, { kind: "component", type: i3.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
|
|
14
15
|
}
|
|
15
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
16
17
|
type: Component,
|
|
17
|
-
args: [{ selector: 'kirby-badge', standalone: true, imports: [CommonModule, KirbyIonicModule, ThemeColorDirective], template: "<ion-badge>\n <span *ngIf=\"size === 'sm'\"></span>\n <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}\n"] }]
|
|
18
|
+
args: [{ selector: 'kirby-badge', standalone: true, imports: [CommonModule, KirbyIonicModule], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n <span *ngIf=\"size === 'sm'\"></span>\n <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"] }]
|
|
18
19
|
}], propDecorators: { text: [{
|
|
19
20
|
type: Input
|
|
20
21
|
}], size: [{
|
|
@@ -23,4 +24,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
23
24
|
}, {
|
|
24
25
|
type: Input
|
|
25
26
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vYmFkZ2Uvc3JjL2JhZGdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2JhZGdlL3NyYy9iYWRnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7OztBQVl2RSxNQUFNLE9BQU8sY0FBYztJQVIzQjtRQWFFLFNBQUksR0FBYyxJQUFJLENBQUM7S0FDeEI7aUlBTlksY0FBYztxSEFBZCxjQUFjLDhQQ2YzQiwrTUFLQSwyM0NET1ksWUFBWSxrSUFBRSxnQkFBZ0I7OzJGQUc3QixjQUFjO2tCQVIxQixTQUFTOytCQUNFLGFBQWEsY0FHWCxJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLENBQUMsa0JBQ3pCLENBQUMsRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQUUsQ0FBQzs4QkFHbkUsSUFBSTtzQkFBWixLQUFLO2dCQUlOLElBQUk7c0JBRkgsV0FBVzt1QkFBQyxPQUFPOztzQkFDbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2lyYnlJb25pY01vZHVsZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0va2lyYnktaW9uaWMtbW9kdWxlJztcbmltcG9ydCB7IFRoZW1lQ29sb3JEaXJlY3RpdmUgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL3NoYXJlZCc7XG5cbmV4cG9ydCB0eXBlIEJhZGdlU2l6ZSA9ICdzbScgfCAnbWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXJieS1iYWRnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYWRnZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2JhZGdlLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEtpcmJ5SW9uaWNNb2R1bGVdLFxuICBob3N0RGlyZWN0aXZlczogW3sgZGlyZWN0aXZlOiBUaGVtZUNvbG9yRGlyZWN0aXZlLCBpbnB1dHM6IFsndGhlbWVDb2xvciddIH1dLFxufSlcbmV4cG9ydCBjbGFzcyBCYWRnZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHRleHQ6IHN0cmluZztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgQElucHV0KClcbiAgc2l6ZTogQmFkZ2VTaXplID0gJ21kJztcbn1cbiIsIjxpb24tYmFkZ2U+XG4gIDxzcGFuICpuZ0lmPVwic2l6ZSA9PT0gJ3NtJ1wiPjwvc3Bhbj5cbiAgPG5nLWNvbnRlbnQgKm5nSWY9XCIhdGV4dCAmJiBzaXplID09PSAnbWQnXCI+PC9uZy1jb250ZW50PlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidGV4dCAmJiBzaXplID09PSAnbWQnXCI+e3sgdGV4dCB9fTwvbmctY29udGFpbmVyPlxuPC9pb24tYmFkZ2U+XG4iXX0=
|
|
@@ -6,12 +6,15 @@ export class CardHeaderComponent {
|
|
|
6
6
|
this.flagged = null;
|
|
7
7
|
this.hasPadding = true;
|
|
8
8
|
}
|
|
9
|
+
get _cssClass() {
|
|
10
|
+
return [this.flagged, this.flagged ? 'flagged' : null];
|
|
11
|
+
}
|
|
9
12
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class": "this.
|
|
13
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11
14
|
}
|
|
12
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
13
16
|
type: Component,
|
|
14
|
-
args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.
|
|
17
|
+
args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}:host.has-padding{padding:var(--kirby-internal-card-header-padding, 16px)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.success){--kirby-card-header-background-color: var(--kirby-decoration-color-green-30);--kirby-card-header-color: var(--kirby-black)}:host(.warning){--kirby-card-header-background-color: var(--kirby-decoration-color-yellow-30);--kirby-card-header-color: var(--kirby-black)}:host(.danger){--kirby-card-header-background-color: var(--kirby-decoration-color-red-30);--kirby-card-header-color: var(--kirby-black)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-black)}:host(.flagged){--kirby-internal-card-header-padding: 2px 8px}:host(.flagged) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
|
|
15
18
|
}], propDecorators: { title: [{
|
|
16
19
|
type: Input
|
|
17
20
|
}], subtitle: [{
|
|
@@ -19,14 +22,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
19
22
|
}], isTitleBold: [{
|
|
20
23
|
type: Input
|
|
21
24
|
}], flagged: [{
|
|
22
|
-
type: HostBinding,
|
|
23
|
-
args: ['class']
|
|
24
|
-
}, {
|
|
25
25
|
type: Input
|
|
26
26
|
}], hasPadding: [{
|
|
27
27
|
type: HostBinding,
|
|
28
28
|
args: ['class.has-padding']
|
|
29
29
|
}, {
|
|
30
30
|
type: Input
|
|
31
|
+
}], _cssClass: [{
|
|
32
|
+
type: HostBinding,
|
|
33
|
+
args: ['class']
|
|
31
34
|
}] } });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vY2FyZC9zcmMvY2FyZC1oZWFkZXIvY2FyZC1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vY2FyZC9zcmMvY2FyZC1oZWFkZXIvY2FyZC1oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFVdkYsTUFBTSxPQUFPLG1CQUFtQjtJQU5oQztRQVdFLFlBQU8sR0FBa0IsSUFBSSxDQUFDO1FBRzlCLGVBQVUsR0FBWSxJQUFJLENBQUM7S0FNNUI7SUFKQyxJQUNJLFNBQVM7UUFDWCxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pELENBQUM7aUlBYlUsbUJBQW1CO3FIQUFuQixtQkFBbUIsa1JDVmhDLHVLQUtBOzsyRkRLYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0UsbUJBQW1CLG1CQUdaLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRU4sT0FBTztzQkFETixLQUFLO2dCQUlOLFVBQVU7c0JBRlQsV0FBVzt1QkFBQyxtQkFBbUI7O3NCQUMvQixLQUFLO2dCQUlGLFNBQVM7c0JBRFosV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENhcmRGbGFnTGV2ZWwgfSBmcm9tICcuLi9jYXJkLWZsYWctbGV2ZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXJieS1jYXJkLWhlYWRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWhlYWRlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQtaGVhZGVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkSGVhZGVyQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgc3VidGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgaXNUaXRsZUJvbGQ6IGJvb2xlYW47XG4gIEBJbnB1dCgpXG4gIGZsYWdnZWQ6IENhcmRGbGFnTGV2ZWwgPSBudWxsO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmhhcy1wYWRkaW5nJylcbiAgQElucHV0KClcbiAgaGFzUGFkZGluZzogYm9vbGVhbiA9IHRydWU7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBfY3NzQ2xhc3MoKSB7XG4gICAgcmV0dXJuIFt0aGlzLmZsYWdnZWQsIHRoaXMuZmxhZ2dlZCA/ICdmbGFnZ2VkJyA6IG51bGxdO1xuICB9XG59XG4iLCI8aGVhZGVyPlxuICA8aDIgKm5nSWY9XCJ0aXRsZVwiIFtjbGFzcy5ib2xkXT1cImlzVGl0bGVCb2xkXCI+e3sgdGl0bGUgfX08L2gyPlxuICA8aDQgKm5nSWY9XCJzdWJ0aXRsZVwiPnt7IHN1YnRpdGxlIH19PC9oND5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9oZWFkZXI+XG4iXX0=
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, } from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, ViewChild, } from '@angular/core';
|
|
3
3
|
import { IonCheckbox, IonicModule } from '@ionic/angular';
|
|
4
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
5
|
import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
|
|
5
6
|
import * as i0 from "@angular/core";
|
|
6
7
|
import * as i1 from "@kirbydesign/designsystem/helpers";
|
|
@@ -24,6 +25,11 @@ export class CheckboxComponent {
|
|
|
24
25
|
this.hasError = false;
|
|
25
26
|
this.disabled = false;
|
|
26
27
|
this.checkedChange = new EventEmitter();
|
|
28
|
+
// Initialize default ControlValueAccessor callback functions (noop)
|
|
29
|
+
// eslint-disable-next-line no-empty-function
|
|
30
|
+
this._onChange = () => { };
|
|
31
|
+
// eslint-disable-next-line no-empty-function
|
|
32
|
+
this._onTouched = () => { };
|
|
27
33
|
}
|
|
28
34
|
ngAfterViewInit() {
|
|
29
35
|
this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');
|
|
@@ -32,14 +38,70 @@ export class CheckboxComponent {
|
|
|
32
38
|
}
|
|
33
39
|
onChecked(checked) {
|
|
34
40
|
this.checked = checked;
|
|
41
|
+
this._onChange(this.checked);
|
|
35
42
|
this.checkedChange.emit(this.checked);
|
|
36
43
|
}
|
|
44
|
+
onBlur() {
|
|
45
|
+
this._onTouched();
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Sets the checkbox's value. Part of the ControlValueAccessor interface
|
|
49
|
+
* required to integrate with Angular's core forms API.
|
|
50
|
+
*
|
|
51
|
+
* @param value New value to be written to the model.
|
|
52
|
+
*/
|
|
53
|
+
writeValue(value) {
|
|
54
|
+
this.checked = value;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Saves a callback function to be invoked when the checkbox's value
|
|
58
|
+
* changes from user input. Part of the ControlValueAccessor interface
|
|
59
|
+
* required to integrate with Angular's core forms API.
|
|
60
|
+
*
|
|
61
|
+
* @param fn Callback to be triggered when the value changes.
|
|
62
|
+
*/
|
|
63
|
+
registerOnChange(fn) {
|
|
64
|
+
this._onChange = fn;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Saves a callback function to be invoked when the checkbox is blurred
|
|
68
|
+
* by the user. Part of the ControlValueAccessor interface required
|
|
69
|
+
* to integrate with Angular's core forms API.
|
|
70
|
+
*
|
|
71
|
+
* @param fn Callback to be triggered when the component has been touched.
|
|
72
|
+
*/
|
|
73
|
+
registerOnTouched(fn) {
|
|
74
|
+
this._onTouched = fn;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Disables the checkbox. Part of the ControlValueAccessor interface required
|
|
78
|
+
* to integrate with Angular's core forms API.
|
|
79
|
+
*
|
|
80
|
+
* @param isDisabled Sets whether the component is disabled.
|
|
81
|
+
*/
|
|
82
|
+
setDisabledState(isDisabled) {
|
|
83
|
+
this.disabled = isDisabled;
|
|
84
|
+
}
|
|
37
85
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, providers: [
|
|
86
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, providers: [
|
|
87
|
+
IonicElementPartHelper,
|
|
88
|
+
{
|
|
89
|
+
provide: NG_VALUE_ACCESSOR,
|
|
90
|
+
useExisting: forwardRef((() => CheckboxComponent)),
|
|
91
|
+
multi: true,
|
|
92
|
+
},
|
|
93
|
+
], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n labelPlacement=\"end\"\n (ionBlur)=\"onBlur()\"\n>\n <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #2dc172;--border-color-checked: #2dc172}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #29ae67;--border-color-checked: #29ae67}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-top:4px;padding-bottom:4px}:host.has-label.sm ion-checkbox::part(label){padding-top:10px;padding-bottom:10px}:host.has-label.md ion-checkbox::part(label){padding-top:16px;padding-bottom:16px}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
39
94
|
}
|
|
40
95
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
41
96
|
type: Component,
|
|
42
|
-
args: [{ standalone: true, imports: [IonicModule, CommonModule],
|
|
97
|
+
args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
98
|
+
IonicElementPartHelper,
|
|
99
|
+
{
|
|
100
|
+
provide: NG_VALUE_ACCESSOR,
|
|
101
|
+
useExisting: forwardRef((() => CheckboxComponent)),
|
|
102
|
+
multi: true,
|
|
103
|
+
},
|
|
104
|
+
], template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n labelPlacement=\"end\"\n (ionBlur)=\"onBlur()\"\n>\n <span *ngIf=\"text\">{{ text }}</span>\n</ion-checkbox>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #2dc172;--border-color-checked: #2dc172}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: #29ae67;--border-color-checked: #29ae67}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-left:16px;padding-right:12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0}:host ion-checkbox span{white-space:pre-line}:host.has-label{display:block}:host.has-label.xs ion-checkbox::part(label){padding-top:4px;padding-bottom:4px}:host.has-label.sm ion-checkbox::part(label){padding-top:10px;padding-bottom:10px}:host.has-label.md ion-checkbox::part(label){padding-top:16px;padding-bottom:16px}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
|
|
43
105
|
}], ctorParameters: function () { return [{ type: i1.IonicElementPartHelper }]; }, propDecorators: { ionCheckboxElement: [{
|
|
44
106
|
type: ViewChild,
|
|
45
107
|
args: [IonCheckbox, { read: ElementRef, static: true }]
|
|
@@ -76,4 +138,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
76
138
|
}], checkedChange: [{
|
|
77
139
|
type: Output
|
|
78
140
|
}] } });
|
|
79
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
141
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vY2hlY2tib3gvc3JjL2NoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2NoZWNrYm94L3NyYy9jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFlBQVksRUFDWixVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUQsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXpFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7OztBQWtCM0UsTUFBTSxPQUFPLGlCQUFpQjtJQW9CNUIsSUFDSSxXQUFXO1FBQ2IsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUMzQyxDQUFDO0lBRUQsSUFBMkMsaUJBQWlCO1FBQzFELE9BQU8sSUFBSSxDQUFDLGNBQWMsS0FBSyxHQUFHLENBQUM7SUFDckMsQ0FBQztJQUNELElBQTJDLGlCQUFpQjtRQUMxRCxPQUFPLElBQUksQ0FBQyxjQUFjLEtBQUssR0FBRyxDQUFDO0lBQ3JDLENBQUM7SUFJRCxZQUFvQixzQkFBOEM7UUFBOUMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUF3QjtRQTlCekQsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUN6QixtQkFBYyxHQUFjLEdBQUcsQ0FBQztRQVF6QyxTQUFJLEdBQXVCLElBQUksQ0FBQztRQUloQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRWpCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFhaEIsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBNEJ0RCxvRUFBb0U7UUFDcEUsNkNBQTZDO1FBQ3JDLGNBQVMsR0FBNkIsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3ZELDZDQUE2QztRQUNyQyxlQUFVLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBOUJ1QyxDQUFDO0lBRXRFLGVBQWU7UUFDYixJQUFJLENBQUMsc0JBQXNCLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsa0JBQWtCLEVBQUUsbUJBQW1CLENBQUMsQ0FBQztRQUMzRixJQUFJLENBQUMsc0JBQXNCLENBQUMsT0FBTyxDQUNqQyxvQkFBb0IsRUFDcEIsSUFBSSxDQUFDLGtCQUFrQixFQUN2QixxQkFBcUIsQ0FDdEIsQ0FBQztRQUNGLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxPQUFPLENBQ2pDLGdCQUFnQixFQUNoQixJQUFJLENBQUMsa0JBQWtCLEVBQ3ZCLGlCQUFpQixDQUNsQixDQUFDO0lBQ0osQ0FBQztJQUVELFNBQVMsQ0FBQyxPQUFnQjtRQUN4QixJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztRQUN2QixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQVFEOzs7OztPQUtHO0lBQ0gsVUFBVSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQUVEOzs7Ozs7T0FNRztJQUNILGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVEOzs7Ozs7T0FNRztJQUNILGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0gsZ0JBQWdCLENBQUUsVUFBbUI7UUFDbkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztpSUExR1UsaUJBQWlCO3FIQUFqQixpQkFBaUIsaWZBVGpCO1lBQ1Qsc0JBQXNCO1lBQ3RCO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLEVBQUMsR0FBRyxFQUFFLENBQUMsaUJBQWlCLEVBQUM7Z0JBQ2hELEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRiw4RUFHVSxXQUFXLDJCQUFVLFVBQVUsMkNDbkM1QywwUEFVQSx3d0dEVVksV0FBVywyVEFBRSxZQUFZOzsyRkFjeEIsaUJBQWlCO2tCQWhCN0IsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxXQUFXLEVBQUUsWUFBWSxDQUFDLFlBQzFCLGdCQUFnQixtQkFHVCx1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNULHNCQUFzQjt3QkFDdEI7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsRUFBQyxHQUFHLEVBQUUsa0JBQWtCLEVBQUM7NEJBQ2hELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzZHQUlPLGtCQUFrQjtzQkFEekIsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBR2pELE9BQU87c0JBQWYsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUlOLElBQUk7c0JBRkgsV0FBVzt1QkFBQyxpQkFBaUI7O3NCQUM3QixLQUFLO2dCQUtOLElBQUk7c0JBRkgsV0FBVzt1QkFBQyxPQUFPOztzQkFDbkIsS0FBSztnQkFLTixRQUFRO3NCQUZQLFdBQVc7dUJBQUMsYUFBYTs7c0JBQ3pCLEtBQUs7Z0JBR0csUUFBUTtzQkFBaEIsS0FBSztnQkFFRixXQUFXO3NCQURkLFdBQVc7dUJBQUMsZUFBZTtnQkFLZSxpQkFBaUI7c0JBQTNELFdBQVc7dUJBQUMsd0JBQXdCO2dCQUdNLGlCQUFpQjtzQkFBM0QsV0FBVzt1QkFBQyx3QkFBd0I7Z0JBSTNCLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBmb3J3YXJkUmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvbkNoZWNrYm94LCBJb25pY01vZHVsZSB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgSW9uaWNFbGVtZW50UGFydEhlbHBlciB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vaGVscGVycyc7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbSW9uaWNNb2R1bGUsIENvbW1vbk1vZHVsZV0sXG4gIHNlbGVjdG9yOiAna2lyYnktY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgSW9uaWNFbGVtZW50UGFydEhlbHBlcixcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENoZWNrYm94Q29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBAVmlld0NoaWxkKElvbkNoZWNrYm94LCB7IHJlYWQ6IEVsZW1lbnRSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICBwcml2YXRlIGlvbkNoZWNrYm94RWxlbWVudD86IEVsZW1lbnRSZWY8SFRNTElvbkNoZWNrYm94RWxlbWVudD47XG5cbiAgQElucHV0KCkgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBhdHRlbnRpb25MZXZlbDogJzEnIHwgJzInID0gJzInO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuaGFzLWxhYmVsJylcbiAgQElucHV0KClcbiAgdGV4dDogc3RyaW5nO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBASW5wdXQoKVxuICBzaXplOiAneHMnIHwgJ3NtJyB8ICdtZCcgPSAnbWQnO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZXJyb3InKVxuICBASW5wdXQoKVxuICBoYXNFcnJvcjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBIb3N0QmluZGluZygnYXR0ci5kaXNhYmxlZCcpXG4gIGdldCBfaXNEaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/ICdkaXNhYmxlZCcgOiBudWxsO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hdHRlbnRpb24tbGV2ZWwxJykgZ2V0IGlzQXR0ZW50aW9uTGV2ZWwxKCkge1xuICAgIHJldHVybiB0aGlzLmF0dGVudGlvbkxldmVsID09PSAnMSc7XG4gIH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hdHRlbnRpb24tbGV2ZWwyJykgZ2V0IGlzQXR0ZW50aW9uTGV2ZWwyKCkge1xuICAgIHJldHVybiB0aGlzLmF0dGVudGlvbkxldmVsID09PSAnMic7XG4gIH1cblxuICBAT3V0cHV0KCkgY2hlY2tlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGlvbmljRWxlbWVudFBhcnRIZWxwZXI6IElvbmljRWxlbWVudFBhcnRIZWxwZXIpIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaW9uaWNFbGVtZW50UGFydEhlbHBlci5zZXRQYXJ0KCdsYWJlbCcsIHRoaXMuaW9uQ2hlY2tib3hFbGVtZW50LCAnLmNoZWNrYm94LXdyYXBwZXInKTtcbiAgICB0aGlzLmlvbmljRWxlbWVudFBhcnRIZWxwZXIuc2V0UGFydChcbiAgICAgICdsYWJlbC10ZXh0LXdyYXBwZXInLFxuICAgICAgdGhpcy5pb25DaGVja2JveEVsZW1lbnQsXG4gICAgICAnLmxhYmVsLXRleHQtd3JhcHBlcidcbiAgICApO1xuICAgIHRoaXMuaW9uaWNFbGVtZW50UGFydEhlbHBlci5zZXRQYXJ0KFxuICAgICAgJ25hdGl2ZS13cmFwcGVyJyxcbiAgICAgIHRoaXMuaW9uQ2hlY2tib3hFbGVtZW50LFxuICAgICAgJy5uYXRpdmUtd3JhcHBlcidcbiAgICApO1xuICB9XG5cbiAgb25DaGVja2VkKGNoZWNrZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmNoZWNrZWQgPSBjaGVja2VkO1xuICAgIHRoaXMuX29uQ2hhbmdlKHRoaXMuY2hlY2tlZCk7XG4gICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQodGhpcy5jaGVja2VkKTtcbiAgfVxuXG4gIG9uQmx1cigpIHtcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcbiAgfVxuXG4gIC8vIEluaXRpYWxpemUgZGVmYXVsdCBDb250cm9sVmFsdWVBY2Nlc3NvciBjYWxsYmFjayBmdW5jdGlvbnMgKG5vb3ApXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1lbXB0eS1mdW5jdGlvblxuICBwcml2YXRlIF9vbkNoYW5nZTogKHZhbHVlOiBib29sZWFuKSA9PiB2b2lkID0gKCkgPT4ge307XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1lbXB0eS1mdW5jdGlvblxuICBwcml2YXRlIF9vblRvdWNoZWQgPSAoKSA9PiB7fTtcblxuICAvKipcbiAgICogU2V0cyB0aGUgY2hlY2tib3gncyB2YWx1ZS4gUGFydCBvZiB0aGUgQ29udHJvbFZhbHVlQWNjZXNzb3IgaW50ZXJmYWNlXG4gICAqIHJlcXVpcmVkIHRvIGludGVncmF0ZSB3aXRoIEFuZ3VsYXIncyBjb3JlIGZvcm1zIEFQSS5cbiAgICpcbiAgICogQHBhcmFtIHZhbHVlIE5ldyB2YWx1ZSB0byBiZSB3cml0dGVuIHRvIHRoZSBtb2RlbC5cbiAgICovXG4gIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmNoZWNrZWQgPSB2YWx1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBTYXZlcyBhIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJlIGludm9rZWQgd2hlbiB0aGUgY2hlY2tib3gncyB2YWx1ZVxuICAgKiBjaGFuZ2VzIGZyb20gdXNlciBpbnB1dC4gUGFydCBvZiB0aGUgQ29udHJvbFZhbHVlQWNjZXNzb3IgaW50ZXJmYWNlXG4gICAqIHJlcXVpcmVkIHRvIGludGVncmF0ZSB3aXRoIEFuZ3VsYXIncyBjb3JlIGZvcm1zIEFQSS5cbiAgICpcbiAgICogQHBhcmFtIGZuIENhbGxiYWNrIHRvIGJlIHRyaWdnZXJlZCB3aGVuIHRoZSB2YWx1ZSBjaGFuZ2VzLlxuICAgKi9cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fb25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIC8qKlxuICAgKiBTYXZlcyBhIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJlIGludm9rZWQgd2hlbiB0aGUgY2hlY2tib3ggaXMgYmx1cnJlZFxuICAgKiBieSB0aGUgdXNlci4gUGFydCBvZiB0aGUgQ29udHJvbFZhbHVlQWNjZXNzb3IgaW50ZXJmYWNlIHJlcXVpcmVkXG4gICAqIHRvIGludGVncmF0ZSB3aXRoIEFuZ3VsYXIncyBjb3JlIGZvcm1zIEFQSS5cbiAgICpcbiAgICogQHBhcmFtIGZuIENhbGxiYWNrIHRvIGJlIHRyaWdnZXJlZCB3aGVuIHRoZSBjb21wb25lbnQgaGFzIGJlZW4gdG91Y2hlZC5cbiAgICovXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl9vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIC8qKlxuICAgKiBEaXNhYmxlcyB0aGUgY2hlY2tib3guIFBhcnQgb2YgdGhlIENvbnRyb2xWYWx1ZUFjY2Vzc29yIGludGVyZmFjZSByZXF1aXJlZFxuICAgKiB0byBpbnRlZ3JhdGUgd2l0aCBBbmd1bGFyJ3MgY29yZSBmb3JtcyBBUEkuXG4gICAqXG4gICAqIEBwYXJhbSBpc0Rpc2FibGVkIFNldHMgd2hldGhlciB0aGUgY29tcG9uZW50IGlzIGRpc2FibGVkLlxuICAgKi9cbiAgc2V0RGlzYWJsZWRTdGF0ZT8oaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG59XG4iLCI8aW9uLWNoZWNrYm94XG4gIG1vZGU9XCJtZFwiXG4gIFtjaGVja2VkXT1cImNoZWNrZWRcIlxuICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAoaW9uQ2hhbmdlKT1cIm9uQ2hlY2tlZCgkZXZlbnQuZGV0YWlsLmNoZWNrZWQpXCJcbiAgbGFiZWxQbGFjZW1lbnQ9XCJlbmRcIlxuICAoaW9uQmx1cik9XCJvbkJsdXIoKVwiXG4+XG4gIDxzcGFuICpuZ0lmPVwidGV4dFwiPnt7IHRleHQgfX08L3NwYW4+XG48L2lvbi1jaGVja2JveD5cbiJdfQ==
|
|
@@ -455,7 +455,7 @@ export class DropdownComponent {
|
|
|
455
455
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
456
456
|
multi: true,
|
|
457
457
|
},
|
|
458
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0
|
|
458
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i2.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: i5.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
459
459
|
}
|
|
460
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
461
461
|
type: Component,
|
|
@@ -465,7 +465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
465
465
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
466
466
|
multi: true,
|
|
467
467
|
},
|
|
468
|
-
], template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0
|
|
468
|
+
], template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 24px -10px #1c1c1c26;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
|
|
469
469
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.KeyboardHandlerService }]; }, propDecorators: { items: [{
|
|
470
470
|
type: Input
|
|
471
471
|
}], selectedIndex: [{
|
|
@@ -51,11 +51,11 @@ export class FabSheetComponent {
|
|
|
51
51
|
this.changeDetectorRef.detectChanges();
|
|
52
52
|
}
|
|
53
53
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0
|
|
54
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 24px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
55
55
|
}
|
|
56
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FabSheetComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
|
-
args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0
|
|
58
|
+
args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 24px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
|
|
59
59
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
60
60
|
type: Inject,
|
|
61
61
|
args: [DOCUMENT]
|
|
@@ -76,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
76
76
|
type: ViewChild,
|
|
77
77
|
args: [IonFab, { static: true }]
|
|
78
78
|
}] } });
|
|
79
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFiLXNoZWV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2ZhYi1zaGVldC9zcmMvZmFiLXNoZWV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2ZhYi1zaGVldC9zcmMvZmFiLXNoZWV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUdMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsV0FBVyxFQUNYLE1BQU0sRUFDTixLQUFLLEVBQ0wsU0FBUyxFQUNULFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7OztBQVV2RSxNQUFNLE9BQU8saUJBQWlCO0lBSzVCLElBQ0ksY0FBYztRQUNoQixPQUFPLElBQUksQ0FBQyxlQUFlLENBQUM7SUFDOUIsQ0FBQztJQVVELFlBQ1UsaUJBQW9DLEVBQ3BDLFFBQW1CLEVBQ0QsUUFBa0I7UUFGcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUNwQyxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ0QsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQXBCckMsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQix3QkFBbUIsR0FBZ0MsT0FBTyxDQUFDO1FBRTVELG9CQUFlLEdBQVksS0FBSyxDQUFDO0lBa0J0QyxDQUFDO0lBRUosa0JBQWtCO1FBQ2hCLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7U0FDcEM7SUFDSCxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLG9CQUFvQixDQUFDLENBQUM7SUFDdEUsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNuRSxDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ25ELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUU7WUFDNUIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25DLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELG9CQUFvQixDQUFDLE1BQWU7UUFDbEMsSUFBSSxDQUFDLGVBQWUsR0FBRyxNQUFNLENBQUM7UUFDOUIsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLGtCQUFrQixDQUFDLENBQUM7WUFDL0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsb0JBQW9CLENBQUMsQ0FBQztTQUNsRTthQUFNO1lBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsa0JBQWtCLENBQUMsQ0FBQztZQUNsRSxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxvQkFBb0IsQ0FBQyxDQUFDO1NBQ3JFO1FBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3pDLENBQUM7aUlBN0RVLGlCQUFpQiw0RUFxQmxCLFFBQVE7cUhBckJQLGlCQUFpQixvUUFVZCxvQkFBb0IsOEZBRXZCLFlBQVksMkJBQXdCLFVBQVUsb0VBRzlDLE1BQU0sOERDekNuQixpcEJBd0JBLDBxRERKWSxXQUFXLGluQkFBRSxZQUFZOzsyRkFNeEIsaUJBQWlCO2tCQVI3QixTQUFTO2lDQUNJLElBQUksV0FDUCxDQUFDLFdBQVcsRUFBRSxZQUFZLENBQUMsWUFDMUIsaUJBQWlCLG1CQUdWLHVCQUF1QixDQUFDLE1BQU07OzBCQXVCNUMsTUFBTTsyQkFBQyxRQUFROzRDQXBCVCxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFJRixjQUFjO3NCQURqQixXQUFXO3VCQUFDLGVBQWU7Z0JBSzJCLFdBQVc7c0JBQWpFLFlBQVk7dUJBQUMsb0JBQW9CLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQUdyRCxZQUFZO3NCQURYLFNBQVM7dUJBQUMsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFO2dCQUkzRCxNQUFNO3NCQURMLFNBQVM7dUJBQUMsTUFBTSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSwgRE9DVU1FTlQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIEluamVjdCxcbiAgSW5wdXQsXG4gIFJlbmRlcmVyMixcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvbkZhYiwgSW9uRmFiQnV0dG9uLCBJb25pY01vZHVsZSB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcbmltcG9ydCB7IEFjdGlvblNoZWV0Q29tcG9uZW50IH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9tb2RhbCc7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbSW9uaWNNb2R1bGUsIENvbW1vbk1vZHVsZV0sXG4gIHNlbGVjdG9yOiAna2lyYnktZmFiLXNoZWV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZhYi1zaGVldC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ZhYi1zaGVldC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRmFiU2hlZXRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBBZnRlclZpZXdJbml0IHtcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgaG9yaXpvbnRhbEFsaWdubWVudDogJ2xlZnQnIHwgJ2NlbnRlcicgfCAncmlnaHQnID0gJ3JpZ2h0JztcblxuICBwcml2YXRlIF9pc0ZhYlNoZWV0T3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmlzLW9wZW4nKVxuICBnZXQgaXNGYWJTaGVldE9wZW4oKSB7XG4gICAgcmV0dXJuIHRoaXMuX2lzRmFiU2hlZXRPcGVuO1xuICB9XG5cbiAgQENvbnRlbnRDaGlsZChBY3Rpb25TaGVldENvbXBvbmVudCwgeyBzdGF0aWM6IGZhbHNlIH0pIGFjdGlvblNoZWV0OiBBY3Rpb25TaGVldENvbXBvbmVudDtcblxuICBAVmlld0NoaWxkKElvbkZhYkJ1dHRvbiwgeyBzdGF0aWM6IHRydWUsIHJlYWQ6IEVsZW1lbnRSZWYgfSlcbiAgaW9uRmFiQnV0dG9uOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcblxuICBAVmlld0NoaWxkKElvbkZhYiwgeyBzdGF0aWM6IHRydWUgfSlcbiAgaW9uRmFiOiBJb25GYWI7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgIEBJbmplY3QoRE9DVU1FTlQpIHByaXZhdGUgZG9jdW1lbnQ6IERvY3VtZW50XG4gICkge31cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuYWN0aW9uU2hlZXQpIHtcbiAgICAgIHRoaXMuYWN0aW9uU2hlZXQuaGlkZUNhbmNlbCA9IHRydWU7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2xhc3ModGhpcy5kb2N1bWVudC5ib2R5LCAnYmFja2Ryb3Atbm8tc2Nyb2xsJyk7XG4gIH1cblxuICBoaWRlQWN0aW9ucygpIHtcbiAgICB0aGlzLmlvbkZhYi5jbG9zZSgpLnRoZW4oKCkgPT4gdGhpcy5mYWJTaGVldFN0YXRlQ2hhbmdlZChmYWxzZSkpO1xuICB9XG5cbiAgb25GYWJCdXR0b25DbGljaygpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuZmFiU2hlZXRTdGF0ZUNoYW5nZWQodGhpcy5pb25GYWIuYWN0aXZhdGVkKTtcbiAgICB9KTtcbiAgfVxuXG4gIG9uRmFiTGlzdENsaWNrKCkge1xuICAgIHRoaXMuaW9uRmFiLmNsb3NlKCkudGhlbigoKSA9PiB7XG4gICAgICB0aGlzLmZhYlNoZWV0U3RhdGVDaGFuZ2VkKGZhbHNlKTtcbiAgICB9KTtcbiAgfVxuXG4gIGZhYlNoZWV0U3RhdGVDaGFuZ2VkKGlzT3BlbjogYm9vbGVhbikge1xuICAgIHRoaXMuX2lzRmFiU2hlZXRPcGVuID0gaXNPcGVuO1xuICAgIGlmICh0aGlzLmlzRmFiU2hlZXRPcGVuKSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuZG9jdW1lbnQuYm9keSwgJ2ZhYi1zaGVldC1hY3RpdmUnKTtcbiAgICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5kb2N1bWVudC5ib2R5LCAnYmFja2Ryb3Atbm8tc2Nyb2xsJyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2xhc3ModGhpcy5kb2N1bWVudC5ib2R5LCAnZmFiLXNoZWV0LWFjdGl2ZScpO1xuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLmRvY3VtZW50LmJvZHksICdiYWNrZHJvcC1uby1zY3JvbGwnKTtcbiAgICB9XG5cbiAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgfVxufVxuIiwiPGlvbi1iYWNrZHJvcFxuICBbY2xhc3MuYmFja2Ryb3AtdmlzaWJsZV09XCJpc0ZhYlNoZWV0T3BlblwiXG4gIFtzdG9wUHJvcGFnYXRpb25dPVwiZmFsc2VcIlxuICAoaW9uQmFja2Ryb3BUYXApPVwiaGlkZUFjdGlvbnMoKVwiXG4gIChjbGljayk9XCJoaWRlQWN0aW9ucygpXCJcbj48L2lvbi1iYWNrZHJvcD5cbjxpb24tZmFiPlxuICA8aW9uLWZhYi1idXR0b25cbiAgICAoY2xpY2spPVwib25GYWJCdXR0b25DbGljaygpXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFthdHRyLmRpc2FibGVkXT1cImRpc2FibGVkID8gdHJ1ZSA6IG51bGxcIlxuICAgIHRhYmluZGV4PVwiLTFcIlxuICA+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwia2lyYnktaWNvblwiPjwvbmctY29udGVudD5cbiAgPC9pb24tZmFiLWJ1dHRvbj5cbiAgPGlvbi1mYWItbGlzdFxuICAgICpuZ0lmPVwiYWN0aW9uU2hlZXRcIlxuICAgIHNpZGU9XCJ0b3BcIlxuICAgIGNsYXNzPVwie3sgaG9yaXpvbnRhbEFsaWdubWVudCB9fVwiXG4gICAgKGNsaWNrKT1cIm9uRmFiTGlzdENsaWNrKClcIlxuICA+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwia2lyYnktYWN0aW9uLXNoZWV0XCI+PC9uZy1jb250ZW50PlxuICA8L2lvbi1mYWItbGlzdD5cbjwvaW9uLWZhYj5cbiJdfQ==
|