@kirbydesign/designsystem 6.0.2 → 6.1.2-rc.ionic
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/esm2020/lib/components/button/button.component.mjs +2 -2
- package/esm2020/lib/components/card/card-footer/card-footer.component.mjs +2 -2
- package/esm2020/lib/components/dropdown/dropdown.component.mjs +26 -18
- package/esm2020/lib/components/fab-sheet/fab-sheet.component.mjs +3 -3
- package/esm2020/lib/components/form-field/input/input.component.mjs +2 -2
- package/esm2020/lib/components/form-field/textarea/textarea.component.mjs +2 -2
- package/esm2020/lib/components/icon/icon.component.mjs +1 -1
- package/esm2020/lib/components/item/item.component.mjs +1 -1
- package/esm2020/lib/components/list/list-item/list-item.component.mjs +2 -2
- package/esm2020/lib/components/list/list.component.mjs +2 -2
- package/esm2020/lib/components/modal/footer/modal-footer.component.mjs +14 -9
- package/esm2020/lib/components/modal/modal-wrapper/modal-elements-mover.delegate.mjs +62 -0
- package/esm2020/lib/components/modal/modal-wrapper/modal-wrapper.component.mjs +73 -123
- package/esm2020/lib/components/modal/services/action-sheet.helper.mjs +4 -1
- package/esm2020/lib/components/modal/services/modal-animation-builder.service.mjs +62 -50
- package/esm2020/lib/components/modal/services/modal.helper.mjs +12 -11
- package/esm2020/lib/components/modal/services/modal.interfaces.mjs +39 -1
- package/esm2020/lib/components/page/page.component.mjs +31 -21
- package/esm2020/lib/components/range/range.component.mjs +1 -1
- package/esm2020/lib/components/segmented-control/segmented-control.component.mjs +1 -1
- package/esm2020/lib/components/slide-button/slide-button.component.mjs +2 -2
- package/esm2020/lib/components/toggle/toggle.component.mjs +1 -1
- package/fesm2015/kirbydesign-designsystem.mjs +321 -232
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem.mjs +314 -232
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/lib/components/avatar/avatar.component.d.ts +1 -1
- package/lib/components/dropdown/dropdown.component.d.ts +6 -5
- package/lib/components/modal/footer/modal-footer.component.d.ts +5 -2
- package/lib/components/modal/modal-wrapper/modal-elements-mover.delegate.d.ts +14 -0
- package/lib/components/modal/modal-wrapper/modal-wrapper.component.d.ts +14 -16
- package/lib/components/modal/services/modal-animation-builder.service.d.ts +14 -3
- package/lib/components/modal/services/modal.interfaces.d.ts +22 -0
- package/lib/components/page/page.component.d.ts +7 -5
- package/package.json +8 -8
- package/scss/base/_link.scss +1 -0
- package/scss/interaction-state/_active.scss +1 -0
- package/scss/interaction-state/_focus.scss +1 -0
- package/scss/interaction-state/_hover.scss +1 -0
- package/scss/interaction-state/_index.scss +1 -0
- package/scss/interaction-state/_interaction-state.utilities.scss +1 -0
- package/scss/interaction-state/_layer.scss +1 -0
- package/scss/opt-out/_index.scss +1 -0
- package/scss/opt-out/_link.scss +1 -0
- package/src/lib/components/icon/README.md +16 -0
- package/README.md +0 -7
|
@@ -100,10 +100,10 @@ export class ListItemComponent {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
/** @nocollapse */ ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListItemComponent, deps: [{ token: i1.PlatformService }], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
-
/** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:
|
|
103
|
+
/** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(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{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{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) 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(white,black);mask-image:radial-gradient(white,black)}: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(white,black);mask-image:radial-gradient(white,black)}: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}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i2.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i2.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i2.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
104
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", 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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:
|
|
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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(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{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{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) 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(white,black);mask-image:radial-gradient(white,black)}: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(white,black);mask-image:radial-gradient(white,black)}: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}\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: function () { return [{ type: i1.PlatformService }]; }, propDecorators: { ionItemSliding: [{
|
|
108
108
|
type: ViewChild,
|
|
109
109
|
args: [IonItemSliding]
|
|
@@ -108,10 +108,10 @@ export class ListComponent {
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
/** @nocollapse */ ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, deps: [{ token: i1.ListHelper }, { token: i2.GroupByPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
-
/** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", 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" } }, providers: [ListHelper, GroupByPipe], 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 }, { propertyName: "kirbyItems", predicate: ItemComponent }], 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 ? 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 *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <div class=\"list-items\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;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{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{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) 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(white,black);mask-image:radial-gradient(white,black)}: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(white,black);mask-image:radial-gradient(white,black)}: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}\n"], components: [{ type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i3.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: i4.SpinnerComponent, selector: "kirby-spinner" }, { type: i3.IonItemGroup, selector: "ion-item-group" }, { type: i3.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: i5.ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: i6.InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
111
|
+
/** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", 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" } }, providers: [ListHelper, GroupByPipe], 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 }, { propertyName: "kirbyItems", predicate: ItemComponent }], 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 ? 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 *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <div class=\"list-items\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(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{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{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) 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(white,black);mask-image:radial-gradient(white,black)}: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(white,black);mask-image:radial-gradient(white,black)}: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}\n"], components: [{ type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i3.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: i4.SpinnerComponent, selector: "kirby-spinner" }, { type: i3.IonItemGroup, selector: "ion-item-group" }, { type: i3.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: i5.ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: i6.InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
112
112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, decorators: [{
|
|
113
113
|
type: Component,
|
|
114
|
-
args: [{ selector: 'kirby-list', providers: [ListHelper, GroupByPipe], 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 ? 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 *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <div class=\"list-items\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:
|
|
114
|
+
args: [{ selector: 'kirby-list', providers: [ListHelper, GroupByPipe], 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 ? 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 *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <div class=\"list-items\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\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 >\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.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(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{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{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) 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(white,black);mask-image:radial-gradient(white,black)}: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(white,black);mask-image:radial-gradient(white,black)}: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}\n"] }]
|
|
115
115
|
}], ctorParameters: function () { return [{ type: i1.ListHelper }, { type: i2.GroupByPipe }]; }, propDecorators: { list: [{
|
|
116
116
|
type: ViewChild,
|
|
117
117
|
args: ['list', { static: true }]
|
|
@@ -1,18 +1,23 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, Optional, } from '@angular/core';
|
|
2
|
+
import { ModalElementComponent, ModalElementsAdvertiser, ModalElementType, } from '../services/modal.interfaces';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
import * as i1 from "../services/modal.interfaces";
|
|
5
|
+
import * as i2 from "@ionic/angular";
|
|
6
|
+
export class ModalFooterComponent extends ModalElementComponent {
|
|
7
|
+
constructor(elementRef, modalElementsAdvertiser) {
|
|
8
|
+
super(ModalElementType.FOOTER, elementRef, modalElementsAdvertiser);
|
|
6
9
|
this.snapToKeyboard = false;
|
|
7
10
|
this.type = 'fixed';
|
|
8
11
|
}
|
|
9
12
|
}
|
|
10
|
-
/** @nocollapse */ ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
-
/** @nocollapse */ ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;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:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{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"], components: [{ type:
|
|
13
|
+
/** @nocollapse */ ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: i1.ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
+
/** @nocollapse */ ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;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:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{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"], components: [{ type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
13
16
|
type: Component,
|
|
14
|
-
args: [{ selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;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:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{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"] }]
|
|
15
|
-
}],
|
|
17
|
+
args: [{ selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;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:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{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"] }]
|
|
18
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ModalElementsAdvertiser, decorators: [{
|
|
19
|
+
type: Optional
|
|
20
|
+
}] }]; }, propDecorators: { snapToKeyboard: [{
|
|
16
21
|
type: HostBinding,
|
|
17
22
|
args: ['class.snap-to-keyboard']
|
|
18
23
|
}, {
|
|
@@ -23,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
23
28
|
}, {
|
|
24
29
|
type: Input
|
|
25
30
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtZm9vdGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9tb2RhbC9mb290ZXIvbW9kYWwtZm9vdGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9tb2RhbC9mb290ZXIvbW9kYWwtZm9vdGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsS0FBSyxFQUVMLFFBQVEsR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQ0wscUJBQXFCLEVBQ3JCLHVCQUF1QixFQUN2QixnQkFBZ0IsR0FDakIsTUFBTSw4QkFBOEIsQ0FBQzs7OztBQVF0QyxNQUFNLE9BQU8sb0JBQXFCLFNBQVEscUJBQXFCO0lBUzdELFlBQ0UsVUFBbUMsRUFDdkIsdUJBQWdEO1FBRTVELEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsVUFBVSxFQUFFLHVCQUF1QixDQUFDLENBQUM7UUFWdEUsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFJdkIsU0FBSSxHQUF1QixPQUFPLENBQUM7SUFPbkMsQ0FBQzs7b0lBZFUsb0JBQW9CO3dIQUFwQixvQkFBb0IsOE9DdkJqQyw0REFHQTsyRkRvQmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLG9CQUFvQixtQkFHYix1QkFBdUIsQ0FBQyxNQUFNOzswQkFhNUMsUUFBUTs0Q0FSWCxjQUFjO3NCQUZiLFdBQVc7dUJBQUMsd0JBQXdCOztzQkFDcEMsS0FBSztnQkFLTixJQUFJO3NCQUZILFdBQVc7dUJBQUMsT0FBTzs7c0JBQ25CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT3B0aW9uYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQge1xuICBNb2RhbEVsZW1lbnRDb21wb25lbnQsXG4gIE1vZGFsRWxlbWVudHNBZHZlcnRpc2VyLFxuICBNb2RhbEVsZW1lbnRUeXBlLFxufSBmcm9tICcuLi9zZXJ2aWNlcy9tb2RhbC5pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnktbW9kYWwtZm9vdGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21vZGFsLWZvb3Rlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21vZGFsLWZvb3Rlci5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTW9kYWxGb290ZXJDb21wb25lbnQgZXh0ZW5kcyBNb2RhbEVsZW1lbnRDb21wb25lbnQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNuYXAtdG8ta2V5Ym9hcmQnKVxuICBASW5wdXQoKVxuICBzbmFwVG9LZXlib2FyZCA9IGZhbHNlO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBASW5wdXQoKVxuICB0eXBlOiAnaW5saW5lJyB8ICdmaXhlZCcgPSAnZml4ZWQnO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgIEBPcHRpb25hbCgpIG1vZGFsRWxlbWVudHNBZHZlcnRpc2VyOiBNb2RhbEVsZW1lbnRzQWR2ZXJ0aXNlclxuICApIHtcbiAgICBzdXBlcihNb2RhbEVsZW1lbnRUeXBlLkZPT1RFUiwgZWxlbWVudFJlZiwgbW9kYWxFbGVtZW50c0FkdmVydGlzZXIpO1xuICB9XG59XG4iLCI8aW9uLWZvb3Rlcj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9pb24tZm9vdGVyPlxuIl19
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
|
+
/*
|
|
3
|
+
The ModalWrapperComponent class was growing large.
|
|
4
|
+
|
|
5
|
+
Hence the functions responsible for moving modal elements around
|
|
6
|
+
has been encapsulated in this class.
|
|
7
|
+
*/
|
|
8
|
+
export class ModalElementsMoverDelegate {
|
|
9
|
+
constructor(renderer, elementRef) {
|
|
10
|
+
this.renderer = renderer;
|
|
11
|
+
this.elementRef = elementRef;
|
|
12
|
+
}
|
|
13
|
+
addFooter(footerElementRef) {
|
|
14
|
+
// Move the footer next to ion-content
|
|
15
|
+
this.moveChild(footerElementRef, this.elementRef);
|
|
16
|
+
}
|
|
17
|
+
removeFooter(footerElementRef) {
|
|
18
|
+
this.removeChild(footerElementRef);
|
|
19
|
+
}
|
|
20
|
+
addPageProgress(pageProgressElementRef, ionToolbarElement) {
|
|
21
|
+
this.moveChild(pageProgressElementRef, ionToolbarElement);
|
|
22
|
+
}
|
|
23
|
+
removePageProgress(pageProgressElementRef) {
|
|
24
|
+
this.removeChild(pageProgressElementRef);
|
|
25
|
+
}
|
|
26
|
+
/*
|
|
27
|
+
contentTitleElement & ionTitleElement has to be passed
|
|
28
|
+
as arguments to the method; not part of the constructor, as they
|
|
29
|
+
might reference completely different elements between calls.
|
|
30
|
+
|
|
31
|
+
For example in a multi-page routed modal where the elements are destroyed
|
|
32
|
+
and recreated.
|
|
33
|
+
*/
|
|
34
|
+
addTitle(titleElementRef, contentTitleElement, hasCollapsibleTitle, ionTitleElement) {
|
|
35
|
+
this.moveChild(titleElementRef, ionTitleElement);
|
|
36
|
+
// If title is collapsible append it to content area; required by ionic implementation.
|
|
37
|
+
if (hasCollapsibleTitle) {
|
|
38
|
+
const titleElementClone = titleElementRef.nativeElement.cloneNode(true);
|
|
39
|
+
this.moveChild(new ElementRef(titleElementClone), contentTitleElement);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
removeTitle(titleElementRef, hasCollapsibleTitle, contentTitleElement) {
|
|
43
|
+
this.removeChild(titleElementRef);
|
|
44
|
+
if (hasCollapsibleTitle) {
|
|
45
|
+
const kirbyPageTitleElement = contentTitleElement.nativeElement.querySelector('kirby-page-title');
|
|
46
|
+
this.removeChild(new ElementRef(kirbyPageTitleElement));
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
moveChild(childElementRef, newParentElementRef) {
|
|
50
|
+
const child = childElementRef.nativeElement;
|
|
51
|
+
const newParent = newParentElementRef.nativeElement;
|
|
52
|
+
this.renderer.removeChild(child.parentElement, child);
|
|
53
|
+
this.renderer.appendChild(newParent, child);
|
|
54
|
+
}
|
|
55
|
+
removeChild(childElementRef, parentElement) {
|
|
56
|
+
const child = childElementRef.nativeElement;
|
|
57
|
+
if (!!child) {
|
|
58
|
+
this.renderer.removeChild(parentElement || child.parentElement, child);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtZWxlbWVudHMtbW92ZXIuZGVsZWdhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvbW9kYWwvbW9kYWwtd3JhcHBlci9tb2RhbC1lbGVtZW50cy1tb3Zlci5kZWxlZ2F0ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBRXREOzs7OztFQUtFO0FBRUYsTUFBTSxPQUFPLDBCQUEwQjtJQUNyQyxZQUFvQixRQUFtQixFQUFVLFVBQW1DO1FBQWhFLGFBQVEsR0FBUixRQUFRLENBQVc7UUFBVSxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUFHLENBQUM7SUFFakYsU0FBUyxDQUFDLGdCQUF5QztRQUN4RCxzQ0FBc0M7UUFDdEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxnQkFBZ0IsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVNLFlBQVksQ0FBQyxnQkFBeUM7UUFDM0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFTSxlQUFlLENBQ3BCLHNCQUErQyxFQUMvQyxpQkFBb0Q7UUFFcEQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxzQkFBc0IsRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFTSxrQkFBa0IsQ0FBQyxzQkFBK0M7UUFDdkUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRDs7Ozs7OztNQU9FO0lBQ0ssUUFBUSxDQUNiLGVBQXdDLEVBQ3hDLG1CQUE0QyxFQUM1QyxtQkFBNEIsRUFDNUIsZUFBZ0Q7UUFFaEQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxlQUFlLEVBQUUsZUFBZSxDQUFDLENBQUM7UUFDakQsdUZBQXVGO1FBQ3ZGLElBQUksbUJBQW1CLEVBQUU7WUFDdkIsTUFBTSxpQkFBaUIsR0FBRyxlQUFlLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQWdCLENBQUM7WUFDdkYsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLFVBQVUsQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFLG1CQUFtQixDQUFDLENBQUM7U0FDeEU7SUFDSCxDQUFDO0lBRU0sV0FBVyxDQUNoQixlQUF3QyxFQUN4QyxtQkFBNEIsRUFDNUIsbUJBQTRDO1FBRTVDLElBQUksQ0FBQyxXQUFXLENBQUMsZUFBZSxDQUFDLENBQUM7UUFDbEMsSUFBSSxtQkFBbUIsRUFBRTtZQUN2QixNQUFNLHFCQUFxQixHQUN6QixtQkFBbUIsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLGtCQUFrQixDQUFDLENBQUM7WUFDdEUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLFVBQVUsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUM7U0FDekQ7SUFDSCxDQUFDO0lBRU8sU0FBUyxDQUNmLGVBQXdDLEVBQ3hDLG1CQUE0QztRQUU1QyxNQUFNLEtBQUssR0FBRyxlQUFlLENBQUMsYUFBYSxDQUFDO1FBQzVDLE1BQU0sU0FBUyxHQUFHLG1CQUFtQixDQUFDLGFBQWEsQ0FBQztRQUNwRCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ3RELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU8sV0FBVyxDQUNqQixlQUF3QyxFQUN4QyxhQUFxRDtRQUVyRCxNQUFNLEtBQUssR0FBRyxlQUFlLENBQUMsYUFBYSxDQUFDO1FBQzVDLElBQUksQ0FBQyxDQUFDLEtBQUssRUFBRTtZQUNYLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLGFBQWEsSUFBSSxLQUFLLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ3hFO0lBQ0gsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qXG4gIFRoZSBNb2RhbFdyYXBwZXJDb21wb25lbnQgY2xhc3Mgd2FzIGdyb3dpbmcgbGFyZ2UuIFxuXG4gIEhlbmNlIHRoZSBmdW5jdGlvbnMgcmVzcG9uc2libGUgZm9yIG1vdmluZyBtb2RhbCBlbGVtZW50cyBhcm91bmQgXG4gIGhhcyBiZWVuIGVuY2Fwc3VsYXRlZCBpbiB0aGlzIGNsYXNzLiBcbiovXG5cbmV4cG9ydCBjbGFzcyBNb2RhbEVsZW1lbnRzTW92ZXJEZWxlZ2F0ZSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMiwgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge31cblxuICBwdWJsaWMgYWRkRm9vdGVyKGZvb3RlckVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7XG4gICAgLy8gTW92ZSB0aGUgZm9vdGVyIG5leHQgdG8gaW9uLWNvbnRlbnRcbiAgICB0aGlzLm1vdmVDaGlsZChmb290ZXJFbGVtZW50UmVmLCB0aGlzLmVsZW1lbnRSZWYpO1xuICB9XG5cbiAgcHVibGljIHJlbW92ZUZvb3Rlcihmb290ZXJFbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge1xuICAgIHRoaXMucmVtb3ZlQ2hpbGQoZm9vdGVyRWxlbWVudFJlZik7XG4gIH1cblxuICBwdWJsaWMgYWRkUGFnZVByb2dyZXNzKFxuICAgIHBhZ2VQcm9ncmVzc0VsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgIGlvblRvb2xiYXJFbGVtZW50OiBFbGVtZW50UmVmPEhUTUxJb25Ub29sYmFyRWxlbWVudD5cbiAgKSB7XG4gICAgdGhpcy5tb3ZlQ2hpbGQocGFnZVByb2dyZXNzRWxlbWVudFJlZiwgaW9uVG9vbGJhckVsZW1lbnQpO1xuICB9XG5cbiAgcHVibGljIHJlbW92ZVBhZ2VQcm9ncmVzcyhwYWdlUHJvZ3Jlc3NFbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge1xuICAgIHRoaXMucmVtb3ZlQ2hpbGQocGFnZVByb2dyZXNzRWxlbWVudFJlZik7XG4gIH1cblxuICAvKiBcbiAgICAgY29udGVudFRpdGxlRWxlbWVudCAmIGlvblRpdGxlRWxlbWVudCBoYXMgdG8gYmUgcGFzc2VkXG4gICAgIGFzIGFyZ3VtZW50cyB0byB0aGUgbWV0aG9kOyBub3QgcGFydCBvZiB0aGUgY29uc3RydWN0b3IsIGFzIHRoZXkgXG4gICAgIG1pZ2h0IHJlZmVyZW5jZSBjb21wbGV0ZWx5IGRpZmZlcmVudCBlbGVtZW50cyBiZXR3ZWVuIGNhbGxzLiBcblxuICAgICBGb3IgZXhhbXBsZSBpbiBhIG11bHRpLXBhZ2Ugcm91dGVkIG1vZGFsIHdoZXJlIHRoZSBlbGVtZW50cyBhcmUgZGVzdHJveWVkIFxuICAgICBhbmQgcmVjcmVhdGVkLlxuICAqL1xuICBwdWJsaWMgYWRkVGl0bGUoXG4gICAgdGl0bGVFbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICBjb250ZW50VGl0bGVFbGVtZW50OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICBoYXNDb2xsYXBzaWJsZVRpdGxlOiBib29sZWFuLFxuICAgIGlvblRpdGxlRWxlbWVudDogRWxlbWVudFJlZjxIVE1MSW9uVGl0bGVFbGVtZW50PlxuICApIHtcbiAgICB0aGlzLm1vdmVDaGlsZCh0aXRsZUVsZW1lbnRSZWYsIGlvblRpdGxlRWxlbWVudCk7XG4gICAgLy8gSWYgdGl0bGUgaXMgY29sbGFwc2libGUgYXBwZW5kIGl0IHRvIGNvbnRlbnQgYXJlYTsgcmVxdWlyZWQgYnkgaW9uaWMgaW1wbGVtZW50YXRpb24uXG4gICAgaWYgKGhhc0NvbGxhcHNpYmxlVGl0bGUpIHtcbiAgICAgIGNvbnN0IHRpdGxlRWxlbWVudENsb25lID0gdGl0bGVFbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xvbmVOb2RlKHRydWUpIGFzIEhUTUxFbGVtZW50O1xuICAgICAgdGhpcy5tb3ZlQ2hpbGQobmV3IEVsZW1lbnRSZWYodGl0bGVFbGVtZW50Q2xvbmUpLCBjb250ZW50VGl0bGVFbGVtZW50KTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlVGl0bGUoXG4gICAgdGl0bGVFbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICBoYXNDb2xsYXBzaWJsZVRpdGxlOiBib29sZWFuLFxuICAgIGNvbnRlbnRUaXRsZUVsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+XG4gICkge1xuICAgIHRoaXMucmVtb3ZlQ2hpbGQodGl0bGVFbGVtZW50UmVmKTtcbiAgICBpZiAoaGFzQ29sbGFwc2libGVUaXRsZSkge1xuICAgICAgY29uc3Qga2lyYnlQYWdlVGl0bGVFbGVtZW50OiBIVE1MRWxlbWVudCA9XG4gICAgICAgIGNvbnRlbnRUaXRsZUVsZW1lbnQubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCdraXJieS1wYWdlLXRpdGxlJyk7XG4gICAgICB0aGlzLnJlbW92ZUNoaWxkKG5ldyBFbGVtZW50UmVmKGtpcmJ5UGFnZVRpdGxlRWxlbWVudCkpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgbW92ZUNoaWxkKFxuICAgIGNoaWxkRWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICAgbmV3UGFyZW50RWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD5cbiAgKSB7XG4gICAgY29uc3QgY2hpbGQgPSBjaGlsZEVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICBjb25zdCBuZXdQYXJlbnQgPSBuZXdQYXJlbnRFbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChjaGlsZC5wYXJlbnRFbGVtZW50LCBjaGlsZCk7XG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZChuZXdQYXJlbnQsIGNoaWxkKTtcbiAgfVxuXG4gIHByaXZhdGUgcmVtb3ZlQ2hpbGQoXG4gICAgY2hpbGRFbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICBwYXJlbnRFbGVtZW50PzogSFRNTEVsZW1lbnQgfCBFbGVtZW50UmVmPEhUTUxFbGVtZW50PlxuICApIHtcbiAgICBjb25zdCBjaGlsZCA9IGNoaWxkRWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIGlmICghIWNoaWxkKSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNoaWxkKHBhcmVudEVsZW1lbnQgfHwgY2hpbGQucGFyZW50RWxlbWVudCwgY2hpbGQpO1xuICAgIH1cbiAgfVxufVxuIl19
|