@kirbydesign/designsystem 11.11.2 → 11.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-accordion.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-action-group.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-badge.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-divider.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-divider.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-flag.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-flag.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +44 -34
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-gesture.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-gesture.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-header.mjs +20 -20
- package/fesm2022/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +19 -12
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +45 -45
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal.mjs +52 -52
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +46 -46
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-popover.mjs +34 -19
- package/fesm2022/kirbydesign-designsystem-popover.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +27 -64
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-section-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +27 -29
- package/fesm2022/kirbydesign-designsystem-shared.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs +15 -14
- package/fesm2022/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-spinner.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +17 -17
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +286 -286
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-testing.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toast.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toast.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +10 -10
- package/icons/svg/person-blocked.svg +3 -0
- package/icons/svg/person-check.svg +3 -0
- package/icons/svg/person-close.svg +3 -0
- package/icons/svg/person-cloud.svg +3 -0
- package/icons/svg/person-power.svg +3 -0
- package/icons/svg/person-warning.svg +3 -0
- package/icons/svg/phone-device-pin.svg +3 -0
- package/icons/svg/phone-device.svg +3 -2
- package/package.json +4 -4
- package/types/kirbydesign-designsystem-fab-sheet.d.ts +1 -1
- package/types/kirbydesign-designsystem-form-field.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-item-sliding.d.ts +1 -1
- package/types/kirbydesign-designsystem-item.d.ts +1 -1
- package/types/kirbydesign-designsystem-kirby-app.d.ts +1 -1
- package/types/kirbydesign-designsystem-list.d.ts +2 -2
- package/types/kirbydesign-designsystem-loading-overlay.d.ts +1 -1
- package/types/kirbydesign-designsystem-modal.d.ts +1 -1
- package/types/kirbydesign-designsystem-page.d.ts +2 -2
- package/types/kirbydesign-designsystem-page.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-popover.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-progress-circle.d.ts +5 -29
- package/types/kirbydesign-designsystem-progress-circle.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-radio.d.ts +1 -1
- package/types/kirbydesign-designsystem-router-outlet.d.ts +2 -2
- package/types/kirbydesign-designsystem-shared.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-tabs.d.ts +3 -3
- package/types/kirbydesign-designsystem-toast.d.ts +1 -1
|
@@ -5,7 +5,7 @@ import { EventEmitter, TemplateRef, ViewChildren, ContentChild, Output, Input, C
|
|
|
5
5
|
import { CardComponent } from '@kirbydesign/designsystem/card';
|
|
6
6
|
import { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';
|
|
7
7
|
import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';
|
|
8
|
-
import { IonBackdrop, IonReorderGroup } from '@ionic/angular
|
|
8
|
+
import { IonBackdrop, IonReorderGroup } from '@ionic/angular';
|
|
9
9
|
|
|
10
10
|
class ReorderEvent {
|
|
11
11
|
constructor(ev, parentItem) {
|
|
@@ -66,10 +66,10 @@ class ReorderListComponent {
|
|
|
66
66
|
this.observer?.disconnect();
|
|
67
67
|
delete this.observer;
|
|
68
68
|
}
|
|
69
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
70
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
69
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ReorderListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
70
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ReorderListComponent, isStandalone: true, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (reorderActive) {\n <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n @for (reorderItem of items; track reorderItem) {\n <div>\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: reorderItem }\n \"\n ></ng-container>\n @if (reorderItem[subItemsName]) {\n <div #reorderGroupContainer>\n <ion-reorder-group\n (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n disabled=\"false\"\n >\n @for (subItem of reorderItem[subItemsName]; track subItem) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n }\n </ion-reorder-group>\n </div>\n }\n </kirby-card>\n </div>\n }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child kirby-item{border-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"], outputs: ["ionBackdropTap"] }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"], outputs: ["ionItemReorder", "ionReorderStart", "ionReorderMove", "ionReorderEnd"] }] }); }
|
|
71
71
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ReorderListComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
74
74
|
args: [{ imports: [
|
|
75
75
|
CardComponent,
|
|
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
78
78
|
CommonModule,
|
|
79
79
|
IonBackdrop,
|
|
80
80
|
IonReorderGroup,
|
|
81
|
-
], selector: 'kirby-reorder-list', template: "@if (reorderActive) {\n <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n @for (reorderItem of items; track reorderItem) {\n <div>\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: reorderItem }\n \"\n ></ng-container>\n @if (reorderItem[subItemsName]) {\n <div #reorderGroupContainer>\n <ion-reorder-group\n (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n disabled=\"false\"\n >\n @for (subItem of reorderItem[subItemsName]; track subItem) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n }\n </ion-reorder-group>\n </div>\n }\n </kirby-card>\n </div>\n }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:
|
|
81
|
+
], selector: 'kirby-reorder-list', template: "@if (reorderActive) {\n <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n @for (reorderItem of items; track reorderItem) {\n <div>\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: reorderItem }\n \"\n ></ng-container>\n @if (reorderItem[subItemsName]) {\n <div #reorderGroupContainer>\n <ion-reorder-group\n (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n disabled=\"false\"\n >\n @for (subItem of reorderItem[subItemsName]; track subItem) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n }\n </ion-reorder-group>\n </div>\n }\n </kirby-card>\n </div>\n }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child kirby-item{border-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"] }]
|
|
82
82
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
83
83
|
type: Input
|
|
84
84
|
}], subItemsName: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-reorder-list.mjs","sources":["../../reorder-list/src/reorder-event.ts","../../reorder-list/src/reorder-list.component.ts","../../reorder-list/src/reorder-list.component.html","../../reorder-list/src/kirbydesign-designsystem-reorder-list.ts"],"sourcesContent":["export class ReorderEvent {\n private origEvent: CustomEvent<any>;\n private parent?: any;\n\n constructor(ev: CustomEvent<any>, parentItem?: any) {\n this.origEvent = ev;\n this.parent = parentItem;\n this.origEvent.cancelBubble = true;\n }\n complete(listOrReorder?: boolean | any[]): Promise<any> {\n return this.origEvent.detail.complete(listOrReorder);\n }\n\n get parentItem(): any {\n return this.parent;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n QueryList,\n TemplateRef,\n ViewChildren,\n} from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\n\nimport { IonBackdrop, IonReorderGroup } from '@ionic/angular
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-reorder-list.mjs","sources":["../../reorder-list/src/reorder-event.ts","../../reorder-list/src/reorder-list.component.ts","../../reorder-list/src/reorder-list.component.html","../../reorder-list/src/kirbydesign-designsystem-reorder-list.ts"],"sourcesContent":["export class ReorderEvent {\n private origEvent: CustomEvent<any>;\n private parent?: any;\n\n constructor(ev: CustomEvent<any>, parentItem?: any) {\n this.origEvent = ev;\n this.parent = parentItem;\n this.origEvent.cancelBubble = true;\n }\n complete(listOrReorder?: boolean | any[]): Promise<any> {\n return this.origEvent.detail.complete(listOrReorder);\n }\n\n get parentItem(): any {\n return this.parent;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n QueryList,\n TemplateRef,\n ViewChildren,\n} from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\n\nimport { IonBackdrop, IonReorderGroup } from '@ionic/angular';\nimport { ReorderEvent } from './reorder-event';\n\n@Component({\n imports: [\n CardComponent,\n ItemComponent,\n LabelComponent,\n CommonModule,\n IonBackdrop,\n IonReorderGroup,\n ],\n selector: 'kirby-reorder-list',\n templateUrl: './reorder-list.component.html',\n styleUrls: ['./reorder-list.component.scss'],\n})\nexport class ReorderListComponent implements OnChanges, OnDestroy {\n @Input() items: any[];\n @Input() subItemsName: string;\n @Input() getItemTextDefault: (item: any) => string;\n\n @Output() itemReorder = new EventEmitter<ReorderEvent>();\n @Output() subItemReorder = new EventEmitter<ReorderEvent>();\n\n @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n itemTemplate: TemplateRef<any>;\n @ViewChildren('reorderGroupContainer')\n reorderGroupContainer: QueryList<ElementRef>;\n\n private observer: MutationObserver;\n reorderActive: boolean = false;\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n ngOnChanges(): void {\n if (this.items && this.items.length > 0) {\n setTimeout(() => {\n this.setupDomListener();\n });\n }\n }\n\n private setupDomListener() {\n const callback = (mutationsList: any) => {\n for (const mutation of mutationsList) {\n if (mutation.oldValue !== mutation.target['className']) {\n this.reorderActive = mutation.target['className'].includes('reorder-list-active');\n }\n }\n this.cdr.detectChanges();\n };\n this.observer = new MutationObserver(callback);\n\n this.reorderGroupContainer.forEach((div: ElementRef) => {\n this.observer.observe(div.nativeElement, {\n attributes: true,\n attributeFilter: ['class'],\n attributeOldValue: true,\n childList: false,\n subtree: true,\n });\n });\n }\n\n doReorder(ev: CustomEvent) {\n this.itemReorder.emit(new ReorderEvent(ev));\n }\n\n doSubReorder(ev: CustomEvent, parentItem: any) {\n this.subItemReorder.emit(new ReorderEvent(ev, parentItem));\n }\n\n ngOnDestroy() {\n //clean up the observer\n this.observer?.disconnect();\n delete this.observer;\n }\n}\n","@if (reorderActive) {\n <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n @for (reorderItem of items; track reorderItem) {\n <div>\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: reorderItem }\n \"\n ></ng-container>\n @if (reorderItem[subItemsName]) {\n <div #reorderGroupContainer>\n <ion-reorder-group\n (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n disabled=\"false\"\n >\n @for (subItem of reorderItem[subItemsName]; track subItem) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n }\n </ion-reorder-group>\n </div>\n }\n </kirby-card>\n </div>\n }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n </kirby-item>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
-
import { isPlatform, IonRouterOutlet } from '@ionic/angular
|
|
4
|
-
export { NavController } from '@ionic/angular
|
|
3
|
+
import { isPlatform, IonRouterOutlet } from '@ionic/angular';
|
|
4
|
+
export { NavController } from '@ionic/angular';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
|
|
7
7
|
class RouterOutletComponent {
|
|
8
8
|
constructor() {
|
|
9
9
|
this._animated = isPlatform('hybrid');
|
|
10
10
|
}
|
|
11
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: RouterOutletComponent, isStandalone: true, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "@if (main) {\n <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], dependencies: [{ kind: "component", type: IonRouterOutlet, selector: "ion-router-outlet" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RouterOutletComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
args: [{ selector: 'kirby-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonRouterOutlet], template: "@if (main) {\n <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: ["
|
|
16
|
+
args: [{ selector: 'kirby-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonRouterOutlet], template: "@if (main) {\n <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"] }]
|
|
17
17
|
}], propDecorators: { main: [{
|
|
18
18
|
type: Input
|
|
19
19
|
}] } });
|
|
20
20
|
|
|
21
21
|
class RouterOutletModule {
|
|
22
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
23
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
24
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
22
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RouterOutletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
23
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: RouterOutletModule, imports: [CommonModule, IonRouterOutlet, RouterOutletComponent], exports: [RouterOutletComponent] }); }
|
|
24
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RouterOutletModule, imports: [CommonModule, IonRouterOutlet, RouterOutletComponent] }); }
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RouterOutletModule, decorators: [{
|
|
27
27
|
type: NgModule,
|
|
28
28
|
args: [{
|
|
29
29
|
imports: [CommonModule, IonRouterOutlet, RouterOutletComponent],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-router-outlet.mjs","sources":["../../router-outlet/src/router-outlet.component.ts","../../router-outlet/src/router-outlet.component.html","../../router-outlet/src/router-outlet.module.ts","../../router-outlet/src/kirbydesign-designsystem-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { IonRouterOutlet, isPlatform } from '@ionic/angular
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-router-outlet.mjs","sources":["../../router-outlet/src/router-outlet.component.ts","../../router-outlet/src/router-outlet.component.html","../../router-outlet/src/router-outlet.module.ts","../../router-outlet/src/kirbydesign-designsystem-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { IonRouterOutlet, isPlatform } from '@ionic/angular';\n\n@Component({\n selector: 'kirby-router-outlet',\n templateUrl: './router-outlet.component.html',\n styleUrls: ['./router-outlet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IonRouterOutlet],\n})\nexport class RouterOutletComponent {\n @Input() main: boolean;\n\n _animated = isPlatform('hybrid');\n}\n","@if (main) {\n <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { RouterOutletComponent } from './router-outlet.component';\n\n@NgModule({\n imports: [CommonModule, IonRouterOutlet, RouterOutletComponent],\n exports: [RouterOutletComponent],\n})\nexport class RouterOutletModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAUa,qBAAqB,CAAA;AAPlC,IAAA,WAAA,GAAA;AAUE,QAAA,IAAA,CAAA,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC;AACjC,IAAA;kIAJY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVlC,kLAMA,EAAA,MAAA,EAAA,CAAA,uIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEd,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,CAAC,EAAA,QAAA,EAAA,kLAAA,EAAA,MAAA,EAAA,CAAA,uIAAA,CAAA,EAAA;;sBAGzB;;;MEFU,kBAAkB,CAAA;kIAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,YAAY,EAAE,eAAe,EAAE,qBAAqB,aACpD,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,OAAA,EAAA,CAHnB,YAAY,EAAE,eAAe,EAAE,qBAAqB,CAAA,EAAA,CAAA,CAAA;;4FAGnD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,qBAAqB,CAAC;oBAC/D,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACjC,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { IonItemDivider } from '@ionic/angular
|
|
3
|
+
import { IonItemDivider } from '@ionic/angular';
|
|
4
4
|
|
|
5
5
|
class SectionHeaderComponent {
|
|
6
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
6
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SectionHeaderComponent, isStandalone: true, selector: "kirby-section-header", ngImport: i0, template: "<ion-item-divider>\n <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-text-color-black);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-start: var(--kirby-spacing-s)}:host ion-item-divider ::ng-deep>[heading]{font-weight:var(--kirby-font-weight-bold);font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m);color:var(--kirby-section-header-color);margin:0 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>h2[heading],:host ion-item-divider ::ng-deep>.kirby-text-large[heading]{font-size:var(--kirby-font-size-l);line-height:var(--kirby-line-height-l)}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m)}:host ion-item-divider ::ng-deep>h4[heading],:host ion-item-divider ::ng-deep>h5[heading],:host ion-item-divider ::ng-deep>h6[heading],:host ion-item-divider ::ng-deep>.kirby-text-normal[heading]{font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:var(--kirby-font-weight-light);font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);color:var(--kirby-section-header-color);margin:var(--kirby-spacing-xxxs) 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8
8
|
}
|
|
9
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
10
10
|
type: Component,
|
|
11
|
-
args: [{ imports: [IonItemDivider], selector: 'kirby-section-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider>\n <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-text-color-black);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:
|
|
11
|
+
args: [{ imports: [IonItemDivider], selector: 'kirby-section-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider>\n <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-text-color-black);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-start: var(--kirby-spacing-s)}:host ion-item-divider ::ng-deep>[heading]{font-weight:var(--kirby-font-weight-bold);font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m);color:var(--kirby-section-header-color);margin:0 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>h2[heading],:host ion-item-divider ::ng-deep>.kirby-text-large[heading]{font-size:var(--kirby-font-size-l);line-height:var(--kirby-line-height-l)}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m)}:host ion-item-divider ::ng-deep>h4[heading],:host ion-item-divider ::ng-deep>h5[heading],:host ion-item-divider ::ng-deep>h6[heading],:host ion-item-divider ::ng-deep>.kirby-text-normal[heading]{font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:var(--kirby-font-weight-light);font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);color:var(--kirby-section-header-color);margin:var(--kirby-spacing-xxxs) 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
12
12
|
}] });
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-section-header.mjs","sources":["../../section-header/src/section-header.component.ts","../../section-header/src/section-header.component.html","../../section-header/src/kirbydesign-designsystem-section-header.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { IonItemDivider } from '@ionic/angular
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-section-header.mjs","sources":["../../section-header/src/section-header.component.ts","../../section-header/src/section-header.component.html","../../section-header/src/kirbydesign-designsystem-section-header.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { IonItemDivider } from '@ionic/angular';\n\n@Component({\n imports: [IonItemDivider],\n selector: 'kirby-section-header',\n templateUrl: './section-header.component.html',\n styleUrls: ['./section-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionHeaderComponent {}\n","<ion-item-divider>\n <ng-content></ng-content>\n</ion-item-divider>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAUa,sBAAsB,CAAA;kIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVnC,wEAGA,EAAA,MAAA,EAAA,CAAA,oqDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDCY,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMb,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,cAAc,CAAC,EAAA,QAAA,EACf,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,MAAA,EAAA,CAAA,oqDAAA,CAAA,EAAA;;;AERjD;;AAEG;;;;"}
|
|
@@ -3,7 +3,7 @@ import { EventEmitter, ElementRef, forwardRef, HostListener, Output, Input, Host
|
|
|
3
3
|
import { IconComponent } from '@kirbydesign/designsystem/icon';
|
|
4
4
|
import { BadgeComponent } from '@kirbydesign/designsystem/badge';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
|
-
import { IonSegment, IonSegmentButton } from '@ionic/angular
|
|
6
|
+
import { IonSegment, IonSegmentButton } from '@ionic/angular';
|
|
7
7
|
|
|
8
8
|
var SegmentedControlMode;
|
|
9
9
|
(function (SegmentedControlMode) {
|
|
@@ -176,16 +176,16 @@ class SegmentedControlComponent {
|
|
|
176
176
|
this.isDisabled = isDisabled;
|
|
177
177
|
this.cdr.markForCheck();
|
|
178
178
|
}
|
|
179
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
180
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
179
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
180
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SegmentedControlComponent, isStandalone: true, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { listeners: { "focusin": "_onFocusInOut()", "focusout": "_onFocusInOut()" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, providers: [
|
|
181
181
|
{
|
|
182
182
|
provide: NG_VALUE_ACCESSOR,
|
|
183
183
|
useExisting: forwardRef((() => SegmentedControlComponent)),
|
|
184
184
|
multi: true,
|
|
185
185
|
},
|
|
186
|
-
], viewQueries: [{ propertyName: "ionSegmentElement", first: true, predicate: IonSegment, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index:
|
|
186
|
+
], viewQueries: [{ propertyName: "ionSegmentElement", first: true, predicate: IonSegment, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-inputs-background-color);box-shadow:var(--kirby-inputs-elevation);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{--color-hover: var(--kirby-inputs-color-hover)}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-inputs-background-color);--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}@media(hover:hover){:host.chip-mode ion-segment-button:hover,:host.compact ion-segment-button:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}@media(hover:hover){:host.chip-mode ion-segment-button.segment-button-checked:hover,:host.compact ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: none;--color: var(--kirby-inputs-color);--indicator-color: var(--kirby-inputs-indicator-background-color);--color-checked: var(--kirby-inputs-indicator-color);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}ion-segment-button::part(native){border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(native):after{transition:all 80ms linear 0ms;border-radius:var(--border-radius)}ion-segment-button::part(indicator){padding-inline:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: BadgeComponent, selector: "kirby-badge", inputs: ["text", "size"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
187
187
|
}
|
|
188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
190
|
args: [{ imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton], selector: 'kirby-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
191
191
|
{
|
|
@@ -193,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
193
193
|
useExisting: forwardRef((() => SegmentedControlComponent)),
|
|
194
194
|
multi: true,
|
|
195
195
|
},
|
|
196
|
-
], template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index:
|
|
196
|
+
], template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-inputs-background-color);box-shadow:var(--kirby-inputs-elevation);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{--color-hover: var(--kirby-inputs-color-hover)}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-inputs-background-color);--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}@media(hover:hover){:host.chip-mode ion-segment-button:hover,:host.compact ion-segment-button:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}@media(hover:hover){:host.chip-mode ion-segment-button.segment-button-checked:hover,:host.compact ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: none;--color: var(--kirby-inputs-color);--indicator-color: var(--kirby-inputs-indicator-background-color);--color-checked: var(--kirby-inputs-indicator-color);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}ion-segment-button::part(native){border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(native):after{transition:all 80ms linear 0ms;border-radius:var(--border-radius)}ion-segment-button::part(indicator){padding-inline:0}\n"] }]
|
|
197
197
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ionSegmentElement: [{
|
|
198
198
|
type: ViewChild,
|
|
199
199
|
args: [IonSegment, { static: true, read: ElementRef }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular/standalone';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /**\n * Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n */\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value || [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /**\n * After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n */\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' | 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /**\n * Sets the segmented control's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Disables the segmented control. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /**\n * Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n */\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value || [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /**\n * After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n */\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' | 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /**\n * Sets the segmented control's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Disables the segmented control. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -336,10 +336,10 @@ class FloatingDirective {
|
|
|
336
336
|
this.tearDownReferenceElementEventHandling();
|
|
337
337
|
this.removeAutoUpdaterRef();
|
|
338
338
|
}
|
|
339
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
340
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
339
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FloatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PortalDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
340
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: FloatingDirective, isStandalone: true, selector: "[kirbyFloating]", inputs: { reference: "reference", placement: "placement", strategy: "strategy", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", isDisabled: "isDisabled", offset: "offset", shift: "shift", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop" }, outputs: { displayChanged: "displayChanged" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed()" } }, providers: [PortalDirective], hostDirectives: [{ directive: i1.PortalDirective }], ngImport: i0 }); }
|
|
341
341
|
}
|
|
342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
342
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FloatingDirective, decorators: [{
|
|
343
343
|
type: Directive,
|
|
344
344
|
args: [{
|
|
345
345
|
selector: '[kirbyFloating]',
|
|
@@ -64,10 +64,10 @@ class PortalDirective extends CdkPortalOutlet {
|
|
|
64
64
|
});
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
68
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
67
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PortalDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
68
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: PortalDirective, isStandalone: true, selector: "[kirbyPortal]", inputs: { outlet: "outlet" }, usesInheritance: true, ngImport: i0 }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PortalDirective, decorators: [{
|
|
71
71
|
type: Directive,
|
|
72
72
|
args: [{
|
|
73
73
|
selector: '[kirbyPortal]',
|
|
@@ -11,10 +11,10 @@ class ResizeObserverFactory {
|
|
|
11
11
|
create(callback) {
|
|
12
12
|
return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
|
|
13
13
|
}
|
|
14
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
14
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
15
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
|
|
16
16
|
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, decorators: [{
|
|
18
18
|
type: Injectable,
|
|
19
19
|
args: [{ providedIn: 'root' }]
|
|
20
20
|
}] });
|
|
@@ -57,10 +57,10 @@ class ResizeObserverService {
|
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
61
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
60
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
61
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, decorators: [{
|
|
64
64
|
type: Injectable,
|
|
65
65
|
args: [{ providedIn: 'root' }]
|
|
66
66
|
}], ctorParameters: () => [{ type: ResizeObserverFactory }] });
|
|
@@ -126,10 +126,10 @@ class TextResizeObserverService {
|
|
|
126
126
|
this.resizeObserver?.disconnect();
|
|
127
127
|
this.textResizeObserverElement?.remove();
|
|
128
128
|
}
|
|
129
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
130
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
129
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
130
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, providedIn: 'root' }); }
|
|
131
131
|
}
|
|
132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, decorators: [{
|
|
133
133
|
type: Injectable,
|
|
134
134
|
args: [{ providedIn: 'root' }]
|
|
135
135
|
}] });
|
|
@@ -197,10 +197,10 @@ class ThemeColorDirective {
|
|
|
197
197
|
this._isBrightnessLight = colorBrightness === 'light';
|
|
198
198
|
this._isBrightnessDark = colorBrightness === 'dark';
|
|
199
199
|
}
|
|
200
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
201
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
200
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
201
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ThemeColorDirective, isStandalone: true, selector: "kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 }); }
|
|
202
202
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ThemeColorDirective, decorators: [{
|
|
204
204
|
type: Directive,
|
|
205
205
|
args: [{
|
|
206
206
|
standalone: true,
|
|
@@ -276,10 +276,10 @@ class ComponentLoaderDirective {
|
|
|
276
276
|
}
|
|
277
277
|
componentRef.instance.data = this.configuration.data;
|
|
278
278
|
}
|
|
279
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
280
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
279
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComponentLoaderDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
280
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ComponentLoaderDirective, isStandalone: true, selector: "[kirbyLoadComponent]", inputs: { configuration: ["kirbyLoadComponent", "configuration"], cssClass: "cssClass" }, ngImport: i0 }); }
|
|
281
281
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComponentLoaderDirective, decorators: [{
|
|
283
283
|
type: Directive,
|
|
284
284
|
args: [{
|
|
285
285
|
selector: '[kirbyLoadComponent]',
|
|
@@ -292,8 +292,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
292
292
|
type: Input
|
|
293
293
|
}] } });
|
|
294
294
|
|
|
295
|
-
const fontSize = DesignTokenHelper.fontSize;
|
|
296
|
-
const lineHeight = DesignTokenHelper.lineHeight;
|
|
297
295
|
class FitHeadingDirective {
|
|
298
296
|
constructor(elementRef, renderer, resizeObserverService, lineClampHelper) {
|
|
299
297
|
this.elementRef = elementRef;
|
|
@@ -303,18 +301,18 @@ class FitHeadingDirective {
|
|
|
303
301
|
this.headingSizes = [
|
|
304
302
|
{
|
|
305
303
|
name: 'h1',
|
|
306
|
-
fontSize:
|
|
307
|
-
lineHeight:
|
|
304
|
+
fontSize: 'var(--kirby-font-size-xl)',
|
|
305
|
+
lineHeight: 'var(--kirby-line-height-xl)',
|
|
308
306
|
},
|
|
309
307
|
{
|
|
310
308
|
name: 'h2',
|
|
311
|
-
fontSize:
|
|
312
|
-
lineHeight:
|
|
309
|
+
fontSize: 'var(--kirby-font-size-l)',
|
|
310
|
+
lineHeight: 'var(--kirby-line-height-l)',
|
|
313
311
|
},
|
|
314
312
|
{
|
|
315
313
|
name: 'h3',
|
|
316
|
-
fontSize:
|
|
317
|
-
lineHeight:
|
|
314
|
+
fontSize: 'var(--kirby-font-size-m)',
|
|
315
|
+
lineHeight: 'var(--kirby-line-height-m)',
|
|
318
316
|
},
|
|
319
317
|
];
|
|
320
318
|
}
|
|
@@ -398,10 +396,10 @@ class FitHeadingDirective {
|
|
|
398
396
|
this.renderer.setStyle(el, 'font-size', size.fontSize);
|
|
399
397
|
this.renderer.setStyle(el, 'line-height', size.lineHeight);
|
|
400
398
|
}
|
|
401
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
402
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
399
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FitHeadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ResizeObserverService }, { token: i2.LineClampHelper }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
400
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: FitHeadingDirective, isStandalone: true, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: { config: ["kirbyFitHeading", "config"] }, providers: [LineClampHelper], ngImport: i0 }); }
|
|
403
401
|
}
|
|
404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FitHeadingDirective, decorators: [{
|
|
405
403
|
type: Directive,
|
|
406
404
|
args: [{
|
|
407
405
|
standalone: true,
|
|
@@ -531,10 +529,10 @@ class TranslationService {
|
|
|
531
529
|
get(key) {
|
|
532
530
|
return this.activeTranslation[key];
|
|
533
531
|
}
|
|
534
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
535
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
532
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
533
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, providedIn: 'root' }); }
|
|
536
534
|
}
|
|
537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, decorators: [{
|
|
538
536
|
type: Injectable,
|
|
539
537
|
args: [{
|
|
540
538
|
providedIn: 'root',
|