@kirbydesign/designsystem 6.0.3 → 6.1.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/esm2020/lib/components/chart/configs/annotations.config.mjs +1 -1
- package/esm2020/lib/components/dropdown/dropdown.component.mjs +15 -12
- package/esm2020/lib/components/flag/flag.component.mjs +2 -2
- 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/kirby-icon-settings.mjs +2 -1
- package/esm2020/lib/components/modal/modal-wrapper/modal-wrapper.component.mjs +3 -3
- package/esm2020/lib/components/page/page.component.mjs +21 -3
- package/esm2020/lib/components/slide-button/slide-button.component.mjs +2 -2
- package/esm2020/testing-base/lib/components/mock.page.component.mjs +5 -2
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs +4 -1
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem.mjs +45 -23
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs +4 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem.mjs +45 -23
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/insurance.svg +5 -0
- package/lib/components/chart/configs/annotations.config.d.ts +1 -1
- package/lib/components/dropdown/dropdown.component.d.ts +2 -0
- package/lib/components/page/page.component.d.ts +4 -1
- package/package.json +2 -2
- package/readme.md +5 -37
- package/scss/_trigger-publish.scss +1 -0
- package/scss/_trigger.scss +1 -0
- package/scss/awesome-stylesheet.scss +1 -0
- package/scss/base/_awesome-partial.scss +1 -0
- package/scss/base/_index.scss +1 -0
- package/scss/base/_interaction-states.scss +1 -0
- package/scss/base/index.scss +1 -0
- package/scss/interaction-state/_state-layer.scss +1 -0
- package/scss/interaction-state/_utilities.scss +1 -0
- package/scss/interaction-state/ionic/_active.scss +1 -0
- package/scss/interaction-state/ionic/_hover.scss +1 -0
- package/scss/interaction-state/ionic/_index.scss +1 -0
- package/scss/interaction-states/_hover.scss +1 -0
- package/scss/interaction-states/_index.scss +1 -0
- package/testing-base/lib/components/mock.page.component.d.ts +2 -1
|
@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, InjectionToken, Injector, HostListener, ElementRef, ContentChild, RendererStyleFlags2, ViewChildren, ViewChild, EventEmitter, Output, ContentChildren, Optional, Inject, NgModule, ChangeDetectorRef, NgZone, LOCALE_ID, forwardRef, TemplateRef, Pipe, SkipSelf, APP_INITIALIZER } from '@angular/core';
|
|
5
5
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
6
6
|
import * as i1 from '@ionic/angular';
|
|
7
|
-
import { IonContent, IonHeader, IonToolbar, IonTitle, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter } from '@ionic/angular';
|
|
7
|
+
import { IonContent, IonHeader, IonToolbar, IonTitle, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
|
|
8
8
|
export { IonRouterOutlet, NavController } from '@ionic/angular';
|
|
9
9
|
import * as i2 from '@angular/common';
|
|
10
10
|
import { CommonModule, formatNumber, getLocaleDateFormat, FormatWidth, getLocaleNumberSymbol, NumberSymbol, DOCUMENT } from '@angular/common';
|
|
@@ -94,6 +94,7 @@ const kirbyIconSettings = {
|
|
|
94
94
|
{ name: 'inbox', svg: 'assets/kirby/icons/svg/inbox.svg' },
|
|
95
95
|
{ name: 'inbox-outline', svg: 'assets/kirby/icons/svg/inbox-outline.svg' },
|
|
96
96
|
{ name: 'information', svg: 'assets/kirby/icons/svg/information.svg' },
|
|
97
|
+
{ name: 'insurance', svg: 'assets/kirby/icons/svg/insurance.svg' },
|
|
97
98
|
{ name: 'investment', svg: 'assets/kirby/icons/svg/investment.svg' },
|
|
98
99
|
{ name: 'kirby', svg: 'assets/kirby/icons/svg/kirby.svg' },
|
|
99
100
|
{ name: 'link', svg: 'assets/kirby/icons/svg/link.svg' },
|
|
@@ -1006,10 +1007,10 @@ class ModalWrapperComponent {
|
|
|
1006
1007
|
}
|
|
1007
1008
|
ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS = 100;
|
|
1008
1009
|
/** @nocollapse */ ModalWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ResizeObserverService }, { token: i0.ComponentFactoryResolver }, { token: WindowRef }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1009
|
-
/** @nocollapse */ ModalWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "contentTitle", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\" #contentTitle></span>\n </ion-toolbar>\n </ion-header>\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"4\" size=\"
|
|
1010
|
+
/** @nocollapse */ ModalWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "contentTitle", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\" #contentTitle></span>\n </ion-toolbar>\n </ion-header>\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"4\" size=\"md\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n <button kirby-button attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
|
|
1010
1011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, decorators: [{
|
|
1011
1012
|
type: Component,
|
|
1012
|
-
args: [{ selector: 'kirby-modal-wrapper', providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\" #contentTitle></span>\n </ion-toolbar>\n </ion-header>\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"4\" size=\"
|
|
1013
|
+
args: [{ selector: 'kirby-modal-wrapper', providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\" #contentTitle></span>\n </ion-toolbar>\n </ion-header>\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"4\" size=\"md\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n <button kirby-button attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
|
|
1013
1014
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ResizeObserverService }, { type: i0.ComponentFactoryResolver }, { type: WindowRef }, { type: PlatformService }]; }, propDecorators: { _hasCollapsibleTitle: [{
|
|
1014
1015
|
type: HostBinding,
|
|
1015
1016
|
args: ['class.collapsible-title']
|
|
@@ -5400,14 +5401,17 @@ class DropdownComponent {
|
|
|
5400
5401
|
this.state = OpenState.closed;
|
|
5401
5402
|
this.elementRef.nativeElement.focus();
|
|
5402
5403
|
}
|
|
5404
|
+
_onEnterOrEscape() {
|
|
5405
|
+
this.close();
|
|
5406
|
+
this._onTouched();
|
|
5407
|
+
}
|
|
5408
|
+
_onPopoverClick(event) {
|
|
5409
|
+
this.close();
|
|
5410
|
+
}
|
|
5403
5411
|
_onBlur(event) {
|
|
5404
|
-
if (this.
|
|
5412
|
+
if (this.usePopover)
|
|
5405
5413
|
return;
|
|
5406
|
-
|
|
5407
|
-
if (!this.cardElement.nativeElement.contains(event === null || event === void 0 ? void 0 : event.relatedTarget)) {
|
|
5408
|
-
this.close();
|
|
5409
|
-
}
|
|
5410
|
-
}
|
|
5414
|
+
this.close();
|
|
5411
5415
|
this._onTouched();
|
|
5412
5416
|
}
|
|
5413
5417
|
_onSpace(event) {
|
|
@@ -5456,13 +5460,13 @@ class DropdownComponent {
|
|
|
5456
5460
|
}
|
|
5457
5461
|
DropdownComponent.OPEN_DELAY_IN_MS = 100;
|
|
5458
5462
|
/** @nocollapse */ DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5459
|
-
/** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "focus": "_onFocus()", "keydown.enter": "_onEnter($event)", "keydown.escape": "
|
|
5463
|
+
/** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "focus": "_onFocus()", "keydown.enter": "_onEnter($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "keydown.space": "_onSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp" } }, providers: [
|
|
5460
5464
|
{
|
|
5461
5465
|
provide: NG_VALUE_ACCESSOR,
|
|
5462
5466
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
5463
5467
|
multi: true,
|
|
5464
5468
|
},
|
|
5465
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover
|
|
5469
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}@media (hover: hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
5466
5470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5467
5471
|
type: Component,
|
|
5468
5472
|
args: [{ selector: 'kirby-dropdown', providers: [
|
|
@@ -5471,7 +5475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
5471
5475
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
5472
5476
|
multi: true,
|
|
5473
5477
|
},
|
|
5474
|
-
], template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover
|
|
5478
|
+
], template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}@media (hover: hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
|
|
5475
5479
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
|
|
5476
5480
|
type: Input
|
|
5477
5481
|
}], selectedIndex: [{
|
|
@@ -5561,13 +5565,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
5561
5565
|
}], _onFocus: [{
|
|
5562
5566
|
type: HostListener,
|
|
5563
5567
|
args: ['focus']
|
|
5564
|
-
}],
|
|
5568
|
+
}], _onEnterOrEscape: [{
|
|
5565
5569
|
type: HostListener,
|
|
5566
5570
|
args: ['keydown.enter']
|
|
5567
5571
|
}, {
|
|
5568
5572
|
type: HostListener,
|
|
5569
5573
|
args: ['keydown.escape']
|
|
5570
|
-
}, {
|
|
5574
|
+
}], _onBlur: [{
|
|
5571
5575
|
type: HostListener,
|
|
5572
5576
|
args: ['blur', ['$event']]
|
|
5573
5577
|
}], _onSpace: [{
|
|
@@ -6504,10 +6508,10 @@ InputComponent.typeToInputmodeMap = {
|
|
|
6504
6508
|
search: 'search',
|
|
6505
6509
|
};
|
|
6506
6510
|
/** @nocollapse */ InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6507
|
-
/** @nocollapse */ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InputComponent, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6511
|
+
/** @nocollapse */ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InputComponent, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6508
6512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InputComponent, decorators: [{
|
|
6509
6513
|
type: Component,
|
|
6510
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
|
|
6514
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
|
|
6511
6515
|
}], propDecorators: { type: [{
|
|
6512
6516
|
type: Input
|
|
6513
6517
|
}], size: [{
|
|
@@ -6581,10 +6585,10 @@ class TextareaComponent {
|
|
|
6581
6585
|
}
|
|
6582
6586
|
}
|
|
6583
6587
|
/** @nocollapse */ TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6584
|
-
/** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6588
|
+
/** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6585
6589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
6586
6590
|
type: Component,
|
|
6587
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
|
|
6591
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
|
|
6588
6592
|
}], propDecorators: { value: [{
|
|
6589
6593
|
type: Input
|
|
6590
6594
|
}], borderless: [{
|
|
@@ -6996,10 +7000,10 @@ class FlagComponent {
|
|
|
6996
7000
|
}
|
|
6997
7001
|
}
|
|
6998
7002
|
/** @nocollapse */ FlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6999
|
-
/** @nocollapse */ FlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FlagComponent, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500}:host.sm{font-size:14px}:host.xs{font-size:12px;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color:
|
|
7003
|
+
/** @nocollapse */ FlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FlagComponent, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7000
7004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FlagComponent, decorators: [{
|
|
7001
7005
|
type: Component,
|
|
7002
|
-
args: [{ selector: 'kirby-flag', template: ` <ng-content></ng-content> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500}:host.sm{font-size:14px}:host.xs{font-size:12px;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color:
|
|
7006
|
+
args: [{ selector: 'kirby-flag', template: ` <ng-content></ng-content> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"] }]
|
|
7003
7007
|
}], propDecorators: { size: [{
|
|
7004
7008
|
type: Input
|
|
7005
7009
|
}], themeColor: [{
|
|
@@ -8202,6 +8206,7 @@ class PageComponent {
|
|
|
8202
8206
|
this.enter = new EventEmitter();
|
|
8203
8207
|
this.leave = new EventEmitter();
|
|
8204
8208
|
this.refresh = new EventEmitter();
|
|
8209
|
+
this.backButtonClick = new EventEmitter();
|
|
8205
8210
|
this.pageTitleIntersectionObserverRef = this.pageTitleIntersectionObserver();
|
|
8206
8211
|
this.urls = [];
|
|
8207
8212
|
this.ngOnDestroy$ = new Subject();
|
|
@@ -8246,6 +8251,7 @@ class PageComponent {
|
|
|
8246
8251
|
this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
|
|
8247
8252
|
this.content.scrollToTop(KirbyAnimation.Duration.LONG);
|
|
8248
8253
|
});
|
|
8254
|
+
this.interceptBackButtonClicksSetup();
|
|
8249
8255
|
}
|
|
8250
8256
|
ngAfterContentChecked() {
|
|
8251
8257
|
if (!this.urls.includes(this.router.url)) {
|
|
@@ -8289,6 +8295,17 @@ class PageComponent {
|
|
|
8289
8295
|
this.tabsComponent.tabBarBottomHidden = false;
|
|
8290
8296
|
}
|
|
8291
8297
|
}
|
|
8298
|
+
interceptBackButtonClicksSetup() {
|
|
8299
|
+
// Intercept back-button click events, defaulting to the built-in click-handler.
|
|
8300
|
+
if (this.backButtonClick.observers.length === 0) {
|
|
8301
|
+
this.backButtonClick
|
|
8302
|
+
.pipe(takeUntil(this.ngOnDestroy$))
|
|
8303
|
+
.subscribe(this.backButtonDelegate.onClick.bind(this.backButtonDelegate));
|
|
8304
|
+
}
|
|
8305
|
+
this.backButtonDelegate.onClick = (event) => {
|
|
8306
|
+
this.backButtonClick.emit(event);
|
|
8307
|
+
};
|
|
8308
|
+
}
|
|
8292
8309
|
initializeTitle() {
|
|
8293
8310
|
// Ensures initializeTitle() won't run, if already initialized
|
|
8294
8311
|
if (this.hasPageTitle)
|
|
@@ -8369,7 +8386,7 @@ class PageComponent {
|
|
|
8369
8386
|
}
|
|
8370
8387
|
}
|
|
8371
8388
|
/** @nocollapse */ PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: WindowRef }, { token: ModalNavigationService }, { token: TabsComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
8372
|
-
/** @nocollapse */ PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()" } }, queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <div class=\"content-inner\">\n <div\n class=\"page-header\"\n *ngIf=\"hasPageTitle\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n\n <!-- Content -->\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonFooter, selector: "ion-footer", inputs: ["mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8389
|
+
/** @nocollapse */ PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()" } }, queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "backButtonDelegate", first: true, predicate: IonBackButtonDelegate, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <div class=\"content-inner\">\n <div\n class=\"page-header\"\n *ngIf=\"hasPageTitle\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n\n <!-- Content -->\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonFooter, selector: "ion-footer", inputs: ["mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8373
8390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, decorators: [{
|
|
8374
8391
|
type: Component,
|
|
8375
8392
|
args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <div class=\"content-inner\">\n <div\n class=\"page-header\"\n *ngIf=\"hasPageTitle\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n\n <!-- Content -->\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"] }]
|
|
@@ -8401,6 +8418,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
8401
8418
|
type: Output
|
|
8402
8419
|
}], refresh: [{
|
|
8403
8420
|
type: Output
|
|
8421
|
+
}], backButtonClick: [{
|
|
8422
|
+
type: Output
|
|
8404
8423
|
}], content: [{
|
|
8405
8424
|
type: ViewChild,
|
|
8406
8425
|
args: [IonContent, { static: true }]
|
|
@@ -8413,6 +8432,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
8413
8432
|
}], ionFooterElement: [{
|
|
8414
8433
|
type: ViewChild,
|
|
8415
8434
|
args: [IonFooter, { static: true, read: ElementRef }]
|
|
8435
|
+
}], backButtonDelegate: [{
|
|
8436
|
+
type: ViewChild,
|
|
8437
|
+
args: [IonBackButtonDelegate, { static: false }]
|
|
8416
8438
|
}], pageTitle: [{
|
|
8417
8439
|
type: ViewChild,
|
|
8418
8440
|
args: ['pageTitle', { static: false, read: ElementRef }]
|
|
@@ -8917,10 +8939,10 @@ class SlideButtonComponent {
|
|
|
8917
8939
|
}
|
|
8918
8940
|
}
|
|
8919
8941
|
/** @nocollapse */ SlideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8920
|
-
/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8942
|
+
/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8921
8943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, decorators: [{
|
|
8922
8944
|
type: Component,
|
|
8923
|
-
args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
|
|
8945
|
+
args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
|
|
8924
8946
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
|
|
8925
8947
|
type: Input
|
|
8926
8948
|
}], expand: [{
|