@kirbydesign/designsystem 10.3.1 → 10.4.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/README.md +7 -0
- package/calendar/calendar.component.d.ts.map +1 -1
- package/checkbox/checkbox.component.d.ts +5 -3
- package/checkbox/checkbox.component.d.ts.map +1 -1
- package/config/index.d.ts +6 -0
- package/config/kirbydesign-designsystem-config.d.ts.map +1 -0
- package/config/provide-kirby.d.ts +27 -0
- package/config/provide-kirby.d.ts.map +1 -0
- package/config/public_api.d.ts +2 -0
- package/config/public_api.d.ts.map +1 -0
- package/dropdown/dropdown.module.d.ts +2 -1
- package/dropdown/dropdown.module.d.ts.map +1 -1
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-badge.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +8 -7
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +18 -18
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-chart.mjs +23 -23
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +13 -8
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs +37 -0
- package/fesm2022/kirbydesign-designsystem-config.mjs.map +1 -0
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-divider.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +18 -15
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-flag.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +143 -70
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-header.mjs +21 -21
- package/fesm2022/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +11 -12
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-item.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-list.mjs +41 -41
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-menu.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-modal.mjs +45 -47
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +86 -47
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-popover.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-radio.mjs +36 -18
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-shared.mjs +65 -23
- package/fesm2022/kirbydesign-designsystem-shared.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-slide.mjs +14 -14
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +14 -14
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +287 -287
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-toast.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +77 -9
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +50 -19
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +84 -26
- package/fesm2022/kirbydesign-designsystem.mjs.map +1 -1
- package/form-field/form-field.component.d.ts +21 -6
- package/form-field/form-field.component.d.ts.map +1 -1
- package/form-field/input/input.component.d.ts +11 -7
- package/form-field/input/input.component.d.ts.map +1 -1
- package/form-field/textarea/textarea.component.d.ts +8 -4
- package/form-field/textarea/textarea.component.d.ts.map +1 -1
- package/icon/kirby-icon-settings.d.ts.map +1 -1
- package/lib/components/segmented-control/segmented-control.component.d.ts +35 -1
- package/lib/components/segmented-control/segmented-control.component.d.ts.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/kirby.module.d.ts +45 -48
- package/lib/kirby.module.d.ts.map +1 -1
- package/modal/modal/modal-component/modal.component.d.ts.map +1 -1
- package/package.json +40 -40
- package/page/page.component.d.ts +9 -2
- package/page/page.component.d.ts.map +1 -1
- package/radio/radio-group/radio-group.component.d.ts +13 -5
- package/radio/radio-group/radio-group.component.d.ts.map +1 -1
- package/readme.md +1 -1
- package/shared/controls/label-helpers.d.ts +13 -0
- package/shared/controls/label-helpers.d.ts.map +1 -1
- package/shared/fit-heading/fit-heading.directive.d.ts +1 -1
- package/shared/fit-heading/fit-heading.directive.d.ts.map +1 -1
- package/shared/translation/translation.interface.d.ts +1 -0
- package/shared/translation/translation.interface.d.ts.map +1 -1
- package/shared/translation/translation.service.d.ts.map +1 -1
- package/shared/translation/translations/da.d.ts.map +1 -1
- package/shared/translation/translations/de.d.ts +3 -0
- package/shared/translation/translations/de.d.ts.map +1 -0
- package/shared/translation/translations/en.d.ts.map +1 -1
- package/toggle/toggle.component.d.ts +13 -6
- package/toggle/toggle.component.d.ts.map +1 -1
- package/toggle-button/toggle-button.component.d.ts +35 -1
- package/toggle-button/toggle-button.component.d.ts.map +1 -1
- package/types/form-field-control.d.ts +6 -0
- package/types/form-field-control.d.ts.map +1 -0
- package/types/public_api.d.ts +1 -0
- package/types/public_api.d.ts.map +1 -1
- package/fesm2022/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -30
- package/fesm2022/kirbydesign-designsystem-kirby-ionic-module.mjs.map +0 -1
- package/kirby-ionic-module/index.d.ts +0 -6
- package/kirby-ionic-module/kirby-ionic.module.d.ts +0 -7
- package/kirby-ionic-module/kirby-ionic.module.d.ts.map +0 -1
- package/kirby-ionic-module/kirbydesign-designsystem-kirby-ionic-module.d.ts.map +0 -1
- package/kirby-ionic-module/public_api.d.ts +0 -2
- package/kirby-ionic-module/public_api.d.ts.map +0 -1
package/README.md
ADDED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.component.d.ts","sourceRoot":"","sources":["../../calendar/src/calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAEjB,UAAU,EACV,YAAY,EAKZ,SAAS,EACT,MAAM,EAEN,aAAa,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAYL,MAAM,IAAI,aAAa,EAIxB,MAAM,UAAU,CAAC;AAUlB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAuB,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;;AAE1F,MAAM,MAAM,MAAM,GAAG,aAAa,CAAC;AAEnC,UAAU,OAAO;IACf,sBAAsB,EAAE,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAaD,qBAOa,iBAAkB,YAAW,MAAM,EAAE,SAAS;IAyJvD,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,GAAG;IACJ,YAAY,EAAE,kBAAkB;IA1J/B,UAAU,qBAA4B;IACtC,UAAU,qBAA4B;IACtC,UAAU,uBAA8B;IACxC,oBAAoB,qBAA4B;IAChD,gBAAgB,qBAA4B;IAC7C,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAW;IACpC,eAAe,UAAS;IACxB,gBAAgB,UAAS;IACzB,kBAAkB,UAAS;IAC3B,iBAAiB,UAAS;IAEnC,IAAa,OAAO,CAAC,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAKtD;IACQ,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IAK9C,UAAU,UAAS;IAC5B;;;;;;OAMG;IACM,oBAAoB,EAAE,2BAA2B,CAAC;IAE3D,aAAa,SAA6D;IAC1E,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,WAAW,CAAc;IAIjC,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,QAAQ,CAAO;IACvB,OAAO,CAAC,QAAQ,CAAO;IACvB,OAAO,CAAC,YAAY,CAAO;IAC3B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"calendar.component.d.ts","sourceRoot":"","sources":["../../calendar/src/calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAEjB,UAAU,EACV,YAAY,EAKZ,SAAS,EACT,MAAM,EAEN,aAAa,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAYL,MAAM,IAAI,aAAa,EAIxB,MAAM,UAAU,CAAC;AAUlB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAuB,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;;AAE1F,MAAM,MAAM,MAAM,GAAG,aAAa,CAAC;AAEnC,UAAU,OAAO;IACf,sBAAsB,EAAE,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAaD,qBAOa,iBAAkB,YAAW,MAAM,EAAE,SAAS;IAyJvD,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,GAAG;IACJ,YAAY,EAAE,kBAAkB;IA1J/B,UAAU,qBAA4B;IACtC,UAAU,qBAA4B;IACtC,UAAU,uBAA8B;IACxC,oBAAoB,qBAA4B;IAChD,gBAAgB,qBAA4B;IAC7C,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAW;IACpC,eAAe,UAAS;IACxB,gBAAgB,UAAS;IACzB,kBAAkB,UAAS;IAC3B,iBAAiB,UAAS;IAEnC,IAAa,OAAO,CAAC,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAKtD;IACQ,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IAK9C,UAAU,UAAS;IAC5B;;;;;;OAMG;IACM,oBAAoB,EAAE,2BAA2B,CAAC;IAE3D,aAAa,SAA6D;IAC1E,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,WAAW,CAAc;IAIjC,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,QAAQ,CAAO;IACvB,OAAO,CAAC,QAAQ,CAAO;IACvB,OAAO,CAAC,YAAY,CAAO;IAC3B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAA0B;IAEjD,IAAI,YAAY,IAAI,IAAI,CAEvB;IAED,IAAa,YAAY,CAAC,eAAe,EAAE,IAAI,GAAG,IAAI,EAYrD;IAED,IAAI,aAAa,IAAI,IAAI,EAAE,CAE1B;IAED,IAAa,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,EAEvC;IAED,IAAI,YAAY,IAAI,IAAI,EAAE,CAEzB;IAED,IAAa,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,EAEtC;IAED,IAAI,SAAS,IAAI,IAAI,CAEpB;IAED,IAAa,SAAS,CAAC,KAAK,EAAE,IAAI,EAEjC;IAED,IAAI,OAAO,IAAI,IAAI,CAElB;IAED,IAAa,OAAO,CAAC,KAAK,EAAE,IAAI,EAK/B;IAED,IAAI,OAAO,IAAI,IAAI,CAElB;IAED,IAAa,OAAO,CAAC,KAAK,EAAE,IAAI,EAK/B;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,EAAE,CAQ7B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IACI,iBAAiB,YAEpB;IAED,OAAO,CAAC,YAAY;gBAKC,MAAM,EAAE,MAAM,EACzB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,iBAAiB,EACvB,YAAY,EAAE,kBAAkB;IAMzC,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,eAAe;IAavB,QAAQ;IAMR,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAiBzC,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAOrB,kBAAkB;IA+BlB,OAAO,CAAC,sBAAsB;IAc9B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,oBAAoB;IAY5B,eAAe,CAAC,MAAM,EAAE,WAAW;IAoBnC,YAAY,CAAC,KAAK,EAAE,MAAM;IAU1B,WAAW,CAAC,IAAI,EAAE,MAAM;IAMxB,OAAO,CAAC,gBAAgB;IAQxB,IAAI,gBAAgB,IAAI,OAAO,CAS9B;IAED,IAAI,mBAAmB,IAAI,OAAO,CASjC;IAED,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,SAAS;IAuBjB,cAAc,CAAC,KAAK,EAAE,aAAa;yCAlfxB,iBAAiB;2CAAjB,iBAAiB;CA0hB7B"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, OnInit } from '@angular/core';
|
|
1
|
+
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
|
|
2
2
|
import { ControlValueAccessor } from '@angular/forms';
|
|
3
3
|
import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class CheckboxComponent implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit {
|
|
6
6
|
private element;
|
|
7
7
|
private ionicElementPartHelper;
|
|
8
|
+
private cdr;
|
|
8
9
|
private ionCheckboxElement?;
|
|
9
10
|
checked: boolean;
|
|
11
|
+
indeterminate: boolean;
|
|
10
12
|
attentionLevel: '1' | '2';
|
|
11
13
|
text: string;
|
|
12
14
|
size: 'xs' | 'sm' | 'md';
|
|
@@ -20,7 +22,7 @@ export declare class CheckboxComponent implements AfterViewInit, ControlValueAcc
|
|
|
20
22
|
_justify: 'start' | 'end' | 'space-between';
|
|
21
23
|
_labelPlacement: 'end' | 'fixed' | 'stacked' | 'start';
|
|
22
24
|
_hasSlottedContent: boolean;
|
|
23
|
-
constructor(element: ElementRef<HTMLElement>, ionicElementPartHelper: IonicElementPartHelper);
|
|
25
|
+
constructor(element: ElementRef<HTMLElement>, ionicElementPartHelper: IonicElementPartHelper, cdr: ChangeDetectorRef);
|
|
24
26
|
ngOnInit(): void;
|
|
25
27
|
ngAfterViewInit(): void;
|
|
26
28
|
ngAfterContentInit(): void;
|
|
@@ -59,6 +61,6 @@ export declare class CheckboxComponent implements AfterViewInit, ControlValueAcc
|
|
|
59
61
|
*/
|
|
60
62
|
setDisabledState?(isDisabled: boolean): void;
|
|
61
63
|
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
62
|
-
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, ["*"], true, never>;
|
|
64
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "kirby-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "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, ["*"], true, never>;
|
|
63
65
|
}
|
|
64
66
|
//# sourceMappingURL=checkbox.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../checkbox/src/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAChB,aAAa,
|
|
1
|
+
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../checkbox/src/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAChB,aAAa,EAEb,iBAAiB,EAEjB,UAAU,EACV,YAAY,EAIZ,MAAM,EAGP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;;AAI3E,qBAea,iBACX,YAAW,aAAa,EAAE,oBAAoB,EAAE,MAAM,EAAE,gBAAgB;IA0CtE,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,sBAAsB;IAC9B,OAAO,CAAC,GAAG;IAzCb,OAAO,CAAC,kBAAkB,CAAC,CAAqC;IAEvD,OAAO,EAAE,OAAO,CAAS;IACzB,aAAa,EAAE,OAAO,CAAS;IAC/B,cAAc,EAAE,GAAG,GAAG,GAAG,CAAO;IAGzC,IAAI,EAAE,MAAM,CAAC;IAIb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAIhC,QAAQ,EAAE,OAAO,CAAS;IAEjB,QAAQ,UAAS;IAC1B,IACI,WAAW,WAEd;IAED,IAA2C,iBAAiB,YAE3D;IACD,IAA2C,iBAAiB,YAE3D;IAEsC,UAAU,EAAE,MAAM,CAAC;IAEhD,aAAa,wBAA+B;IAEtD,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,eAAe,CAAW;IACtD,eAAe,EAAE,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAS;IAC/D,kBAAkB,EAAE,OAAO,CAAC;gBAGlB,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,EAChC,sBAAsB,EAAE,sBAAsB,EAC9C,GAAG,EAAE,iBAAiB;IAGhC,QAAQ,IAAI,IAAI;IAiBhB,eAAe,IAAI,IAAI;IAcvB,kBAAkB,IAAI,IAAI;IAS1B,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAMjC,MAAM;IAMN,OAAO,CAAC,SAAS,CAAsC;IAEvD,OAAO,CAAC,UAAU,CAAY;IAE9B;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,EAAE,GAAG,GAAG,IAAI;IAI/B;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,EAAE,GAAG,GAAG,IAAI;IAIhC;;;;;OAKG;IACH,gBAAgB,CAAC,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;yCA/IjC,iBAAiB;2CAAjB,iBAAiB;CAkJ7B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-config.d.ts","sourceRoot":"","sources":["../../config/src/kirbydesign-designsystem-config.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { EnvironmentProviders, InjectionToken } from '@angular/core';
|
|
2
|
+
/**
|
|
3
|
+
* Configuration object for global configuration of Kirby.
|
|
4
|
+
*/
|
|
5
|
+
export interface KirbyConfig {
|
|
6
|
+
moduleRootRoutePath?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Activate focus management for components rendered in a kirby-router-outlet.
|
|
9
|
+
* When a kirby-page enters the view, focus will be set to the pages primary heading (h1) inside the pages toolbar.
|
|
10
|
+
*/
|
|
11
|
+
focusManager?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Set the HTML documents title to match the title of any kirby-page entering the view.
|
|
14
|
+
*/
|
|
15
|
+
setHtmlDocTitle?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Injection token for provided Kirby configuration.
|
|
19
|
+
*/
|
|
20
|
+
export declare const KIRBY_CONFIG: InjectionToken<KirbyConfig>;
|
|
21
|
+
/**
|
|
22
|
+
* Sets up top level configuration and providers needed for the Kirby components.
|
|
23
|
+
*
|
|
24
|
+
* @param config - Optional configuration for the Kirby design system.
|
|
25
|
+
*/
|
|
26
|
+
export declare function provideKirby(config?: KirbyConfig): EnvironmentProviders;
|
|
27
|
+
//# sourceMappingURL=provide-kirby.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"provide-kirby.d.ts","sourceRoot":"","sources":["../../config/src/provide-kirby.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,cAAc,EAGf,MAAM,eAAe,CAAC;AAIvB;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,6BAAkD,CAAC;AAE5E;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,oBAAoB,CAqBvE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public_api.d.ts","sourceRoot":"","sources":["../../config/src/public_api.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
|
@@ -7,9 +7,10 @@ import * as i5 from "@kirbydesign/designsystem/form-field";
|
|
|
7
7
|
import * as i6 from "@kirbydesign/designsystem/popover";
|
|
8
8
|
import * as i7 from "@kirbydesign/designsystem/button";
|
|
9
9
|
import * as i8 from "@angular/common";
|
|
10
|
+
import * as i9 from "@kirbydesign/designsystem/list";
|
|
10
11
|
export declare class DropdownModule {
|
|
11
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownModule, never>;
|
|
12
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<DropdownModule, [typeof i1.DropdownComponent], [typeof i2.CardModule, typeof i3.IconModule, typeof i4.ItemModule, typeof i5.FormFieldModule, typeof i6.PopoverComponent, typeof i7.ButtonComponent, typeof i8.CommonModule], [typeof i1.DropdownComponent]>;
|
|
13
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DropdownModule, [typeof i1.DropdownComponent], [typeof i2.CardModule, typeof i3.IconModule, typeof i4.ItemModule, typeof i5.FormFieldModule, typeof i6.PopoverComponent, typeof i7.ButtonComponent, typeof i8.CommonModule, typeof i9.ListModule], [typeof i1.DropdownComponent, typeof i9.ListItemTemplateDirective]>;
|
|
13
14
|
static ɵinj: i0.ɵɵInjectorDeclaration<DropdownModule>;
|
|
14
15
|
}
|
|
15
16
|
//# sourceMappingURL=dropdown.module.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.module.d.ts","sourceRoot":"","sources":["../../dropdown/src/dropdown.module.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dropdown.module.d.ts","sourceRoot":"","sources":["../../dropdown/src/dropdown.module.ts"],"names":[],"mappings":";;;;;;;;;;AAgBA,qBAea,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, EventEmitter,
|
|
3
|
-
import { trigger, state,
|
|
2
|
+
import { Directive, EventEmitter, ContentChildren, Output, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
4
4
|
import { ListComponent } from '@kirbydesign/designsystem/list';
|
|
5
5
|
import * as i1 from '@kirbydesign/designsystem/icon';
|
|
6
6
|
import { IconModule } from '@kirbydesign/designsystem/icon';
|
|
7
7
|
|
|
8
8
|
class AccordionDirective {
|
|
9
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
10
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
9
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionDirective, isStandalone: false, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionDirective, decorators: [{
|
|
13
13
|
type: Directive,
|
|
14
14
|
args: [{
|
|
15
15
|
selector: '[kirbyAccordion], kirby-accordion',
|
|
@@ -60,8 +60,8 @@ class AccordionItemComponent {
|
|
|
60
60
|
this.isExpanded = !this.isExpanded && !this.isDisabled;
|
|
61
61
|
this.toggle.emit(this.isExpanded);
|
|
62
62
|
}
|
|
63
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
64
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
63
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AccordionItemComponent, isStandalone: false, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding" }, outputs: { toggle: "toggle" }, host: { properties: { "class.has-list": "this.hasList" } }, queries: [{ propertyName: "listChildren", predicate: ListComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n <div\n (click)=\"_onToggleExpanded($event)\"\n (keydown.ENTER)=\"_onToggleExpanded($event)\"\n (keydown.space)=\"_onToggleExpanded($event)\"\n class=\"header\"\n role=\"button\"\n [class.disabled]=\"isDisabled\"\n [tabindex]=\"isDisabled ? -1 : 0\"\n [class.expanded]=\"isExpanded\"\n [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n [attr.aria-expanded]=\"isExpanded\"\n [attr.aria-controls]=\"_contentId\"\n [id]=\"_titleId\"\n >\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <div class=\"title\">{{ getTitle() }}</div>\n <kirby-icon name=\"arrow-down\"></kirby-icon>\n </div>\n <div\n class=\"content\"\n role=\"region\"\n [attr.aria-labelledby]=\"_titleId\"\n [id]=\"_contentId\"\n [@isExpanded]=\"!!isExpanded\"\n >\n <div class=\"content-body\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host(.has-list){--kirby-item-background: transparent}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], animations: [
|
|
65
65
|
trigger('isExpanded', [
|
|
66
66
|
state('true', style({ height: '*', visibility: 'visible' })),
|
|
67
67
|
state('false', style({ height: '0px', visibility: 'hidden' })),
|
|
@@ -69,7 +69,7 @@ class AccordionItemComponent {
|
|
|
69
69
|
]),
|
|
70
70
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
71
71
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
74
74
|
args: [{ selector: 'kirby-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
75
75
|
trigger('isExpanded', [
|
|
@@ -100,11 +100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
100
100
|
|
|
101
101
|
const declarations = [AccordionDirective, AccordionItemComponent];
|
|
102
102
|
class AccordionModule {
|
|
103
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
104
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
105
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
103
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
104
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
|
|
105
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
|
|
106
106
|
}
|
|
107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionModule, decorators: [{
|
|
108
108
|
type: NgModule,
|
|
109
109
|
args: [{
|
|
110
110
|
declarations: [...declarations],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken, ElementRef,
|
|
4
|
+
import { InjectionToken, ElementRef, HostBinding, ViewChild, ContentChildren, Input, Optional, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
5
|
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
6
6
|
import * as i2 from '@kirbydesign/designsystem/item';
|
|
7
7
|
import { ItemModule } from '@kirbydesign/designsystem/item';
|
|
@@ -95,10 +95,10 @@ class ActionGroupComponent {
|
|
|
95
95
|
text: button.textContent.trim(),
|
|
96
96
|
}));
|
|
97
97
|
}
|
|
98
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
99
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
98
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n <kirby-item\n *ngFor=\"let action of _collapsedActions\"\n [selectable]=\"true\"\n (click)=\"onActionSelect(action)\"\n >\n {{ action.text }}\n </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
100
100
|
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ActionGroupComponent, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
103
|
args: [{ selector: 'kirby-action-group', imports: [CommonModule, ButtonComponent, ItemModule, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n <kirby-item\n *ngFor=\"let action of _collapsedActions\"\n [selectable]=\"true\"\n (click)=\"onActionSelect(action)\"\n >\n {{ action.text }}\n </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"] }]
|
|
104
104
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter,
|
|
4
|
+
import { EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
5
|
|
|
6
6
|
var AvatarSize;
|
|
7
7
|
(function (AvatarSize) {
|
|
@@ -21,10 +21,10 @@ class AvatarComponent {
|
|
|
21
21
|
onImageError($event) {
|
|
22
22
|
this.imageError.emit($event);
|
|
23
23
|
}
|
|
24
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
25
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
24
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img\n *ngIf=\"imageSrc\"\n [src]=\"imageSrc\"\n [attr.alt]=\"altText\"\n [attr.loading]=\"imageLoading\"\n (error)=\"onImageError($event)\"\n />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img\n *ngIf=\"imageSrc\"\n [src]=\"imageSrc\"\n [attr.alt]=\"altText\"\n [attr.loading]=\"imageLoading\"\n (error)=\"onImageError($event)\"\n />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
|
|
30
30
|
}], propDecorators: { imageSrc: [{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { HostBinding, Input, Component } from '@angular/core';
|
|
5
5
|
import * as i1 from '@kirbydesign/designsystem/shared';
|
|
6
6
|
import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
|
|
7
7
|
import { IonBadge } from '@ionic/angular/standalone';
|
|
@@ -22,10 +22,10 @@ class BadgeComponent {
|
|
|
22
22
|
console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);
|
|
23
23
|
this._text = value;
|
|
24
24
|
}
|
|
25
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
26
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
25
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: 'kirby-badge', imports: [CommonModule, IonBadge], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n <span *ngIf=\"size === 'sm'\"></span>\n <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"] }]
|
|
31
31
|
}], propDecorators: { text: [{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { ElementRef,
|
|
3
|
+
import { ElementRef, HostListener, ContentChild, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { IconComponent } from '@kirbydesign/designsystem/icon';
|
|
5
5
|
|
|
6
6
|
var ButtonSize;
|
|
@@ -108,10 +108,10 @@ class ButtonComponent {
|
|
|
108
108
|
event.stopImmediatePropagation();
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
112
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { listeners: { "keydown.enter": "_onEnterOrSpace($event)", "keydown.space": "_onEnterOrSpace($event)" }, properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
111
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
112
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { listeners: { "keydown.enter": "_onEnterOrSpace($event)", "keydown.space": "_onEnterOrSpace($event)" }, properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
113
113
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
116
116
|
args: [{ imports: [CommonModule], selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
|
|
117
117
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { attentionLevel: [{
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i4 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, LOCALE_ID,
|
|
5
|
-
import { isBefore, isAfter, startOfDay, format, isSameMonth, startOfMonth, eachDayOfInterval,
|
|
4
|
+
import { EventEmitter, LOCALE_ID, HostBinding, Input, Output, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
+
import { isBefore, isAfter, startOfDay, format, isSameMonth, startOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, isSameDay, add, isWeekend, getYear, lastDayOfWeek } from 'date-fns';
|
|
6
6
|
import { toZonedTime, fromZonedTime } from 'date-fns-tz';
|
|
7
|
-
import {
|
|
7
|
+
import { enUS, enGB, de, da } from 'date-fns/locale';
|
|
8
8
|
import { capitalizeFirstLetter } from '@kirbydesign/core';
|
|
9
9
|
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
10
10
|
import * as i2 from '@kirbydesign/designsystem/dropdown';
|
|
@@ -126,7 +126,7 @@ class CalendarComponent {
|
|
|
126
126
|
this._tableMonthId = UniqueIdGenerator.scopedTo('kirby-calendar-month').next();
|
|
127
127
|
this._disabledDates = [];
|
|
128
128
|
this._enabledDates = [];
|
|
129
|
-
this.includedLocales = { da, enGB, enUS };
|
|
129
|
+
this.includedLocales = { da, de, enGB, enUS };
|
|
130
130
|
this.locale = this.mapLocale(locale);
|
|
131
131
|
this.timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
132
132
|
}
|
|
@@ -146,6 +146,7 @@ class CalendarComponent {
|
|
|
146
146
|
formatDateLabel() {
|
|
147
147
|
const localeDateFormats = {
|
|
148
148
|
da: 'd. MMMM',
|
|
149
|
+
de: 'd. MMMM',
|
|
149
150
|
'en-GB': 'd MMMM',
|
|
150
151
|
'en-US': 'MMMM d',
|
|
151
152
|
};
|
|
@@ -459,10 +460,10 @@ class CalendarComponent {
|
|
|
459
460
|
event.preventDefault();
|
|
460
461
|
this.focusDate(newDate);
|
|
461
462
|
}
|
|
462
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
463
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
463
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CalendarComponent, deps: [{ token: LOCALE_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
464
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n <div class=\"month-navigator\">\n <button\n kirby-button\n type=\"button\"\n class=\"no-margin\"\n [attr.aria-label]=\"translations.get('previousMonth')\"\n [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n [noDecoration]=\"true\"\n (click)=\"_changeMonth(-1)\"\n >\n <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n </button>\n\n <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n <span class=\"month\">{{ activeMonthName }}</span>\n <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n </div>\n\n <button\n kirby-button\n type=\"button\"\n class=\"no-margin\"\n [attr.aria-label]=\"translations.get('nextMonth')\"\n [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n [noDecoration]=\"true\"\n (click)=\"_changeMonth(1)\"\n >\n <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n </button>\n </div>\n <kirby-dropdown\n *ngIf=\"_hasYearNavigator\"\n [usePopover]=\"usePopover\"\n [selectedIndex]=\"navigatedYear\"\n [items]=\"navigableYears\"\n [attr.aria-label]=\"translations.get('selectYear')\"\n popout=\"left\"\n (change)=\"_changeYear($event)\"\n ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n <thead>\n <tr>\n <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let week of _month\">\n <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n <button\n kirby-button\n type=\"button\"\n (click)=\"_onDateSelected(day)\"\n (keydown)=\"_onDateKeydown($event)\"\n class=\"day\"\n [class.current-month]=\"day.isCurrentMonth\"\n [class.weekend]=\"day.isWeekend\"\n [class.today]=\"day.isToday\"\n [class.selectable]=\"day.isSelectable\"\n [class.selected]=\"day.isSelected\"\n [class.focussed]=\"day.isFocussed\"\n [class.past]=\"day.isPast\"\n [attr.aria-label]=\"day.ariaLabel\"\n [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n [noDecoration]=\"true\"\n [disabled]=\"day.isFocusable ? null : true\"\n [tabIndex]=\"day.isFocussed ? 0 : -1\"\n >\n {{ day.date }}\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
464
465
|
}
|
|
465
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
466
467
|
type: Component,
|
|
467
468
|
args: [{ imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n <div class=\"month-navigator\">\n <button\n kirby-button\n type=\"button\"\n class=\"no-margin\"\n [attr.aria-label]=\"translations.get('previousMonth')\"\n [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n [noDecoration]=\"true\"\n (click)=\"_changeMonth(-1)\"\n >\n <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n </button>\n\n <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n <span class=\"month\">{{ activeMonthName }}</span>\n <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n </div>\n\n <button\n kirby-button\n type=\"button\"\n class=\"no-margin\"\n [attr.aria-label]=\"translations.get('nextMonth')\"\n [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n [noDecoration]=\"true\"\n (click)=\"_changeMonth(1)\"\n >\n <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n </button>\n </div>\n <kirby-dropdown\n *ngIf=\"_hasYearNavigator\"\n [usePopover]=\"usePopover\"\n [selectedIndex]=\"navigatedYear\"\n [items]=\"navigableYears\"\n [attr.aria-label]=\"translations.get('selectYear')\"\n popout=\"left\"\n (change)=\"_changeYear($event)\"\n ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n <thead>\n <tr>\n <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let week of _month\">\n <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n <button\n kirby-button\n type=\"button\"\n (click)=\"_onDateSelected(day)\"\n (keydown)=\"_onDateKeydown($event)\"\n class=\"day\"\n [class.current-month]=\"day.isCurrentMonth\"\n [class.weekend]=\"day.isWeekend\"\n [class.today]=\"day.isToday\"\n [class.selectable]=\"day.isSelectable\"\n [class.selected]=\"day.isSelected\"\n [class.focussed]=\"day.isFocussed\"\n [class.past]=\"day.isPast\"\n [attr.aria-label]=\"day.ariaLabel\"\n [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n [noDecoration]=\"true\"\n [disabled]=\"day.isFocusable ? null : true\"\n [tabIndex]=\"day.isFocussed ? 0 : -1\"\n >\n {{ day.date }}\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\n"] }]
|
|
468
469
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|