@kirbydesign/designsystem 10.4.1 → 10.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-badge.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-card.mjs +16 -16
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-divider.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +10 -10
- 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 +3 -3
- package/fesm2022/kirbydesign-designsystem-flag.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +81 -41
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-header.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +11 -10
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-list.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-menu.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-modal.mjs +42 -42
- package/fesm2022/kirbydesign-designsystem-page.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +15 -8
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +18 -18
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-slide.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +286 -286
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-toast.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +13 -13
- package/form-field/input/input.component.d.ts +5 -2
- package/form-field/input/input.component.d.ts.map +1 -1
- package/form-field/textarea/textarea.component.d.ts +5 -1
- package/form-field/textarea/textarea.component.d.ts.map +1 -1
- package/icon/kirby-icon-settings.d.ts.map +1 -1
- package/icons/svg/coinstack.svg +1 -5
- package/icons/svg/investment.svg +1 -5
- package/icons/svg/warning-decoration.svg +1 -0
- package/package.json +2 -2
- package/progress-circle/progress-circle.component.d.ts +1 -0
- package/progress-circle/progress-circle.component.d.ts.map +1 -1
- package/readme.md +3 -1
|
@@ -272,10 +272,10 @@ class ModalNavigationService {
|
|
|
272
272
|
modal.dismiss();
|
|
273
273
|
});
|
|
274
274
|
}
|
|
275
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
276
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
275
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalNavigationService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
276
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalNavigationService, providedIn: 'root' }); }
|
|
277
277
|
}
|
|
278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalNavigationService, decorators: [{
|
|
279
279
|
type: Injectable,
|
|
280
280
|
args: [{ providedIn: 'root' }]
|
|
281
281
|
}], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }] });
|
|
@@ -294,10 +294,10 @@ class ActionSheetComponent {
|
|
|
294
294
|
onCancel() {
|
|
295
295
|
this.cancel.emit();
|
|
296
296
|
}
|
|
297
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
298
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
297
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
298
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ActionSheetComponent, isStandalone: true, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n <kirby-card-header\n *ngIf=\"header\"\n [title]=\"header\"\n [isTitleBold]=\"true\"\n [subtitle]=\"subheader\"\n ></kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"3\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: i1$1.CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { 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: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
299
299
|
}
|
|
300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
301
301
|
type: Component,
|
|
302
302
|
args: [{ imports: [CardModule, ButtonComponent, CommonModule], selector: 'kirby-action-sheet', template: "<kirby-card>\n <kirby-card-header\n *ngIf=\"header\"\n [title]=\"header\"\n [isTitleBold]=\"true\"\n [subtitle]=\"subheader\"\n ></kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"3\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"] }]
|
|
303
303
|
}], propDecorators: { cancelButtonText: [{
|
|
@@ -352,10 +352,10 @@ class ActionSheetHelper {
|
|
|
352
352
|
onDidDismiss: ionModal.onDidDismiss(),
|
|
353
353
|
};
|
|
354
354
|
}
|
|
355
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
356
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
355
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
356
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ActionSheetHelper }); }
|
|
357
357
|
}
|
|
358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ActionSheetHelper, decorators: [{
|
|
359
359
|
type: Injectable
|
|
360
360
|
}], ctorParameters: () => [{ type: i1$2.ModalController }] });
|
|
361
361
|
|
|
@@ -390,10 +390,10 @@ class AlertComponent {
|
|
|
390
390
|
const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
|
|
391
391
|
ionModalElement?.dismiss(true);
|
|
392
392
|
}
|
|
393
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
394
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
393
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.WindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
394
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AlertComponent, isStandalone: true, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelBtn\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"onCancel()\"\n >\n {{ cancelBtn }}\n </button>\n <button\n kirby-button\n [size]=\"cancelBtn ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okBtnIsDestructive\"\n (click)=\"onOk()\"\n >\n {{ okBtn }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px}.buttongroup button{flex:1 1 50%;margin-inline:0}.buttongroup button:only-child{flex-grow:0}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i1$4.ThemeColorDirective, selector: "kirby-avatar[themeColor], kirby-card[themeColor], kirby-icon[themeColor], kirby-progress-circle-ring[themeColor], kirby-modal-footer[themeColor], kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { kind: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i3.EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "title", "subtitle"] }, { 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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
395
395
|
}
|
|
396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertComponent, decorators: [{
|
|
397
397
|
type: Component,
|
|
398
398
|
args: [{ imports: [
|
|
399
399
|
IconModule,
|
|
@@ -466,10 +466,10 @@ class AlertHelper {
|
|
|
466
466
|
getOkBtnIsDestructive(config) {
|
|
467
467
|
return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
|
|
468
468
|
}
|
|
469
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
470
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
469
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertHelper, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
470
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertHelper }); }
|
|
471
471
|
}
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
472
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertHelper, decorators: [{
|
|
473
473
|
type: Injectable
|
|
474
474
|
}], ctorParameters: () => [{ type: i1$2.ModalController }] });
|
|
475
475
|
|
|
@@ -511,10 +511,10 @@ class ModalElementComponent {
|
|
|
511
511
|
this.modalElementsAdvertiser.removeModalElement(this.modalElementType, this.elementRef);
|
|
512
512
|
}
|
|
513
513
|
}
|
|
514
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
515
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
514
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalElementComponent, deps: [{ token: ModalElementType }, { token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
515
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ModalElementComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
|
|
516
516
|
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalElementComponent, decorators: [{
|
|
518
518
|
type: Component,
|
|
519
519
|
args: [{
|
|
520
520
|
template: '',
|
|
@@ -542,10 +542,10 @@ class CanDismissHelper {
|
|
|
542
542
|
const result = await alert.onWillDismiss;
|
|
543
543
|
return result.data;
|
|
544
544
|
}
|
|
545
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
546
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
545
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CanDismissHelper, deps: [{ token: AlertHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
546
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CanDismissHelper }); }
|
|
547
547
|
}
|
|
548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CanDismissHelper, decorators: [{
|
|
549
549
|
type: Injectable
|
|
550
550
|
}], ctorParameters: () => [{ type: AlertHelper }] });
|
|
551
551
|
|
|
@@ -1047,13 +1047,13 @@ class ModalWrapperComponent {
|
|
|
1047
1047
|
this.destroy$.next();
|
|
1048
1048
|
this.destroy$.complete();
|
|
1049
1049
|
}
|
|
1050
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1051
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1050
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$4.ResizeObserverService }, { token: i1$3.WindowRef }, { token: i3$1.PlatformService }, { token: CanDismissHelper }, { token: i0.EnvironmentInjector }, { token: i1$4.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1051
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ModalWrapperComponent, isStandalone: true, selector: "kirby-modal-wrapper", inputs: { scrollDisabled: "scrollDisabled", config: "config", content: "content" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [
|
|
1052
1052
|
{ provide: Modal, useExisting: ModalWrapperComponent },
|
|
1053
1053
|
{ provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
|
|
1054
1054
|
], queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header [class.content-scrolled]=\"isContentScrolled\" (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons\n slot=\"secondary\"\n *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n >\n <button\n kirby-button\n attentionLevel=\"3\"\n size=\"md\"\n (click)=\"config.drawerSupplementaryAction.action($event)\"\n >\n <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n </button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <button\n kirby-button\n attentionLevel=\"3\"\n size=\"md\"\n [noDecoration]=\"config.interactWithBackground\"\n [attr.aria-label]=\"translations.get('close')\"\n (click)=\"close()\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-xlarge\" #contentTitle></span>\n </ion-toolbar>\n </ion-header>\n\n <!-- Outlet for ModalController -->\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n\n <!-- Outlet for projected content -->\n <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n <!-- Outlet for route-based modal -->\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n", styles: ["ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 8px;--padding-end: 8px;--padding-bottom: 7px;--padding-top: 8px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color .2s linear}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}@media (max-width: 767px){:host.drawer ion-header ion-toolbar{--padding-top: 16px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media (min-width: 768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media (max-width: 767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: 32px;--padding-start: 8px;--padding-end: 8px;border:none}@media (min-width: 768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: 16px;--padding-end: 16px}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { 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: i6.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }] }); }
|
|
1055
1055
|
}
|
|
1056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalWrapperComponent, decorators: [{
|
|
1057
1057
|
type: Component,
|
|
1058
1058
|
args: [{ imports: [
|
|
1059
1059
|
RouterModule,
|
|
@@ -1193,10 +1193,10 @@ class ModalCompactWrapperComponent {
|
|
|
1193
1193
|
// This fixes an undesired scroll behaviour occurring on keyboard-tabbing backwards (with shift+tab):
|
|
1194
1194
|
this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
|
|
1195
1195
|
}
|
|
1196
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1197
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1196
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalCompactWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1$3.WindowRef }, { token: CanDismissHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1197
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ModalCompactWrapperComponent, isStandalone: true, selector: "kirby-modal-compact-wrapper", inputs: { config: "config", content: "content" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<!-- Outlet for ModalController -->\n<ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
1198
1198
|
}
|
|
1199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalCompactWrapperComponent, decorators: [{
|
|
1200
1200
|
type: Component,
|
|
1201
1201
|
args: [{ selector: 'kirby-modal-compact-wrapper', providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], imports: [CommonModule], host: { '[class.ion-page]': 'false' }, template: "<!-- Outlet for ModalController -->\n<ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"] }]
|
|
1202
1202
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1$3.WindowRef }, { type: CanDismissHelper }, { type: i0.Renderer2 }], propDecorators: { config: [{
|
|
@@ -1465,10 +1465,10 @@ class ModalAnimationBuilderService {
|
|
|
1465
1465
|
return baseAnimation;
|
|
1466
1466
|
};
|
|
1467
1467
|
}
|
|
1468
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1469
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1468
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalAnimationBuilderService, deps: [{ token: i3$1.PlatformService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1469
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalAnimationBuilderService, providedIn: 'root' }); }
|
|
1470
1470
|
}
|
|
1471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalAnimationBuilderService, decorators: [{
|
|
1472
1472
|
type: Injectable,
|
|
1473
1473
|
args: [{ providedIn: 'root' }]
|
|
1474
1474
|
}], ctorParameters: () => [{ type: i3$1.PlatformService }] });
|
|
@@ -1571,10 +1571,10 @@ class ModalHelper {
|
|
|
1571
1571
|
this.isModalOpening = false;
|
|
1572
1572
|
return overlay;
|
|
1573
1573
|
}
|
|
1574
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1575
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1574
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalHelper, deps: [{ token: i1$2.ModalController }, { token: ModalAnimationBuilderService }, { token: ModalNavigationService }, { token: i1$3.WindowRef }, { token: CanDismissHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1575
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalHelper }); }
|
|
1576
1576
|
}
|
|
1577
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalHelper, decorators: [{
|
|
1578
1578
|
type: Injectable
|
|
1579
1579
|
}], ctorParameters: () => [{ type: i1$2.ModalController }, { type: ModalAnimationBuilderService }, { type: ModalNavigationService }, { type: i1$3.WindowRef }, { type: CanDismissHelper }] });
|
|
1580
1580
|
|
|
@@ -1674,10 +1674,10 @@ class ModalController {
|
|
|
1674
1674
|
this.destroy$.next();
|
|
1675
1675
|
this.destroy$.complete();
|
|
1676
1676
|
}
|
|
1677
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1678
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1677
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalController, deps: [{ token: ModalHelper }, { token: ActionSheetHelper }, { token: AlertHelper }, { token: ModalNavigationService }, { token: ROUTES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1678
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalController }); }
|
|
1679
1679
|
}
|
|
1680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalController, decorators: [{
|
|
1681
1681
|
type: Injectable
|
|
1682
1682
|
}], ctorParameters: () => [{ type: ModalHelper }, { type: ActionSheetHelper }, { type: AlertHelper }, { type: ModalNavigationService }, { type: undefined, decorators: [{
|
|
1683
1683
|
type: Optional
|
|
@@ -1798,10 +1798,10 @@ class ModalComponent {
|
|
|
1798
1798
|
'aria-label': inheritAriaLabelText(this.elementRef.nativeElement),
|
|
1799
1799
|
};
|
|
1800
1800
|
}
|
|
1801
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1802
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1801
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalComponent, deps: [{ token: CanDismissHelper }, { token: ModalNavigationService }, { token: i1$3.WindowRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1802
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ModalComponent, isStandalone: true, selector: "kirby-modal", inputs: { isOpen: "isOpen", trigger: "trigger", size: "size", scrollDisabled: "scrollDisabled", canDismiss: "canDismiss", collapseTitle: "collapseTitle", customHeight: "customHeight", flavor: "flavor", drawerSupplementaryAction: "drawerSupplementaryAction", interactWithBackground: "interactWithBackground" }, outputs: { willPresent: "willPresent", didPresent: "didPresent", didDismiss: "didDismiss", willDismiss: "willDismiss" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "modalElement", first: true, predicate: IonModal, descendants: true, read: ElementRef, static: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-modal\n class=\"kirby-modal kirby-overlay kirby-modal-{{ size }}\"\n [ngClass]=\"[\n flavor === 'compact' ? 'kirby-modal-compact' : 'kirby-' + flavor,\n interactWithBackground ? 'interact-with-background' : ''\n ]\"\n [isOpen]=\"isOpen\"\n [trigger]=\"trigger\"\n [canDismiss]=\"_canDismiss\"\n [showBackdrop]=\"!interactWithBackground\"\n [style.--kirby-modal-height]=\"customHeight\"\n (willPresent)=\"_onWillPresent($event)\"\n (didPresent)=\"_onDidPresent($event)\"\n (willDismiss)=\"_onWillDismiss($event)\"\n (didDismiss)=\"_onDidDismiss($event)\"\n>\n <ng-template>\n <kirby-modal-compact-wrapper\n *ngIf=\"flavor === 'compact'; else modalWrapper\"\n [config]=\"_config\"\n [content]=\"template\"\n ></kirby-modal-compact-wrapper>\n </ng-template>\n</ion-modal>\n\n<ng-template #modalWrapper>\n <kirby-modal-wrapper\n class=\"ion-page\"\n [config]=\"_config\"\n [content]=\"template\"\n [scrollDisabled]=\"scrollDisabled\"\n ></kirby-modal-wrapper>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: ["scrollDisabled", "config", "content"] }, { kind: "component", type: ModalCompactWrapperComponent, selector: "kirby-modal-compact-wrapper", inputs: ["config", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1803
1803
|
}
|
|
1804
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1805
1805
|
type: Component,
|
|
1806
1806
|
args: [{ selector: 'kirby-modal', imports: [
|
|
1807
1807
|
CommonModule,
|
|
@@ -1859,10 +1859,10 @@ class ModalFooterComponent extends ModalElementComponent {
|
|
|
1859
1859
|
this.type = 'fixed';
|
|
1860
1860
|
this.themeColor = 'white';
|
|
1861
1861
|
}
|
|
1862
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1863
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1862
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1863
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ModalFooterComponent, isStandalone: true, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type", themeColor: "themeColor" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this._cssClass" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1864
1864
|
}
|
|
1865
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
1866
1866
|
type: Component,
|
|
1867
1867
|
args: [{ imports: [CommonModule, IonFooter], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
|
|
1868
1868
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
|