@kirbydesign/designsystem 6.0.0-rc.7 → 6.0.1-annotations-fix
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/button/button.component.mjs +2 -2
- package/esm2020/lib/components/chart/chart-js/configured-chart-js.mjs +2 -2
- 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/fab-sheet/fab-sheet.component.mjs +3 -30
- 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 +6 -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/helpers/deep-copy.mjs +51 -11
- package/esm2020/lib/kirby.module.mjs +3 -3
- package/esm2020/testing-base/lib/components/mock.page.component.mjs +5 -2
- package/esm2020/testing-base/lib/components/mock.segmented-control.component.mjs +4 -2
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs +7 -2
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem.mjs +102 -62
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs +7 -2
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem.mjs +102 -62
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/accident.svg +5 -0
- package/icons/svg/arrow-back.svg +5 -7
- package/icons/svg/arrow-down.svg +5 -7
- package/icons/svg/arrow-more.svg +5 -7
- package/icons/svg/arrow-up.svg +5 -7
- package/icons/svg/health.svg +5 -0
- package/icons/svg/illness.svg +5 -0
- package/icons/svg/incapacity.svg +5 -0
- package/icons/svg/life.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/fab-sheet/fab-sheet.component.d.ts +2 -4
- package/lib/components/page/page.component.d.ts +4 -1
- package/lib/helpers/deep-copy.d.ts +1 -9
- package/package.json +2 -3
- package/readme.md +5 -37
- package/testing-base/lib/components/mock.page.component.d.ts +2 -1
- package/testing-base/lib/components/mock.segmented-control.component.d.ts +2 -1
|
@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, ElementRef, ContentChild, EventEmitter, Output, ContentChildren, ViewChild, InjectionToken, Injector, HostListener, RendererStyleFlags2, ViewChildren, 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 i1$1 from '@angular/router';
|
|
10
10
|
import { NavigationEnd, RouterOutlet, ROUTES, NavigationStart, RouterModule } from '@angular/router';
|
|
@@ -18,7 +18,6 @@ import more from 'highcharts/highcharts-more';
|
|
|
18
18
|
import brokenAxis from 'highcharts/modules/broken-axis';
|
|
19
19
|
import solidGauge from 'highcharts/modules/solid-gauge';
|
|
20
20
|
import { toDate, isBefore, isAfter, format, isSameMonth, startOfMonth, startOfDay, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfMonth, differenceInDays, add, isWeekend, getYear } from 'date-fns';
|
|
21
|
-
import _deepCopy from 'ts-deepcopy';
|
|
22
21
|
import { CategoryScale, LinearScale, TimeScale, BarElement, LineElement, PointElement, BarController, LineController, Filler, Tooltip, Chart, Legend } from 'chart.js';
|
|
23
22
|
export { Chart } from 'chart.js';
|
|
24
23
|
import 'chartjs-adapter-date-fns';
|
|
@@ -158,6 +157,11 @@ const kirbyIconSettings = {
|
|
|
158
157
|
{ name: 'warning', svg: 'assets/kirby/icons/svg/warning.svg' },
|
|
159
158
|
{ name: 'write-message', svg: 'assets/kirby/icons/svg/write-message.svg' },
|
|
160
159
|
{ name: 'reorder', svg: 'assets/kirby/icons/svg/reorder.svg' },
|
|
160
|
+
{ name: 'accident', svg: 'assets/kirby/icons/svg/accident.svg' },
|
|
161
|
+
{ name: 'health', svg: 'assets/kirby/icons/svg/health.svg' },
|
|
162
|
+
{ name: 'illness', svg: 'assets/kirby/icons/svg/illness.svg' },
|
|
163
|
+
{ name: 'incapacity', svg: 'assets/kirby/icons/svg/incapacity.svg' },
|
|
164
|
+
{ name: 'life', svg: 'assets/kirby/icons/svg/life.svg' },
|
|
161
165
|
],
|
|
162
166
|
};
|
|
163
167
|
const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
|
|
@@ -496,10 +500,10 @@ class ButtonComponent {
|
|
|
496
500
|
}
|
|
497
501
|
}
|
|
498
502
|
/** @nocollapse */ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
499
|
-
/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", isDestructive: "isDestructive", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.attention-level4": "this.isAttentionLevel4", "class.destructive": "this.destructive", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "icon", first: true, predicate: IconComponent, descendants: true }, { propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;transition:opacity .2s linear;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0 24px;margin:4px;line-height:20px;outline:none;border:1px solid var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.icon-left{padding-left:12px;padding-right:16px;--kirby-icon-margin-right: 8px}:host.icon-right{padding-left:16px;padding-right:12px;--kirby-icon-margin-left: 8px}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){padding-left:16px;padding-right:16px}:host.sm.icon-only{width:32px;min-width:unset}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host.attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}@media (hover: hover){:host:focus{--kirby-button-border-color: #4d90fe}}@media (hover: hover){:host:hover{opacity:.8}}:host:active{opacity:.8}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.default).attention-level2,:host :host-context(.kirby-color-brightness-white).attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level4{--kirby-button-color: var(--kirby-white)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3,:host-context(ion-toolbar kirby-page-actions).attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3,:host-context(.page-title kirby-page-actions).attention-level4{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive,:host-context(.page-title kirby-page-actions).attention-level4.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
503
|
+
/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", isDestructive: "isDestructive", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.attention-level4": "this.isAttentionLevel4", "class.destructive": "this.destructive", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "icon", first: true, predicate: IconComponent, descendants: true }, { propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;transition:opacity .2s linear;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0 24px;margin:4px;line-height:20px;outline:none;border:1px solid var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.icon-left{padding-left:12px;padding-right:16px;--kirby-icon-margin-right: 8px}:host.icon-right{padding-left:16px;padding-right:12px;--kirby-icon-margin-left: 8px}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){padding-left:16px;padding-right:16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host.attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}@media (hover: hover){:host:focus{--kirby-button-border-color: #4d90fe}}@media (hover: hover){:host:hover{opacity:.8}}:host:active{opacity:.8}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.default).attention-level2,:host :host-context(.kirby-color-brightness-white).attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level4{--kirby-button-color: var(--kirby-white)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3,:host-context(ion-toolbar kirby-page-actions).attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3,:host-context(.page-title kirby-page-actions).attention-level4{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive,:host-context(.page-title kirby-page-actions).attention-level4.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
500
504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
501
505
|
type: Component,
|
|
502
|
-
args: [{ selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;transition:opacity .2s linear;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0 24px;margin:4px;line-height:20px;outline:none;border:1px solid var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.icon-left{padding-left:12px;padding-right:16px;--kirby-icon-margin-right: 8px}:host.icon-right{padding-left:16px;padding-right:12px;--kirby-icon-margin-left: 8px}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){padding-left:16px;padding-right:16px}:host.sm.icon-only{width:32px;min-width:unset}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host.attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}@media (hover: hover){:host:focus{--kirby-button-border-color: #4d90fe}}@media (hover: hover){:host:hover{opacity:.8}}:host:active{opacity:.8}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.default).attention-level2,:host :host-context(.kirby-color-brightness-white).attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level4{--kirby-button-color: var(--kirby-white)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3,:host-context(ion-toolbar kirby-page-actions).attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3,:host-context(.page-title kirby-page-actions).attention-level4{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive,:host-context(.page-title kirby-page-actions).attention-level4.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}\n"] }]
|
|
506
|
+
args: [{ selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;transition:opacity .2s linear;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0 24px;margin:4px;line-height:20px;outline:none;border:1px solid var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.icon-left{padding-left:12px;padding-right:16px;--kirby-icon-margin-right: 8px}:host.icon-right{padding-left:16px;padding-right:12px;--kirby-icon-margin-left: 8px}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){padding-left:16px;padding-right:16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host.attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}@media (hover: hover){:host:focus{--kirby-button-border-color: #4d90fe}}@media (hover: hover){:host:hover{opacity:.8}}:host:active{opacity:.8}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.default).attention-level2,:host :host-context(.kirby-color-brightness-white).attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level4{--kirby-button-color: var(--kirby-white)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3,:host-context(ion-toolbar kirby-page-actions).attention-level4{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level4.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3,:host-context(.page-title kirby-page-actions).attention-level4{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive,:host-context(.page-title kirby-page-actions).attention-level4.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}\n"] }]
|
|
503
507
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isAttentionLevel1: [{
|
|
504
508
|
type: HostBinding,
|
|
505
509
|
args: ['class.attention-level1']
|
|
@@ -1680,10 +1684,10 @@ class ModalWrapperComponent {
|
|
|
1680
1684
|
}
|
|
1681
1685
|
ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS = 100;
|
|
1682
1686
|
/** @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 });
|
|
1683
|
-
/** @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=\"
|
|
1687
|
+
/** @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: 16px;--padding-top: 16px;--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"] }] });
|
|
1684
1688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, decorators: [{
|
|
1685
1689
|
type: Component,
|
|
1686
|
-
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=\"
|
|
1690
|
+
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: 16px;--padding-top: 16px;--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"] }]
|
|
1687
1691
|
}], 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: [{
|
|
1688
1692
|
type: HostBinding,
|
|
1689
1693
|
args: ['class.collapsible-title']
|
|
@@ -3316,16 +3320,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
3316
3320
|
type: Input
|
|
3317
3321
|
}] } });
|
|
3318
3322
|
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3323
|
+
/*
|
|
3324
|
+
Copied from https://github.com/ykdr8/ts-deepcopy.
|
|
3325
|
+
|
|
3326
|
+
MIT License
|
|
3327
|
+
|
|
3328
|
+
Copyright (c) 2017 ykdr2017
|
|
3329
|
+
|
|
3330
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3331
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
3332
|
+
in the Software without restriction, including without limitation the rights
|
|
3333
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
3334
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
3335
|
+
furnished to do so, subject to the following conditions:
|
|
3336
|
+
|
|
3337
|
+
The above copyright notice and this permission notice shall be included in all
|
|
3338
|
+
copies or substantial portions of the Software.
|
|
3339
|
+
|
|
3340
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
3341
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
3342
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
3343
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
3344
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
3345
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
3346
|
+
SOFTWARE.
|
|
3326
3347
|
*/
|
|
3327
|
-
function deepCopy(
|
|
3328
|
-
|
|
3348
|
+
function deepCopy(tgt) {
|
|
3349
|
+
let cp;
|
|
3350
|
+
let ptn = 0;
|
|
3351
|
+
if (tgt === null) {
|
|
3352
|
+
cp = tgt;
|
|
3353
|
+
}
|
|
3354
|
+
else if (tgt instanceof Date) {
|
|
3355
|
+
cp = new Date(tgt.getTime());
|
|
3356
|
+
}
|
|
3357
|
+
else if (Array.isArray(tgt)) {
|
|
3358
|
+
cp = [];
|
|
3359
|
+
tgt.forEach((v, i, arr) => {
|
|
3360
|
+
cp.push(v);
|
|
3361
|
+
});
|
|
3362
|
+
cp = cp.map((n) => deepCopy(n));
|
|
3363
|
+
}
|
|
3364
|
+
else if (typeof tgt === 'object' && tgt !== {}) {
|
|
3365
|
+
cp = { ...tgt };
|
|
3366
|
+
Object.keys(cp).forEach((k) => {
|
|
3367
|
+
cp[k] = deepCopy(cp[k]);
|
|
3368
|
+
});
|
|
3369
|
+
}
|
|
3370
|
+
else {
|
|
3371
|
+
cp = tgt;
|
|
3372
|
+
}
|
|
3373
|
+
return cp;
|
|
3329
3374
|
}
|
|
3330
3375
|
|
|
3331
3376
|
/*
|
|
@@ -3894,7 +3939,7 @@ const CHART_GLOBAL_DEFAULTS = {
|
|
|
3894
3939
|
const CHART_SCALES = [CategoryScale, LinearScale, TimeScale];
|
|
3895
3940
|
const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
|
|
3896
3941
|
const CHART_CONTROLLERS = [BarController, LineController];
|
|
3897
|
-
const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin];
|
|
3942
|
+
const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin].map((plugin) => (plugin?.__esModule ? plugin.default : plugin));
|
|
3898
3943
|
/* Order matters; defaults must be merged after register as
|
|
3899
3944
|
register modifies the Chart.defaults objects */
|
|
3900
3945
|
Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
|
|
@@ -5321,14 +5366,17 @@ class DropdownComponent {
|
|
|
5321
5366
|
this.state = OpenState.closed;
|
|
5322
5367
|
this.elementRef.nativeElement.focus();
|
|
5323
5368
|
}
|
|
5369
|
+
_onEnterOrEscape() {
|
|
5370
|
+
this.close();
|
|
5371
|
+
this._onTouched();
|
|
5372
|
+
}
|
|
5373
|
+
_onPopoverClick(event) {
|
|
5374
|
+
this.close();
|
|
5375
|
+
}
|
|
5324
5376
|
_onBlur(event) {
|
|
5325
|
-
if (this.
|
|
5377
|
+
if (this.usePopover)
|
|
5326
5378
|
return;
|
|
5327
|
-
|
|
5328
|
-
if (!this.cardElement.nativeElement.contains(event?.relatedTarget)) {
|
|
5329
|
-
this.close();
|
|
5330
|
-
}
|
|
5331
|
-
}
|
|
5379
|
+
this.close();
|
|
5332
5380
|
this._onTouched();
|
|
5333
5381
|
}
|
|
5334
5382
|
_onSpace(event) {
|
|
@@ -5377,13 +5425,13 @@ class DropdownComponent {
|
|
|
5377
5425
|
}
|
|
5378
5426
|
DropdownComponent.OPEN_DELAY_IN_MS = 100;
|
|
5379
5427
|
/** @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 });
|
|
5380
|
-
/** @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": "
|
|
5428
|
+
/** @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: [
|
|
5381
5429
|
{
|
|
5382
5430
|
provide: NG_VALUE_ACCESSOR,
|
|
5383
5431
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
5384
5432
|
multi: true,
|
|
5385
5433
|
},
|
|
5386
|
-
], 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
|
|
5434
|
+
], 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"] }] });
|
|
5387
5435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5388
5436
|
type: Component,
|
|
5389
5437
|
args: [{ selector: 'kirby-dropdown', providers: [
|
|
@@ -5392,7 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
5392
5440
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
5393
5441
|
multi: true,
|
|
5394
5442
|
},
|
|
5395
|
-
], 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
|
|
5443
|
+
], 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"] }]
|
|
5396
5444
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
|
|
5397
5445
|
type: Input
|
|
5398
5446
|
}], selectedIndex: [{
|
|
@@ -5482,13 +5530,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
5482
5530
|
}], _onFocus: [{
|
|
5483
5531
|
type: HostListener,
|
|
5484
5532
|
args: ['focus']
|
|
5485
|
-
}],
|
|
5533
|
+
}], _onEnterOrEscape: [{
|
|
5486
5534
|
type: HostListener,
|
|
5487
5535
|
args: ['keydown.enter']
|
|
5488
5536
|
}, {
|
|
5489
5537
|
type: HostListener,
|
|
5490
5538
|
args: ['keydown.escape']
|
|
5491
|
-
}, {
|
|
5539
|
+
}], _onBlur: [{
|
|
5492
5540
|
type: HostListener,
|
|
5493
5541
|
args: ['blur', ['$event']]
|
|
5494
5542
|
}], _onSpace: [{
|
|
@@ -6422,10 +6470,10 @@ InputComponent.typeToInputmodeMap = {
|
|
|
6422
6470
|
search: 'search',
|
|
6423
6471
|
};
|
|
6424
6472
|
/** @nocollapse */ InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6425
|
-
/** @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)}: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:
|
|
6473
|
+
/** @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 });
|
|
6426
6474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InputComponent, decorators: [{
|
|
6427
6475
|
type: Component,
|
|
6428
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger)}: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:
|
|
6476
|
+
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"] }]
|
|
6429
6477
|
}], propDecorators: { type: [{
|
|
6430
6478
|
type: Input
|
|
6431
6479
|
}], size: [{
|
|
@@ -6499,10 +6547,10 @@ class TextareaComponent {
|
|
|
6499
6547
|
}
|
|
6500
6548
|
}
|
|
6501
6549
|
/** @nocollapse */ TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6502
|
-
/** @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)}: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:
|
|
6550
|
+
/** @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 });
|
|
6503
6551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
6504
6552
|
type: Component,
|
|
6505
|
-
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)}: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:
|
|
6553
|
+
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"] }]
|
|
6506
6554
|
}], propDecorators: { value: [{
|
|
6507
6555
|
type: Input
|
|
6508
6556
|
}], borderless: [{
|
|
@@ -6850,32 +6898,6 @@ class FabSheetComponent {
|
|
|
6850
6898
|
get isBackdropVisible() {
|
|
6851
6899
|
return this._isBackdropVisible;
|
|
6852
6900
|
}
|
|
6853
|
-
ngAfterViewInit() {
|
|
6854
|
-
const kirbyCloseIcon = kirbyIconSettings.icons.find((icon) => icon.name === 'close');
|
|
6855
|
-
this.setCloseIcon(kirbyCloseIcon);
|
|
6856
|
-
}
|
|
6857
|
-
setCloseIcon(kirbyCloseIcon, retryCount = 0) {
|
|
6858
|
-
const maxRetryCount = 20;
|
|
6859
|
-
const retryDelayInMs = 20;
|
|
6860
|
-
const fabButtonElement = this.ionFabButton.nativeElement;
|
|
6861
|
-
if (!fabButtonElement || !kirbyCloseIcon || retryCount >= maxRetryCount) {
|
|
6862
|
-
return;
|
|
6863
|
-
}
|
|
6864
|
-
if (fabButtonElement.shadowRoot && fabButtonElement.shadowRoot.innerHTML) {
|
|
6865
|
-
const closeIcon = fabButtonElement.shadowRoot.querySelector('.close-icon ion-icon');
|
|
6866
|
-
if (closeIcon) {
|
|
6867
|
-
const closeIconSvgLoaded = closeIcon.shadowRoot.querySelector('.icon-inner svg');
|
|
6868
|
-
// prettier-ignore
|
|
6869
|
-
const ionCloseIcon = closeIcon;
|
|
6870
|
-
if (ionCloseIcon && closeIconSvgLoaded) {
|
|
6871
|
-
ionCloseIcon.src = kirbyCloseIcon.svg;
|
|
6872
|
-
return;
|
|
6873
|
-
}
|
|
6874
|
-
}
|
|
6875
|
-
}
|
|
6876
|
-
retryCount++;
|
|
6877
|
-
setTimeout(() => this.setCloseIcon(kirbyCloseIcon, retryCount), retryDelayInMs);
|
|
6878
|
-
}
|
|
6879
6901
|
ngAfterContentInit() {
|
|
6880
6902
|
if (this.actionSheet) {
|
|
6881
6903
|
this.actionSheet.hideCancel = true;
|
|
@@ -6899,10 +6921,10 @@ class FabSheetComponent {
|
|
|
6899
6921
|
}
|
|
6900
6922
|
}
|
|
6901
6923
|
/** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
6902
|
-
/** @nocollapse */ FabSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen", "class.backdrop-visible": "this.isBackdropVisible" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-backdrop\n *ngIf=\"actionSheet && isFabSheetOpen\"\n (ionBackdropTap)=\"hideActions(fab)\"\n (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n <ion-fab-button
|
|
6924
|
+
/** @nocollapse */ FabSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen", "class.backdrop-visible": "this.isBackdropVisible" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-backdrop\n *ngIf=\"actionSheet && isFabSheetOpen\"\n (ionBackdropTap)=\"hideActions(fab)\"\n (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n <ion-fab-button\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n closeIcon=\"close-outline\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list *ngIf=\"actionSheet\" side=\"top\" class=\"{{ horizontalAlignment }}\">\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none;outline:none}@media (hover: hover){ion-fab-button:focus{--border-width: 1px;--border-style: solid;--border-color: #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{opacity:0;transition:opacity .75s;position:fixed;z-index:999}:host(.backdrop-visible) ion-backdrop{opacity:.4}@media (min-width: 721px){:host(.backdrop-visible) ion-backdrop{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6903
6925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, decorators: [{
|
|
6904
6926
|
type: Component,
|
|
6905
|
-
args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n *ngIf=\"actionSheet && isFabSheetOpen\"\n (ionBackdropTap)=\"hideActions(fab)\"\n (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n <ion-fab-button
|
|
6927
|
+
args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n *ngIf=\"actionSheet && isFabSheetOpen\"\n (ionBackdropTap)=\"hideActions(fab)\"\n (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n <ion-fab-button\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n closeIcon=\"close-outline\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list *ngIf=\"actionSheet\" side=\"top\" class=\"{{ horizontalAlignment }}\">\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none;outline:none}@media (hover: hover){ion-fab-button:focus{--border-width: 1px;--border-style: solid;--border-color: #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{opacity:0;transition:opacity .75s;position:fixed;z-index:999}:host(.backdrop-visible) ion-backdrop{opacity:.4}@media (min-width: 721px){:host(.backdrop-visible) ion-backdrop{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
|
|
6906
6928
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
6907
6929
|
type: Inject,
|
|
6908
6930
|
args: [DOCUMENT]
|
|
@@ -8133,6 +8155,7 @@ class PageComponent {
|
|
|
8133
8155
|
this.enter = new EventEmitter();
|
|
8134
8156
|
this.leave = new EventEmitter();
|
|
8135
8157
|
this.refresh = new EventEmitter();
|
|
8158
|
+
this.backButtonClick = new EventEmitter();
|
|
8136
8159
|
this.pageTitleIntersectionObserverRef = this.pageTitleIntersectionObserver();
|
|
8137
8160
|
this.urls = [];
|
|
8138
8161
|
this.ngOnDestroy$ = new Subject();
|
|
@@ -8180,6 +8203,7 @@ class PageComponent {
|
|
|
8180
8203
|
this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
|
|
8181
8204
|
this.content.scrollToTop(KirbyAnimation.Duration.LONG);
|
|
8182
8205
|
});
|
|
8206
|
+
this.interceptBackButtonClicksSetup();
|
|
8183
8207
|
}
|
|
8184
8208
|
ngAfterContentChecked() {
|
|
8185
8209
|
if (!this.urls.includes(this.router.url)) {
|
|
@@ -8223,6 +8247,17 @@ class PageComponent {
|
|
|
8223
8247
|
this.tabsComponent.tabBarBottomHidden = false;
|
|
8224
8248
|
}
|
|
8225
8249
|
}
|
|
8250
|
+
interceptBackButtonClicksSetup() {
|
|
8251
|
+
// Intercept back-button click events, defaulting to the built-in click-handler.
|
|
8252
|
+
if (this.backButtonClick.observers.length === 0) {
|
|
8253
|
+
this.backButtonClick
|
|
8254
|
+
.pipe(takeUntil(this.ngOnDestroy$))
|
|
8255
|
+
.subscribe(this.backButtonDelegate.onClick.bind(this.backButtonDelegate));
|
|
8256
|
+
}
|
|
8257
|
+
this.backButtonDelegate.onClick = (event) => {
|
|
8258
|
+
this.backButtonClick.emit(event);
|
|
8259
|
+
};
|
|
8260
|
+
}
|
|
8226
8261
|
initializeTitle() {
|
|
8227
8262
|
// Ensures initializeTitle() won't run, if already initialized
|
|
8228
8263
|
if (this.hasPageTitle)
|
|
@@ -8303,7 +8338,7 @@ class PageComponent {
|
|
|
8303
8338
|
}
|
|
8304
8339
|
}
|
|
8305
8340
|
/** @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 });
|
|
8306
|
-
/** @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 });
|
|
8341
|
+
/** @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 });
|
|
8307
8342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, decorators: [{
|
|
8308
8343
|
type: Component,
|
|
8309
8344
|
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"] }]
|
|
@@ -8333,6 +8368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
8333
8368
|
type: Output
|
|
8334
8369
|
}], refresh: [{
|
|
8335
8370
|
type: Output
|
|
8371
|
+
}], backButtonClick: [{
|
|
8372
|
+
type: Output
|
|
8336
8373
|
}], content: [{
|
|
8337
8374
|
type: ViewChild,
|
|
8338
8375
|
args: [IonContent, { static: true }]
|
|
@@ -8345,6 +8382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
8345
8382
|
}], ionFooterElement: [{
|
|
8346
8383
|
type: ViewChild,
|
|
8347
8384
|
args: [IonFooter, { static: true, read: ElementRef }]
|
|
8385
|
+
}], backButtonDelegate: [{
|
|
8386
|
+
type: ViewChild,
|
|
8387
|
+
args: [IonBackButtonDelegate, { static: false }]
|
|
8348
8388
|
}], pageTitle: [{
|
|
8349
8389
|
type: ViewChild,
|
|
8350
8390
|
args: ['pageTitle', { static: false, read: ElementRef }]
|
|
@@ -9406,7 +9446,7 @@ const exportedModules = [
|
|
|
9406
9446
|
ChartModule,
|
|
9407
9447
|
SpinnerModule,
|
|
9408
9448
|
];
|
|
9409
|
-
const
|
|
9449
|
+
const allExports = [...exportedModules, ...exportedDeclarations];
|
|
9410
9450
|
const importedModules = [...exportedModules];
|
|
9411
9451
|
const providers = [
|
|
9412
9452
|
ModalController,
|
|
@@ -9597,7 +9637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
9597
9637
|
],
|
|
9598
9638
|
declarations: declarations,
|
|
9599
9639
|
providers: providers,
|
|
9600
|
-
exports:
|
|
9640
|
+
exports: allExports,
|
|
9601
9641
|
}]
|
|
9602
9642
|
}], ctorParameters: function () { return [{ type: ModalController }, { type: undefined, decorators: [{
|
|
9603
9643
|
type: Optional
|