@kirbydesign/designsystem 9.6.0 → 9.7.1
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/accordion/accordion-item.component.d.ts +2 -1
- package/button/button.component.d.ts +1 -1
- package/checkbox/checkbox.component.d.ts +11 -4
- package/esm2022/accordion/accordion-item.component.mjs +6 -3
- package/esm2022/button/button.component.mjs +3 -3
- package/esm2022/calendar/calendar.component.mjs +2 -2
- package/esm2022/card/card-as-button/card-as-button.directive.mjs +3 -1
- package/esm2022/card/card.component.mjs +2 -2
- package/esm2022/checkbox/checkbox.component.mjs +36 -10
- package/esm2022/dropdown/dropdown.component.mjs +1 -1
- package/esm2022/icon/kirby-icon-settings.mjs +120 -113
- package/esm2022/item/item.component.mjs +17 -4
- package/esm2022/list/list-item/list-item.component.mjs +2 -2
- package/esm2022/list/list.component.mjs +2 -2
- package/esm2022/menu/menu.component.mjs +2 -2
- package/esm2022/modal/modal/action-sheet/action-sheet.component.mjs +2 -2
- package/esm2022/modal/modal/alert/alert.component.mjs +2 -2
- package/esm2022/modal/modal/footer/modal-footer.component.mjs +3 -3
- package/esm2022/modal/modal-wrapper/modal-wrapper.component.mjs +2 -2
- package/esm2022/modal/v2/footer/footer.component.mjs +2 -2
- package/esm2022/modal/v2/modal/modal.component.mjs +2 -2
- package/esm2022/modal/v2/wrapper/wrapper.component.mjs +2 -2
- package/esm2022/page/page-footer/page-footer.component.mjs +2 -2
- package/esm2022/page/page.component.mjs +2 -2
- package/esm2022/radio/radio.component.mjs +35 -9
- package/esm2022/range/range.component.mjs +3 -3
- package/esm2022/router-outlet/router-outlet.component.mjs +1 -1
- package/esm2022/router-outlet/router-outlet.module.mjs +2 -2
- package/esm2022/shared/controls/label-helpers.mjs +23 -0
- package/esm2022/shared/public_api.mjs +2 -1
- package/esm2022/slide/slides.component.mjs +1 -1
- package/esm2022/tabs/tab-button/tab-button.component.mjs +2 -2
- package/esm2022/toggle/toggle.component.mjs +20 -7
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +5 -2
- package/fesm2022/kirbydesign-designsystem-accordion.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-button.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +4 -2
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +35 -9
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-icon.mjs +119 -112
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item.mjs +16 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal-v2.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +34 -8
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared.mjs +24 -1
- package/fesm2022/kirbydesign-designsystem-shared.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +18 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/icons/svg/basket.svg +1 -0
- package/icons/svg/contract.svg +1 -0
- package/icons/svg/drag-drop.svg +1 -0
- package/icons/svg/expand.svg +1 -0
- package/icons/svg/flower.svg +1 -0
- package/icons/svg/house.svg +1 -0
- package/icons/svg/tractor.svg +1 -0
- package/item/item.component.d.ts +4 -1
- package/package.json +2 -2
- package/radio/radio.component.d.ts +11 -4
- package/scss/base/_design-tokens.scss +1 -0
- package/scss/themes/design-tokens.scss +1 -0
- package/shared/controls/label-helpers.d.ts +3 -0
- package/shared/public_api.d.ts +1 -0
- package/toggle/toggle.component.d.ts +8 -4
|
@@ -99,11 +99,11 @@ export class ListItemComponent {
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListItemComponent, deps: [{ token: i1.PlatformService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n ></kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: i4.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i5.ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }] }); }
|
|
102
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n ></kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: i4.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i5.ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }] }); }
|
|
103
103
|
}
|
|
104
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
105
105
|
type: Component,
|
|
106
|
-
args: [{ selector: 'kirby-list-item', template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n ></kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["
|
|
106
|
+
args: [{ selector: 'kirby-list-item', template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n ></kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"] }]
|
|
107
107
|
}], ctorParameters: () => [{ type: i1.PlatformService }], propDecorators: { ionItemSliding: [{
|
|
108
108
|
type: ViewChild,
|
|
109
109
|
args: [IonItemSliding]
|
|
@@ -113,11 +113,11 @@ export class ListComponent {
|
|
|
113
113
|
return this._isStandAloneEnabled ? `stand-alone-bottom-margin-${this.standAloneSpacing}` : '';
|
|
114
114
|
}
|
|
115
115
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.ListHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
116
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: i4.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i4.IonItemGroup, selector: "ion-item-group" }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i5.ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }, { kind: "directive", type: i6.InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }] }); }
|
|
116
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: i4.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i4.IonItemGroup, selector: "ion-item-group" }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i5.ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }, { kind: "directive", type: i6.InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }] }); }
|
|
117
117
|
}
|
|
118
118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, decorators: [{
|
|
119
119
|
type: Component,
|
|
120
|
-
args: [{ selector: 'kirby-list', providers: [ListHelper], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
|
|
120
|
+
args: [{ selector: 'kirby-list', providers: [ListHelper], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.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);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
|
|
121
121
|
}], ctorParameters: () => [{ type: i1.ListHelper }], propDecorators: { list: [{
|
|
122
122
|
type: ViewChild,
|
|
123
123
|
args: ['list', { static: true }]
|
|
@@ -44,7 +44,7 @@ export class MenuComponent {
|
|
|
44
44
|
this.scrollListenerDisposeFn?.();
|
|
45
45
|
}
|
|
46
46
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuComponent, isStandalone: true, selector: "kirby-menu", inputs: { isDisabled: "isDisabled", buttonSize: "buttonSize", placement: "placement", attentionLevel: "attentionLevel", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop", shift: "shift", minWidth: "minWidth" }, queries: [{ propertyName: "userProvidedButton", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "buttonContainerElement", first: true, predicate: ["buttonContainer"], descendants: true, read: ElementRef }, { propertyName: "defaultButtonElement", first: true, predicate: ["defaultButton"], descendants: true, read: ElementRef }, { propertyName: "floatingDirective", first: true, predicate: FloatingDirective, descendants: true }], ngImport: i0, template: "<div class=\"button-container\" #buttonContainer>\n <ng-content select=\"button[kirby-button]\"></ng-content>\n <ng-container *ngIf=\"!userProvidedButton\">\n <button\n kirby-button\n [size]=\"buttonSize\"\n [disabled]=\"isDisabled\"\n type=\"button\"\n [attentionLevel]=\"attentionLevel\"\n #defaultButton\n >\n <kirby-icon [name]=\"'more'\"></kirby-icon>\n </button>\n </ng-container>\n</div>\n<kirby-card\n kirbyFloating\n [strategy]=\"'fixed'\"\n [reference]=\"buttonContainerElement\"\n [isDisabled]=\"isDisabled\"\n [triggers]=\"triggers\"\n [placement]=\"placement\"\n [DOMPortalOutlet]=\"DOMPortalOutlet\"\n [portalOutletConfig]=\"portalOutletConfig\"\n [closeOnBackdrop]=\"closeOnBackdrop\"\n [closeOnEscapeKey]=\"closeOnEscapeKey\"\n [closeOnSelect]=\"closeOnSelect\"\n [autoPlacement]=\"autoPlacement\"\n [shift]=\"shift\"\n [ngStyle]=\"{\n minWidth: minWidth ? minWidth + 'px' : null\n }\"\n class=\"menu-popover\"\n>\n <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [":host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:240px;max-width:460px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FloatingDirective, selector: "[kirbyFloating]", inputs: ["reference", "placement", "strategy", "triggers", "DOMPortalOutlet", "portalOutletConfig", "isDisabled", "offset", "shift", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop"], outputs: ["displayChanged"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat", "variant"] }, { kind: "ngmodule", type: ItemModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
47
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuComponent, isStandalone: true, selector: "kirby-menu", inputs: { isDisabled: "isDisabled", buttonSize: "buttonSize", placement: "placement", attentionLevel: "attentionLevel", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop", shift: "shift", minWidth: "minWidth" }, queries: [{ propertyName: "userProvidedButton", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "buttonContainerElement", first: true, predicate: ["buttonContainer"], descendants: true, read: ElementRef }, { propertyName: "defaultButtonElement", first: true, predicate: ["defaultButton"], descendants: true, read: ElementRef }, { propertyName: "floatingDirective", first: true, predicate: FloatingDirective, descendants: true }], ngImport: i0, template: "<div class=\"button-container\" #buttonContainer>\n <ng-content select=\"button[kirby-button]\"></ng-content>\n <ng-container *ngIf=\"!userProvidedButton\">\n <button\n kirby-button\n [size]=\"buttonSize\"\n [disabled]=\"isDisabled\"\n type=\"button\"\n [attentionLevel]=\"attentionLevel\"\n #defaultButton\n >\n <kirby-icon [name]=\"'more'\"></kirby-icon>\n </button>\n </ng-container>\n</div>\n<kirby-card\n kirbyFloating\n [strategy]=\"'fixed'\"\n [reference]=\"buttonContainerElement\"\n [isDisabled]=\"isDisabled\"\n [triggers]=\"triggers\"\n [placement]=\"placement\"\n [DOMPortalOutlet]=\"DOMPortalOutlet\"\n [portalOutletConfig]=\"portalOutletConfig\"\n [closeOnBackdrop]=\"closeOnBackdrop\"\n [closeOnEscapeKey]=\"closeOnEscapeKey\"\n [closeOnSelect]=\"closeOnSelect\"\n [autoPlacement]=\"autoPlacement\"\n [shift]=\"shift\"\n [ngStyle]=\"{\n minWidth: minWidth ? minWidth + 'px' : null\n }\"\n class=\"menu-popover\"\n>\n <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [":host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:240px;max-width:460px}\n"], dependencies: [{ 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FloatingDirective, selector: "[kirbyFloating]", inputs: ["reference", "placement", "strategy", "triggers", "DOMPortalOutlet", "portalOutletConfig", "isDisabled", "offset", "shift", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop"], outputs: ["displayChanged"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat", "variant"] }, { kind: "ngmodule", type: ItemModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
48
|
}
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
@@ -88,4 +88,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
88
88
|
type: ViewChild,
|
|
89
89
|
args: [FloatingDirective]
|
|
90
90
|
}] } });
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9tZW51L3NyYy9tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL21lbnUvc3JjL21lbnUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBRU4sU0FBUyxFQUNULFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDNUQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzVELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM1RCxPQUFPLEVBQWtCLGVBQWUsRUFBRSxVQUFVLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUMvRixPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLGNBQWMsR0FHZixNQUFNLDJDQUEyQyxDQUFDOzs7OztBQVduRCxNQUFNLE9BQU8sYUFBYTtJQUN4QixZQUNVLEdBQXNCLEVBQ3RCLFVBQW1DLEVBQ25DLElBQVksRUFDWixRQUFtQjtRQUhuQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUN0QixlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQUNuQyxTQUFJLEdBQUosSUFBSSxDQUFRO1FBQ1osYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUdiLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFNUIsZUFBVSxHQUFlLFVBQVUsQ0FBQyxFQUFFLENBQUM7UUFFdkMsY0FBUyxHQUFjLGNBQWMsQ0FBQztRQUV0QyxtQkFBYyxHQUFtQixHQUFHLENBQUM7UUFFckMsYUFBUSxHQUF3QixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBRTFDLG9CQUFlLEdBQWdCLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUM7UUFJaEYsa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFFL0Isa0JBQWEsR0FBWSxJQUFJLENBQUM7UUFFOUIscUJBQWdCLEdBQVksSUFBSSxDQUFDO1FBRWpDLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBRWhDLFVBQUssR0FBWSxJQUFJLENBQUM7UUFvQi9CLG1CQUFjLEdBQTBCLGNBQWMsQ0FBQztJQTVDM0QsQ0FBQztJQWdERyxlQUFlO1FBQ3BCLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQyxnREFBZ0Q7UUFFMUUsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUU7WUFDL0I7OztlQUdHO1lBQ0gsSUFBSSxDQUFDLHVCQUF1QixHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLEVBQUUsR0FBRyxFQUFFO2dCQUM5RSxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDaEMsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHVCQUF1QixFQUFFLEVBQUUsQ0FBQztJQUNuQyxDQUFDO2tJQXRFVSxhQUFhO3NIQUFiLGFBQWEsb2dCQTJDVixlQUFlLDJCQUFVLFVBQVUsbUlBTlgsVUFBVSxnSEFHWixVQUFVLGlFQU9uQyxpQkFBaUIsZ0RDbkY5Qix5aUNBb0NBLGdRRExZLGVBQWUsK01BQUUsWUFBWSx3TkFBRSxpQkFBaUIsdVNBQUUsVUFBVSw2SUFBRSxVQUFVLG9NQUFFLFVBQVU7OzRGQUtuRixhQUFhO2tCQVJ6QixTQUFTOytCQUNFLFlBQVksY0FDVixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsWUFBWSxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLG1CQUc5RSx1QkFBdUIsQ0FBQyxNQUFNOzRKQVUvQixVQUFVO3NCQUF6QixLQUFLO2dCQUVVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBRVUsU0FBUztzQkFBeEIsS0FBSztnQkFFVSxjQUFjO3NCQUE3QixLQUFLO2dCQUVVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBRVUsZUFBZTtzQkFBOUIsS0FBSztnQkFFVSxrQkFBa0I7c0JBQWpDLEtBQUs7Z0JBRVUsYUFBYTtzQkFBNUIsS0FBSztnQkFFVSxhQUFhO3NCQUE1QixLQUFLO2dCQUVVLGdCQUFnQjtzQkFBL0IsS0FBSztnQkFFVSxlQUFlO3NCQUE5QixLQUFLO2dCQUVVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBS1UsUUFBUTtzQkFBdkIsS0FBSztnQkFHQyxzQkFBc0I7c0JBRDVCLFNBQVM7dUJBQUMsaUJBQWlCLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFO2dCQUkzQyxvQkFBb0I7c0JBRDFCLFNBQVM7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtnQkFHWSxrQkFBa0I7c0JBQTdFLFlBQVk7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtnQkFLM0MsaUJBQWlCO3NCQUR4QixTQUFTO3VCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgTmdab25lLFxuICBPbkRlc3Ryb3ksXG4gIFJlbmRlcmVyMixcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBsYWNlbWVudCB9IGZyb20gJ0BmbG9hdGluZy11aS9kb20nO1xuXG5pbXBvcnQgeyBJdGVtTW9kdWxlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9pdGVtJztcbmltcG9ydCB7IENhcmRNb2R1bGUgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL2NhcmQnO1xuaW1wb3J0IHsgSWNvbk1vZHVsZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vaWNvbic7XG5pbXBvcnQgeyBBdHRlbnRpb25MZXZlbCwgQnV0dG9uQ29tcG9uZW50LCBCdXR0b25TaXplIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9idXR0b24nO1xuaW1wb3J0IHtcbiAgRmxvYXRpbmdEaXJlY3RpdmUsXG4gIEZsb2F0aW5nT2Zmc2V0LFxuICBQb3J0YWxPdXRsZXRDb25maWcsXG4gIFRyaWdnZXJFdmVudCxcbn0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9zaGFyZWQvZmxvYXRpbmcnO1xuaW1wb3J0IHsgRXZlbnRMaXN0ZW5lckRpc3Bvc2VGbiB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXJieS1tZW51JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0J1dHRvbkNvbXBvbmVudCwgQ29tbW9uTW9kdWxlLCBGbG9hdGluZ0RpcmVjdGl2ZSwgSWNvbk1vZHVsZSwgQ2FyZE1vZHVsZSwgSXRlbU1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWVudS5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWVudUNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY2RmOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgIHByaXZhdGUgem9uZTogTmdab25lLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHt9XG5cbiAgQElucHV0KCkgcHVibGljIGlzRGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKSBwdWJsaWMgYnV0dG9uU2l6ZTogQnV0dG9uU2l6ZSA9IEJ1dHRvblNpemUuTUQ7XG5cbiAgQElucHV0KCkgcHVibGljIHBsYWNlbWVudDogUGxhY2VtZW50ID0gJ2JvdHRvbS1zdGFydCc7XG5cbiAgQElucHV0KCkgcHVibGljIGF0dGVudGlvbkxldmVsOiBBdHRlbnRpb25MZXZlbCA9ICczJztcblxuICBASW5wdXQoKSBwdWJsaWMgdHJpZ2dlcnM6IEFycmF5PFRyaWdnZXJFdmVudD4gPSBbJ2NsaWNrJ107XG5cbiAgQElucHV0KCkgcHVibGljIERPTVBvcnRhbE91dGxldDogSFRNTEVsZW1lbnQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5vd25lckRvY3VtZW50LmJvZHk7XG5cbiAgQElucHV0KCkgcHVibGljIHBvcnRhbE91dGxldENvbmZpZzogUG9ydGFsT3V0bGV0Q29uZmlnIHwgdW5kZWZpbmVkO1xuXG4gIEBJbnB1dCgpIHB1YmxpYyBhdXRvUGxhY2VtZW50OiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KCkgcHVibGljIGNsb3NlT25TZWxlY3Q6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIEBJbnB1dCgpIHB1YmxpYyBjbG9zZU9uRXNjYXBlS2V5OiBib29sZWFuID0gdHJ1ZTtcblxuICBASW5wdXQoKSBwdWJsaWMgY2xvc2VPbkJhY2tkcm9wOiBib29sZWFuID0gdHJ1ZTtcblxuICBASW5wdXQoKSBwdWJsaWMgc2hpZnQ6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBUaGUgbWluaW11bSB3aWR0aCBvZiB0aGUgbWVudS4gSWYgbm90IHNldCwgdGhlIGRlZmF1bHQgd2lkdGggaXMgMjQwcHhcbiAgICovXG4gIEBJbnB1dCgpIHB1YmxpYyBtaW5XaWR0aDogbnVtYmVyO1xuXG4gIEBWaWV3Q2hpbGQoJ2J1dHRvbkNvbnRhaW5lcicsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBwdWJsaWMgYnV0dG9uQ29udGFpbmVyRWxlbWVudDogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4gfCB1bmRlZmluZWQ7XG5cbiAgQFZpZXdDaGlsZCgnZGVmYXVsdEJ1dHRvbicsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBwdWJsaWMgZGVmYXVsdEJ1dHRvbkVsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+IHwgdW5kZWZpbmVkO1xuXG4gIEBDb250ZW50Q2hpbGQoQnV0dG9uQ29tcG9uZW50LCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgcHVibGljIHVzZXJQcm92aWRlZEJ1dHRvbjpcbiAgICB8IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+XG4gICAgfCB1bmRlZmluZWQ7XG5cbiAgQFZpZXdDaGlsZChGbG9hdGluZ0RpcmVjdGl2ZSlcbiAgcHJpdmF0ZSBmbG9hdGluZ0RpcmVjdGl2ZTogRmxvYXRpbmdEaXJlY3RpdmU7XG5cbiAgcHVibGljIEZsb2F0aW5nT2Zmc2V0OiB0eXBlb2YgRmxvYXRpbmdPZmZzZXQgPSBGbG9hdGluZ09mZnNldDtcblxuICBwcml2YXRlIHNjcm9sbExpc3RlbmVyRGlzcG9zZUZuOiBFdmVudExpc3RlbmVyRGlzcG9zZUZuO1xuXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5jZGYuZGV0ZWN0Q2hhbmdlcygpOyAvLyBTZXRzIHRoZSB1cGRhdGVkIHJlZmVyZW5jZSBmb3Iga2lyYnktZmxvYXRpbmdcblxuICAgIHRoaXMuem9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICAvKlxuICAgICAgICogTGlzdGVuIGZvciBpb25TY3JvbGwgb3V0c2lkZSBvZiBBbmd1bGFyJ3MgY2hhbmdlIGRldGVjdGlvbiB0b1xuICAgICAgICogYXZvaWQgYSBjaGFuZ2UgZGV0ZWN0aW9uIGN5Y2xlIGZvciBldmVyeSBzY3JvbGwtZXZlbnQgZmlyZWRcbiAgICAgICAqL1xuICAgICAgdGhpcy5zY3JvbGxMaXN0ZW5lckRpc3Bvc2VGbiA9IHRoaXMucmVuZGVyZXIubGlzdGVuKGRvY3VtZW50LCAnaW9uU2Nyb2xsJywgKCkgPT4ge1xuICAgICAgICB0aGlzLmZsb2F0aW5nRGlyZWN0aXZlLmhpZGUoKTtcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5zY3JvbGxMaXN0ZW5lckRpc3Bvc2VGbj8uKCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJidXR0b24tY29udGFpbmVyXCIgI2J1dHRvbkNvbnRhaW5lcj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYnV0dG9uW2tpcmJ5LWJ1dHRvbl1cIj48L25nLWNvbnRlbnQ+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhdXNlclByb3ZpZGVkQnV0dG9uXCI+XG4gICAgPGJ1dHRvblxuICAgICAga2lyYnktYnV0dG9uXG4gICAgICBbc2l6ZV09XCJidXR0b25TaXplXCJcbiAgICAgIFtkaXNhYmxlZF09XCJpc0Rpc2FibGVkXCJcbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgW2F0dGVudGlvbkxldmVsXT1cImF0dGVudGlvbkxldmVsXCJcbiAgICAgICNkZWZhdWx0QnV0dG9uXG4gICAgPlxuICAgICAgPGtpcmJ5LWljb24gW25hbWVdPVwiJ21vcmUnXCI+PC9raXJieS1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuPGtpcmJ5LWNhcmRcbiAga2lyYnlGbG9hdGluZ1xuICBbc3RyYXRlZ3ldPVwiJ2ZpeGVkJ1wiXG4gIFtyZWZlcmVuY2VdPVwiYnV0dG9uQ29udGFpbmVyRWxlbWVudFwiXG4gIFtpc0Rpc2FibGVkXT1cImlzRGlzYWJsZWRcIlxuICBbdHJpZ2dlcnNdPVwidHJpZ2dlcnNcIlxuICBbcGxhY2VtZW50XT1cInBsYWNlbWVudFwiXG4gIFtET01Qb3J0YWxPdXRsZXRdPVwiRE9NUG9ydGFsT3V0bGV0XCJcbiAgW3BvcnRhbE91dGxldENvbmZpZ109XCJwb3J0YWxPdXRsZXRDb25maWdcIlxuICBbY2xvc2VPbkJhY2tkcm9wXT1cImNsb3NlT25CYWNrZHJvcFwiXG4gIFtjbG9zZU9uRXNjYXBlS2V5XT1cImNsb3NlT25Fc2NhcGVLZXlcIlxuICBbY2xvc2VPblNlbGVjdF09XCJjbG9zZU9uU2VsZWN0XCJcbiAgW2F1dG9QbGFjZW1lbnRdPVwiYXV0b1BsYWNlbWVudFwiXG4gIFtzaGlmdF09XCJzaGlmdFwiXG4gIFtuZ1N0eWxlXT1cIntcbiAgICBtaW5XaWR0aDogbWluV2lkdGggPyBtaW5XaWR0aCArICdweCcgOiBudWxsXG4gIH1cIlxuICBjbGFzcz1cIm1lbnUtcG9wb3ZlclwiXG4+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImtpcmJ5LWl0ZW1cIj48L25nLWNvbnRlbnQ+XG48L2tpcmJ5LWNhcmQ+XG4iXX0=
|
|
@@ -20,7 +20,7 @@ export class ActionSheetComponent {
|
|
|
20
20
|
this.cancel.emit();
|
|
21
21
|
}
|
|
22
22
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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;--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 (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@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)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@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}}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat", "variant"] }, { kind: "component", type: i1.CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
23
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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;--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 (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@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)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@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}}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat", "variant"] }, { kind: "component", type: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
@@ -42,4 +42,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
42
42
|
}], itemSelect: [{
|
|
43
43
|
type: Output
|
|
44
44
|
}] } });
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLXNoZWV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL21vZGFsL3NyYy9tb2RhbC9hY3Rpb24tc2hlZXQvYWN0aW9uLXNoZWV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL21vZGFsL3NyYy9tb2RhbC9hY3Rpb24tc2hlZXQvYWN0aW9uLXNoZWV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7Ozs7QUFXNUQsTUFBTSxPQUFPLG9CQUFvQjtJQVBqQztRQVFXLHFCQUFnQixHQUFHLFFBQVEsQ0FBQztRQUM1QixlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFJekIsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDNUIsZUFBVSxHQUFrQyxJQUFJLFlBQVksRUFBbUIsQ0FBQztLQVMzRjtJQVBDLFlBQVksQ0FBQyxTQUEwQjtRQUNyQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQztrSUFoQlUsb0JBQW9CO3NIQUFwQixvQkFBb0IsbVNDZGpDLHVqQkE0QkEsZ2tERG5CWSxVQUFVLGdXQUFFLGVBQWUsK01BQUUsWUFBWTs7NEZBS3hDLG9CQUFvQjtrQkFQaEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxVQUFVLEVBQUUsZUFBZSxFQUFFLFlBQVksQ0FBQyxZQUMxQyxvQkFBb0I7OEJBS3JCLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNJLE1BQU07c0JBQWYsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL2J1dHRvbic7XG5pbXBvcnQgeyBDYXJkTW9kdWxlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9jYXJkJztcblxuaW1wb3J0IHsgQWN0aW9uU2hlZXRJdGVtIH0gZnJvbSAnLi9jb25maWcvYWN0aW9uLXNoZWV0LWl0ZW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NhcmRNb2R1bGUsIEJ1dHRvbkNvbXBvbmVudCwgQ29tbW9uTW9kdWxlXSxcbiAgc2VsZWN0b3I6ICdraXJieS1hY3Rpb24tc2hlZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9uLXNoZWV0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWN0aW9uLXNoZWV0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEFjdGlvblNoZWV0Q29tcG9uZW50IHtcbiAgQElucHV0KCkgY2FuY2VsQnV0dG9uVGV4dCA9ICdDYW5jZWwnO1xuICBASW5wdXQoKSBoaWRlQ2FuY2VsOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGhlYWRlcjogc3RyaW5nO1xuICBASW5wdXQoKSBzdWJoZWFkZXI6IHN0cmluZztcbiAgQElucHV0KCkgaXRlbXM6IEFycmF5PEFjdGlvblNoZWV0SXRlbT47XG4gIEBPdXRwdXQoKSBjYW5jZWwgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBpdGVtU2VsZWN0OiBFdmVudEVtaXR0ZXI8QWN0aW9uU2hlZXRJdGVtPiA9IG5ldyBFdmVudEVtaXR0ZXI8QWN0aW9uU2hlZXRJdGVtPigpO1xuXG4gIG9uSXRlbVNlbGVjdChzZWxlY3Rpb246IEFjdGlvblNoZWV0SXRlbSkge1xuICAgIHRoaXMuaXRlbVNlbGVjdC5lbWl0KHNlbGVjdGlvbik7XG4gIH1cblxuICBvbkNhbmNlbCgpIHtcbiAgICB0aGlzLmNhbmNlbC5lbWl0KCk7XG4gIH1cbn1cbiIsIjxraXJieS1jYXJkPlxuICA8a2lyYnktY2FyZC1oZWFkZXJcbiAgICAqbmdJZj1cImhlYWRlclwiXG4gICAgW3RpdGxlXT1cImhlYWRlclwiXG4gICAgW2lzVGl0bGVCb2xkXT1cInRydWVcIlxuICAgIFtzdWJ0aXRsZV09XCJzdWJoZWFkZXJcIlxuICA+PC9raXJieS1jYXJkLWhlYWRlcj5cbiAgPGJ1dHRvblxuICAgIGtpcmJ5LWJ1dHRvblxuICAgIGV4cGFuZD1cImJsb2NrXCJcbiAgICBzaXplPVwibGdcIlxuICAgIFtub0RlY29yYXRpb25dPVwidHJ1ZVwiXG4gICAgKGNsaWNrKT1cIm9uSXRlbVNlbGVjdChpdGVtKVwiXG4gICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIlxuICA+XG4gICAge3sgaXRlbS50ZXh0IH19XG4gIDwvYnV0dG9uPlxuPC9raXJieS1jYXJkPlxuPGJ1dHRvblxuICAqbmdJZj1cIiFoaWRlQ2FuY2VsXCJcbiAga2lyYnktYnV0dG9uXG4gIGNsYXNzPVwiY2FuY2VsLWJ0blwiXG4gIHNpemU9XCJsZ1wiXG4gIGF0dGVudGlvbkxldmVsPVwiM1wiXG4gIChjbGljayk9XCJvbkNhbmNlbCgpXCJcbj5cbiAge3sgY2FuY2VsQnV0dG9uVGV4dCB9fVxuPC9idXR0b24+XG4iXX0=
|
|
@@ -43,7 +43,7 @@ export class AlertComponent {
|
|
|
43
43
|
ionModalElement && ionModalElement.dismiss(true);
|
|
44
44
|
}
|
|
45
45
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: i2.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", "customIconName", "title", "subtitle"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[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 }); }
|
|
46
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: i2.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", "customIconName", "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 }); }
|
|
47
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
@@ -73,4 +73,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
73
73
|
}], cancelBtn: [{
|
|
74
74
|
type: Input
|
|
75
75
|
}] } });
|
|
76
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
76
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbW9kYWwvc3JjL21vZGFsL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL21vZGFsL3NyYy9tb2RhbC9hbGVydC9hbGVydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLEtBQUssRUFDTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQzVELE9BQU8sRUFBYyxFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRTVELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7Ozs7O0FBbUJuRSxNQUFNLE9BQU8sY0FBYztJQU16QixJQUNJLEtBQUssQ0FBQyxLQUFrQztRQUMxQyxJQUFJLENBQUMsTUFBTSxHQUFHLE9BQU8sS0FBSyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDOUQsQ0FBQztJQUdELElBQ0ksT0FBTyxDQUFDLE9BQW9DO1FBQzlDLElBQUksQ0FBQyxRQUFRLEdBQUcsT0FBTyxPQUFPLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQztJQUN0RSxDQUFDO0lBUUQsWUFBb0IsVUFBbUMsRUFBVSxTQUFvQjtRQUFqRSxlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQUFVLGNBQVMsR0FBVCxTQUFTLENBQVc7UUF0QjVFLDZCQUF3QixHQUFHLEVBQUUsQ0FBQztRQUUvQixZQUFPLEdBQVcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQW9CZ0IsQ0FBQztJQUV6RixlQUFlO1FBQ2IsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3hDLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3pDLENBQUMsRUFBRSxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsYUFBYTtRQUNYLHlFQUF5RTtRQUN6RSxJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsRUFBRSxHQUFHLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDOUQsQ0FBQztJQUVELFFBQVE7UUFDTixNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDM0UsZUFBZSxJQUFJLGVBQWUsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVELElBQUk7UUFDRixNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDM0UsZUFBZSxJQUFJLGVBQWUsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbkQsQ0FBQztrSUE3Q1UsY0FBYztzSEFBZCxjQUFjLGtiQ2xDM0IseXJCQTZCQSxxVERUSSxVQUFVLG9XQUNWLGdCQUFnQixnTEFDaEIsZUFBZSwrTUFDZixZQUFZOzs0RkFXSCxjQUFjO2tCQWpCMUIsU0FBUztpQ0FDSSxJQUFJLFdBQ1A7d0JBQ1AsVUFBVTt3QkFDVixnQkFBZ0I7d0JBQ2hCLGVBQWU7d0JBQ2YsWUFBWTt3QkFDWixnQkFBZ0I7d0JBQ2hCLG1CQUFtQjtxQkFDcEIsWUFDUyxhQUFhLFFBSWpCLEVBQUUsa0JBQWtCLEVBQUUsT0FBTyxFQUFFLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNO3VHQUlNLFlBQVk7c0JBQWhFLFNBQVM7dUJBQUMsY0FBYyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFLdkMsS0FBSztzQkFEUixLQUFLO2dCQU9GLE9BQU87c0JBRFYsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgV2luZG93UmVmIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS90eXBlcyc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBvZiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSWNvbk1vZHVsZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vaWNvbic7XG5pbXBvcnQgeyBUaGVtZUNvbG9yIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9oZWxwZXJzJztcbmltcG9ydCB7IFRoZW1lQ29sb3JEaXJlY3RpdmUgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL3NoYXJlZCc7XG5pbXBvcnQgeyBFbXB0eVN0YXRlTW9kdWxlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9lbXB0eS1zdGF0ZSc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL2J1dHRvbic7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgSWNvbk1vZHVsZSxcbiAgICBFbXB0eVN0YXRlTW9kdWxlLFxuICAgIEJ1dHRvbkNvbXBvbmVudCxcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgRW1wdHlTdGF0ZU1vZHVsZSxcbiAgICBUaGVtZUNvbG9yRGlyZWN0aXZlLFxuICBdLFxuICBzZWxlY3RvcjogJ2tpcmJ5LWFsZXJ0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FsZXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWxlcnQuY29tcG9uZW50LnNjc3MnXSxcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9uby1ob3N0LW1ldGFkYXRhLXByb3BlcnR5XG4gIGhvc3Q6IHsgJ1tjbGFzcy5pb24tcGFnZV0nOiAnZmFsc2UnIH0sIC8vRW5zdXJlIGlvbi1wYWdlIGNsYXNzIGRvZXNuJ3QgZ2V0IGFwcGxpZWQgYnkgSW9uaWMgTW9kYWwgQ29udHJvbGxlclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQWxlcnRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgcmVhZG9ubHkgQkxVUl9XUkFQUEVSX0RFTEFZX0lOX01TID0gNTA7XG4gIEBWaWV3Q2hpbGQoJ2FsZXJ0V3JhcHBlcicsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgYWxlcnRXcmFwcGVyOiBFbGVtZW50UmVmO1xuICBwcml2YXRlIHNjcm9sbFk6IG51bWJlciA9IE1hdGguYWJzKHRoaXMud2luZG93UmVmLm5hdGl2ZVdpbmRvdy5zY3JvbGxZKTtcblxuICB0aXRsZSQ6IE9ic2VydmFibGU8c3RyaW5nPjtcbiAgQElucHV0KClcbiAgc2V0IHRpdGxlKHRpdGxlOiBzdHJpbmcgfCBPYnNlcnZhYmxlPHN0cmluZz4pIHtcbiAgICB0aGlzLnRpdGxlJCA9IHR5cGVvZiB0aXRsZSA9PT0gJ3N0cmluZycgPyBvZih0aXRsZSkgOiB0aXRsZTtcbiAgfVxuXG4gIG1lc3NhZ2UkOiBPYnNlcnZhYmxlPHN0cmluZz47XG4gIEBJbnB1dCgpXG4gIHNldCBtZXNzYWdlKG1lc3NhZ2U6IHN0cmluZyAmIE9ic2VydmFibGU8c3RyaW5nPikge1xuICAgIHRoaXMubWVzc2FnZSQgPSB0eXBlb2YgbWVzc2FnZSA9PT0gJ3N0cmluZycgPyBvZihtZXNzYWdlKSA6IG1lc3NhZ2U7XG4gIH1cblxuICBASW5wdXQoKSBpY29uTmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uVGhlbWVDb2xvcjogVGhlbWVDb2xvciB8IGAke1RoZW1lQ29sb3J9YDtcbiAgQElucHV0KCkgb2tCdG46IHN0cmluZztcbiAgQElucHV0KCkgb2tCdG5Jc0Rlc3RydWN0aXZlOiBib29sZWFuO1xuICBASW5wdXQoKSBjYW5jZWxCdG46IHN0cmluZztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LCBwcml2YXRlIHdpbmRvd1JlZjogV2luZG93UmVmKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuYWxlcnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICAgIHRoaXMuYWxlcnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQuYmx1cigpO1xuICAgIH0sIHRoaXMuQkxVUl9XUkFQUEVSX0RFTEFZX0lOX01TKTtcbiAgfVxuXG4gIG9uRm9jdXNDaGFuZ2UoKSB7XG4gICAgLy8gVGhpcyBmaXhlcyBhbiB1bmRlc2lyZWQgc2Nyb2xsIGJlaGF2aW91ciBvY2N1cnJpbmcgb24ga2V5Ym9hcmQtdGFiYmluZ1xuICAgIHRoaXMud2luZG93UmVmLm5hdGl2ZVdpbmRvdy5zY3JvbGxUbyh7IHRvcDogdGhpcy5zY3JvbGxZIH0pO1xuICB9XG5cbiAgb25DYW5jZWwoKSB7XG4gICAgY29uc3QgaW9uTW9kYWxFbGVtZW50ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xvc2VzdCgnaW9uLW1vZGFsJyk7XG4gICAgaW9uTW9kYWxFbGVtZW50ICYmIGlvbk1vZGFsRWxlbWVudC5kaXNtaXNzKGZhbHNlKTtcbiAgfVxuXG4gIG9uT2soKSB7XG4gICAgY29uc3QgaW9uTW9kYWxFbGVtZW50ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xvc2VzdCgnaW9uLW1vZGFsJyk7XG4gICAgaW9uTW9kYWxFbGVtZW50ICYmIGlvbk1vZGFsRWxlbWVudC5kaXNtaXNzKHRydWUpO1xuICB9XG59XG4iLCI8YXJ0aWNsZSAjYWxlcnRXcmFwcGVyPlxuICA8a2lyYnktZW1wdHktc3RhdGVcbiAgICBbaWNvbk5hbWVdPVwiaWNvbk5hbWVcIlxuICAgIFt0aGVtZUNvbG9yXT1cImljb25UaGVtZUNvbG9yXCJcbiAgICBbdGl0bGVdPVwidGl0bGUkIHwgYXN5bmNcIlxuICAgIFtzdWJ0aXRsZV09XCJtZXNzYWdlJCB8IGFzeW5jXCJcbiAgPjwva2lyYnktZW1wdHktc3RhdGU+XG4gIDxkaXYgY2xhc3M9XCJidXR0b25ncm91cFwiPlxuICAgIDxidXR0b25cbiAgICAgIGtpcmJ5LWJ1dHRvblxuICAgICAgKm5nSWY9XCJjYW5jZWxCdG5cIlxuICAgICAgYXR0ZW50aW9uTGV2ZWw9XCIzXCJcbiAgICAgIGNsYXNzPVwiY2FuY2VsLWJ0blwiXG4gICAgICAoY2xpY2spPVwib25DYW5jZWwoKVwiXG4gICAgPlxuICAgICAge3sgY2FuY2VsQnRuIH19XG4gICAgPC9idXR0b24+XG4gICAgPGJ1dHRvblxuICAgICAga2lyYnktYnV0dG9uXG4gICAgICBbc2l6ZV09XCJjYW5jZWxCdG4gPyBudWxsIDogJ2xnJ1wiXG4gICAgICBhdHRlbnRpb25MZXZlbD1cIjFcIlxuICAgICAgY2xhc3M9XCJvay1idG5cIlxuICAgICAgW2NsYXNzLmRlc3RydWN0aXZlXT1cIm9rQnRuSXNEZXN0cnVjdGl2ZVwiXG4gICAgICAoY2xpY2spPVwib25PaygpXCJcbiAgICA+XG4gICAgICB7eyBva0J0biB9fVxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvYXJ0aWNsZT5cbiJdfQ==
|
|
@@ -15,11 +15,11 @@ export class ModalFooterComponent extends ModalElementComponent {
|
|
|
15
15
|
this.themeColor = 'white';
|
|
16
16
|
}
|
|
17
17
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: i1.ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: ["
|
|
18
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ standalone: true, imports: [CommonModule, IonFooter], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["
|
|
22
|
+
args: [{ standalone: true, 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"] }]
|
|
23
23
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ModalElementsAdvertiser, decorators: [{
|
|
24
24
|
type: Optional
|
|
25
25
|
}] }], propDecorators: { snapToKeyboard: [{
|
|
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
35
35
|
type: HostBinding,
|
|
36
36
|
args: ['class']
|
|
37
37
|
}] } });
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtZm9vdGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL21vZGFsL3NyYy9tb2RhbC9mb290ZXIvbW9kYWwtZm9vdGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL21vZGFsL3NyYy9tb2RhbC9mb290ZXIvbW9kYWwtZm9vdGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFDTCxRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3RELE9BQU8sRUFDTCxxQkFBcUIsRUFDckIsdUJBQXVCLEVBQ3ZCLGdCQUFnQixHQUNqQixNQUFNLHdCQUF3QixDQUFDOzs7QUFVaEMsTUFBTSxPQUFPLG9CQUFxQixTQUFRLHFCQUFxQjtJQVc3RCxJQUNJLFNBQVM7UUFDWCxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDdkUsQ0FBQztJQUVELFlBQ0UsVUFBbUMsRUFDdkIsdUJBQWdEO1FBRTVELEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsVUFBVSxFQUFFLHVCQUF1QixDQUFDLENBQUM7UUFqQnRFLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBR3ZCLFNBQUksR0FBdUIsT0FBTyxDQUFDO1FBR25DLGVBQVUsR0FBc0IsT0FBTyxDQUFDO0lBWXhDLENBQUM7a0lBckJVLG9CQUFvQjtzSEFBcEIsb0JBQW9CLGlTQ3hCakMsNERBR0EsbXNIRGVZLFlBQVksK0JBQUUsU0FBUzs7NEZBTXRCLG9CQUFvQjtrQkFSaEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsU0FBUyxDQUFDLFlBQ3hCLG9CQUFvQixtQkFHYix1QkFBdUIsQ0FBQyxNQUFNOzswQkFvQjVDLFFBQVE7eUNBZlgsY0FBYztzQkFGYixXQUFXO3VCQUFDLHdCQUF3Qjs7c0JBQ3BDLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFJRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9wdGlvbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvbkZvb3RlciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyL3N0YW5kYWxvbmUnO1xuaW1wb3J0IHtcbiAgTW9kYWxFbGVtZW50Q29tcG9uZW50LFxuICBNb2RhbEVsZW1lbnRzQWR2ZXJ0aXNlcixcbiAgTW9kYWxFbGVtZW50VHlwZSxcbn0gZnJvbSAnLi4vLi4vbW9kYWwuaW50ZXJmYWNlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJb25Gb290ZXJdLFxuICBzZWxlY3RvcjogJ2tpcmJ5LW1vZGFsLWZvb3RlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC1mb290ZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tb2RhbC1mb290ZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1vZGFsRm9vdGVyQ29tcG9uZW50IGV4dGVuZHMgTW9kYWxFbGVtZW50Q29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zbmFwLXRvLWtleWJvYXJkJylcbiAgQElucHV0KClcbiAgc25hcFRvS2V5Ym9hcmQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICB0eXBlOiAnaW5saW5lJyB8ICdmaXhlZCcgPSAnZml4ZWQnO1xuXG4gIEBJbnB1dCgpXG4gIHRoZW1lQ29sb3I6ICd3aGl0ZScgfCAnbGlnaHQnID0gJ3doaXRlJztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IF9jc3NDbGFzcygpIHtcbiAgICByZXR1cm4gW3RoaXMudGhlbWVDb2xvciwgdGhpcy50eXBlXS5maWx0ZXIoKGNzc0NsYXNzKSA9PiAhIWNzc0NsYXNzKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgIEBPcHRpb25hbCgpIG1vZGFsRWxlbWVudHNBZHZlcnRpc2VyOiBNb2RhbEVsZW1lbnRzQWR2ZXJ0aXNlclxuICApIHtcbiAgICBzdXBlcihNb2RhbEVsZW1lbnRUeXBlLkZPT1RFUiwgZWxlbWVudFJlZiwgbW9kYWxFbGVtZW50c0FkdmVydGlzZXIpO1xuICB9XG59XG4iLCI8aW9uLWZvb3Rlcj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9pb24tZm9vdGVyPlxuIl19
|