@kirbydesign/designsystem 7.2.1 → 7.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/esm2020/lib/components/avatar/avatar.component.mjs +12 -3
- package/esm2020/lib/components/button/button.component.mjs +2 -2
- package/esm2020/lib/components/charts/chart-config/chart-bar-config/chart-bar-config.mjs +43 -0
- package/esm2020/lib/components/charts/chart-config/chart-base-config.mjs +4 -0
- package/esm2020/lib/components/charts/chart-config/chart-stock-config/chart-stock-config.mjs +155 -0
- package/esm2020/lib/components/charts/chart-config/chart-stock-config/data-label-position/data-label-position.mjs +49 -0
- package/esm2020/lib/components/charts/chart-config/chart-stock-config/vertical-line-plugin/vertical-line-plugin.mjs +37 -0
- package/esm2020/lib/components/charts/chart-config/chart-stock-config/vertical-line-plugin/vertical-line-plugin.model.mjs +2 -0
- package/esm2020/lib/components/charts/chart-config/index.mjs +3 -0
- package/esm2020/lib/components/charts/shared/base-chart/base-chart.component.mjs +4 -1
- package/esm2020/lib/components/charts/shared/chart-config-service/configs/type.config.mjs +4 -1
- package/esm2020/lib/components/charts/shared/chart-js-service/chart-js.service.mjs +4 -1
- package/esm2020/lib/components/dropdown/dropdown.component.mjs +2 -2
- package/esm2020/lib/components/fab-sheet/fab-sheet.component.mjs +7 -10
- package/esm2020/lib/components/grid/grid.component.mjs +3 -1
- package/esm2020/lib/components/icon/kirby-icon-settings.mjs +3 -1
- package/esm2020/lib/components/item/item.component.mjs +2 -2
- package/esm2020/lib/components/list/list-item/list-item.component.mjs +2 -2
- package/esm2020/lib/components/list/list.component.mjs +12 -7
- package/esm2020/lib/components/modal/services/modal.helper.mjs +12 -1
- package/esm2020/lib/components/page/page.component.mjs +47 -28
- package/esm2020/lib/components/slide-button/slide-button.component.mjs +2 -2
- package/esm2020/lib/components/tabs/tabs.component.mjs +4 -1
- package/esm2020/lib/components/tabs/tabs.service.mjs +5 -2
- package/esm2020/lib/index.mjs +3 -1
- package/esm2020/lib/kirby-experimental.module.mjs +2 -1
- package/esm2020/testing-base/lib/components/mock.avatar.component.mjs +4 -2
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs +3 -1
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem.mjs +420 -82
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs +3 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem.mjs +419 -81
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/add-bank.svg +2 -0
- package/icons/svg/user-blocked.svg +5 -0
- package/lib/components/avatar/avatar.component.d.ts +5 -2
- package/lib/components/charts/chart-config/chart-bar-config/chart-bar-config.d.ts +9 -0
- package/lib/components/charts/chart-config/chart-base-config.d.ts +6 -0
- package/lib/components/charts/chart-config/chart-stock-config/chart-stock-config.d.ts +20 -0
- package/lib/components/charts/chart-config/chart-stock-config/data-label-position/data-label-position.d.ts +4 -0
- package/lib/components/charts/chart-config/chart-stock-config/vertical-line-plugin/vertical-line-plugin.d.ts +2 -0
- package/lib/components/charts/chart-config/chart-stock-config/vertical-line-plugin/vertical-line-plugin.model.d.ts +12 -0
- package/lib/components/charts/chart-config/index.d.ts +2 -0
- package/lib/components/charts/shared/base-chart/base-chart.component.d.ts +1 -0
- package/lib/components/charts/shared/chart-js-service/chart-js.service.d.ts +1 -0
- package/lib/components/fab-sheet/fab-sheet.component.d.ts +1 -3
- package/lib/components/list/list.component.d.ts +1 -1
- package/lib/components/modal/services/modal.helper.d.ts +1 -0
- package/lib/components/page/page.component.d.ts +11 -11
- package/lib/components/tabs/tabs.component.d.ts +3 -2
- package/lib/components/tabs/tabs.service.d.ts +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/kirby-experimental.module.d.ts +1 -0
- package/package.json +2 -3
- package/polyfills/intersection-observer-polyfill-loader.js +1 -14
- package/polyfills/resize-observer-polyfill-loader.js +1 -14
- package/scss/_global-styles.scss +1 -1
- package/scss/_utils.scss +1 -1
- package/scss/base/_functions.scss +1 -1
- package/scss/base/_html-list.scss +1 -1
- package/scss/base/_include-media.scss +1 -0
- package/scss/base/_ionic.scss +1 -1
- package/scss/base/_line-clamp.scss +1 -1
- package/scss/base/_link.scss +1 -1
- package/scss/base/_list.scss +1 -1
- package/scss/base/_typography.scss +1 -1
- package/scss/base/_variables.scss +1 -1
- package/scss/components/_grid.scss +1 -0
- package/scss/interaction-state/_active.scss +1 -1
- package/scss/interaction-state/_focus.scss +1 -1
- package/scss/interaction-state/_hover.scss +1 -1
- package/scss/interaction-state/_index.scss +1 -1
- package/scss/interaction-state/_interaction-state.utilities.scss +1 -1
- package/scss/interaction-state/_layer.scss +1 -1
- package/scss/opt-out/_index.scss +1 -1
- package/scss/opt-out/_link.scss +1 -1
- package/scss/print/_index.scss +1 -1
- package/scss/print/components/_index.scss +1 -1
- package/scss/print/components/_kirby-app.scss +1 -1
- package/scss/print/components/_kirby-fab-sheet.scss +1 -1
- package/scss/print/components/_kirby-list.scss +1 -1
- package/scss/print/components/_kirby-modal-wrapper.scss +1 -1
- package/scss/print/components/_kirby-page.scss +1 -1
- package/scss/print/components/_kirby-router-outlet.scss +1 -1
- package/scss/print/components/_kirby-tab-bar.scss +1 -1
- package/scss/print/elements/_button.scss +1 -1
- package/scss/print/elements/_index.scss +1 -1
- package/scss/print/elements/_page.scss +1 -1
- package/scss/print/elements/_preformatted-text.scss +1 -1
- package/scss/print/generic/_colors.scss +1 -1
- package/scss/print/generic/_index.scss +1 -1
- package/scss/print/generic/_page.scss +1 -1
- package/scss/print/generic/_reset.scss +1 -1
- package/scss/print/generic/_typography.scss +1 -1
- package/scss/themes/_colors.scss +1 -1
- package/testing-base/lib/components/mock.avatar.component.d.ts +2 -1
- package/src/lib/components/icon/README.md +0 -16
|
@@ -129,6 +129,8 @@ const kirbyIconSettings = {
|
|
|
129
129
|
{ name: 'notification', svg: 'assets/kirby/icons/svg/notification.svg' },
|
|
130
130
|
{ name: 'transfer-ownership', svg: 'assets/kirby/icons/svg/transfer-ownership.svg' },
|
|
131
131
|
{ name: 'update', svg: 'assets/kirby/icons/svg/update.svg' },
|
|
132
|
+
{ name: 'user-blocked', svg: 'assets/kirby/icons/svg/user-blocked.svg' },
|
|
133
|
+
{ name: 'add-bank', svg: 'assets/kirby/icons/svg/add-bank.svg' },
|
|
132
134
|
],
|
|
133
135
|
};
|
|
134
136
|
const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
|
|
@@ -494,10 +496,10 @@ class ButtonComponent {
|
|
|
494
496
|
}
|
|
495
497
|
}
|
|
496
498
|
/** @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 });
|
|
497
|
-
/** @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", noDecoration: "noDecoration", 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.no-decoration": "this.hasNoDecoration", "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-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);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;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color: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%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}: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){--kirby-button-padding-left: 16px;--kirby-button-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.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}: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-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-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)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}: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).no-decoration,: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{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(ion-toolbar kirby-page-actions).no-decoration:hover,:host-context(ion-toolbar kirby-page-actions).attention-level1:hover,:host-context(ion-toolbar kirby-page-actions).attention-level2:hover,:host-context(ion-toolbar kirby-page-actions).attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar kirby-page-actions).no-decoration:active,:host-context(ion-toolbar kirby-page-actions).no-decoration.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level1:active,:host-context(ion-toolbar kirby-page-actions).attention-level1.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level2:active,:host-context(ion-toolbar kirby-page-actions).attention-level2.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level3:active,:host-context(ion-toolbar kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).no-decoration.destructive,: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{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,: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{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,: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{--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-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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", noDecoration: "noDecoration", 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.no-decoration": "this.hasNoDecoration", "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-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);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;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color: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%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}: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){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}: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.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}: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-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-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)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(kirby-page ion-toolbar ion-buttons).icon-only{width:40px}:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration.destructive,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1.destructive,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2.destructive,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,: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{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,: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{--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-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
498
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
499
501
|
type: Component,
|
|
500
|
-
args: [{ selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);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;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color: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%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}: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){--kirby-button-padding-left: 16px;--kirby-button-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.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}: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-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-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)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}: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).no-decoration,: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{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(ion-toolbar kirby-page-actions).no-decoration:hover,:host-context(ion-toolbar kirby-page-actions).attention-level1:hover,:host-context(ion-toolbar kirby-page-actions).attention-level2:hover,:host-context(ion-toolbar kirby-page-actions).attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar kirby-page-actions).no-decoration:active,:host-context(ion-toolbar kirby-page-actions).no-decoration.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level1:active,:host-context(ion-toolbar kirby-page-actions).attention-level1.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level2:active,:host-context(ion-toolbar kirby-page-actions).attention-level2.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level3:active,:host-context(ion-toolbar kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).no-decoration.destructive,: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{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,: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{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,: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{--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-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
|
|
502
|
+
args: [{ selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);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;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color: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%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}: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){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}: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.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}: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-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-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)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(kirby-page ion-toolbar ion-buttons).icon-only{width:40px}:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page ion-toolbar ion-buttons).icon-only.no-decoration.destructive,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level1.destructive,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level2.destructive,:host-context(kirby-page ion-toolbar ion-buttons).icon-only.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,: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{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,: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{--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-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
|
|
501
503
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isAttentionLevel1: [{
|
|
502
504
|
type: HostBinding,
|
|
503
505
|
args: ['class.attention-level1']
|
|
@@ -1686,9 +1688,18 @@ class ModalHelper {
|
|
|
1686
1688
|
this.modalAnimationBuilder = modalAnimationBuilder;
|
|
1687
1689
|
this.windowRef = windowRef;
|
|
1688
1690
|
this.alertHelper = alertHelper;
|
|
1691
|
+
/*
|
|
1692
|
+
isModalOpening is used to prevent additional instantiations
|
|
1693
|
+
of modals, while a modal is already being instatiated, but not completed.
|
|
1694
|
+
This is the recommended approach by one of the maintainers of Ionic:
|
|
1695
|
+
https://github.com/ionic-team/ionic-framework/issues/23327#issuecomment-847028058
|
|
1696
|
+
*/
|
|
1697
|
+
this.isModalOpening = false;
|
|
1689
1698
|
}
|
|
1690
1699
|
showModalWindow(config, alertConfig) {
|
|
1691
1700
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1701
|
+
if (this.isModalOpening)
|
|
1702
|
+
return;
|
|
1692
1703
|
config.flavor = config.flavor || 'modal';
|
|
1693
1704
|
const modalPresentingElement = yield this.getPresentingElement(config.flavor);
|
|
1694
1705
|
let currentBackdrop;
|
|
@@ -1716,6 +1727,7 @@ class ModalHelper {
|
|
|
1716
1727
|
return canBeDismissed;
|
|
1717
1728
|
});
|
|
1718
1729
|
}
|
|
1730
|
+
this.isModalOpening = true;
|
|
1719
1731
|
const ionModal = yield this.ionicModalController.create({
|
|
1720
1732
|
component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
|
|
1721
1733
|
cssClass: [
|
|
@@ -1743,6 +1755,7 @@ class ModalHelper {
|
|
|
1743
1755
|
});
|
|
1744
1756
|
}
|
|
1745
1757
|
yield ionModal.present();
|
|
1758
|
+
this.isModalOpening = false;
|
|
1746
1759
|
return {
|
|
1747
1760
|
dismiss: ionModal.dismiss.bind(ionModal),
|
|
1748
1761
|
onWillDismiss: ionModal.onWillDismiss(),
|
|
@@ -2466,18 +2479,27 @@ class AvatarComponent {
|
|
|
2466
2479
|
get _cssClass() {
|
|
2467
2480
|
return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
|
|
2468
2481
|
}
|
|
2482
|
+
ngOnInit() {
|
|
2483
|
+
if (!this.shadow) {
|
|
2484
|
+
return;
|
|
2485
|
+
}
|
|
2486
|
+
this.stroke = true;
|
|
2487
|
+
console.warn('Shadow input binding on avatar will be deprecated next major. Use stroke instead');
|
|
2488
|
+
}
|
|
2469
2489
|
}
|
|
2470
2490
|
/** @nocollapse */ AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2471
|
-
/** @nocollapse */ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{
|
|
2491
|
+
/** @nocollapse */ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2472
2492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
2473
2493
|
type: Component,
|
|
2474
|
-
args: [{ selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{
|
|
2494
|
+
args: [{ selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
|
|
2475
2495
|
}], propDecorators: { imageSrc: [{
|
|
2476
2496
|
type: Input
|
|
2477
2497
|
}], altText: [{
|
|
2478
2498
|
type: Input
|
|
2479
2499
|
}], shadow: [{
|
|
2480
2500
|
type: Input
|
|
2501
|
+
}], stroke: [{
|
|
2502
|
+
type: Input
|
|
2481
2503
|
}], text: [{
|
|
2482
2504
|
type: Input
|
|
2483
2505
|
}], overlay: [{
|
|
@@ -2724,9 +2746,9 @@ class AnnotationsDelegate {
|
|
|
2724
2746
|
}
|
|
2725
2747
|
}
|
|
2726
2748
|
|
|
2727
|
-
const { getThemeColorHexString: getThemeColorHexString$
|
|
2728
|
-
const hoverBackgroundColor = getThemeColorHexString$
|
|
2729
|
-
const backgroundColor = getThemeColorHexString$
|
|
2749
|
+
const { getThemeColorHexString: getThemeColorHexString$5 } = ColorHelper;
|
|
2750
|
+
const hoverBackgroundColor = getThemeColorHexString$5('primary');
|
|
2751
|
+
const backgroundColor = getThemeColorHexString$5('secondary');
|
|
2730
2752
|
function scriptedBackgroundColor(context) {
|
|
2731
2753
|
var _a;
|
|
2732
2754
|
const dataset = context.dataset;
|
|
@@ -2746,7 +2768,7 @@ function scriptedHoverBackgroundColor(context) {
|
|
|
2746
2768
|
}
|
|
2747
2769
|
const CHART_GLOBAL_DEFAULTS = {
|
|
2748
2770
|
maintainAspectRatio: false,
|
|
2749
|
-
color: getThemeColorHexString$
|
|
2771
|
+
color: getThemeColorHexString$5('black'),
|
|
2750
2772
|
resizeDelay: 10,
|
|
2751
2773
|
elements: {
|
|
2752
2774
|
bar: {
|
|
@@ -3054,12 +3076,12 @@ function deepCopy(tgt) {
|
|
|
3054
3076
|
return cp;
|
|
3055
3077
|
}
|
|
3056
3078
|
|
|
3057
|
-
const { getThemeColorHexString: getThemeColorHexString$
|
|
3079
|
+
const { getThemeColorHexString: getThemeColorHexString$4 } = ColorHelper;
|
|
3058
3080
|
/* The chart.js annotation does not allow for changing the
|
|
3059
3081
|
defaults it comes with. In order to have sensible defaults
|
|
3060
3082
|
this object is used instead and manually merged with the
|
|
3061
3083
|
rest of the annotations object */
|
|
3062
|
-
const borderColor = getThemeColorHexString$
|
|
3084
|
+
const borderColor = getThemeColorHexString$4('semi-dark');
|
|
3063
3085
|
const borderDash = [6, 3];
|
|
3064
3086
|
const borderWidth = 1;
|
|
3065
3087
|
const CHART_ANNOTATIONS_CONFIG = {
|
|
@@ -3098,8 +3120,8 @@ const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
|
|
|
3098
3120
|
},
|
|
3099
3121
|
};
|
|
3100
3122
|
|
|
3101
|
-
const { fontSize: fontSize$
|
|
3102
|
-
const { getThemeColorHexString, getThemeColorRgbString } = ColorHelper;
|
|
3123
|
+
const { fontSize: fontSize$3 } = DesignTokenHelper;
|
|
3124
|
+
const { getThemeColorHexString: getThemeColorHexString$3, getThemeColorRgbString: getThemeColorRgbString$1 } = ColorHelper;
|
|
3103
3125
|
/**
|
|
3104
3126
|
* A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
|
|
3105
3127
|
*/
|
|
@@ -3126,7 +3148,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3126
3148
|
},
|
|
3127
3149
|
ticks: {
|
|
3128
3150
|
font: {
|
|
3129
|
-
size: parseInt(fontSize$
|
|
3151
|
+
size: parseInt(fontSize$3('s')),
|
|
3130
3152
|
},
|
|
3131
3153
|
},
|
|
3132
3154
|
},
|
|
@@ -3136,7 +3158,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3136
3158
|
radius: 0,
|
|
3137
3159
|
},
|
|
3138
3160
|
line: {
|
|
3139
|
-
borderColor: getThemeColorHexString('medium'),
|
|
3161
|
+
borderColor: getThemeColorHexString$3('medium'),
|
|
3140
3162
|
},
|
|
3141
3163
|
},
|
|
3142
3164
|
},
|
|
@@ -3160,7 +3182,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3160
3182
|
},
|
|
3161
3183
|
ticks: {
|
|
3162
3184
|
font: {
|
|
3163
|
-
size: parseInt(fontSize$
|
|
3185
|
+
size: parseInt(fontSize$3('xs')),
|
|
3164
3186
|
},
|
|
3165
3187
|
},
|
|
3166
3188
|
},
|
|
@@ -3168,7 +3190,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3168
3190
|
elements: {
|
|
3169
3191
|
line: {
|
|
3170
3192
|
tension: 0.2,
|
|
3171
|
-
borderColor: getThemeColorHexString('medium'),
|
|
3193
|
+
borderColor: getThemeColorHexString$3('medium'),
|
|
3172
3194
|
},
|
|
3173
3195
|
point: {
|
|
3174
3196
|
radius: 0,
|
|
@@ -3179,16 +3201,16 @@ const CHART_TYPES_CONFIG = {
|
|
|
3179
3201
|
line: {
|
|
3180
3202
|
type: 'line',
|
|
3181
3203
|
options: {
|
|
3182
|
-
backgroundColor: getThemeColorRgbString('semi-light', 0.5),
|
|
3204
|
+
backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
|
|
3183
3205
|
scales: {
|
|
3184
3206
|
x: {
|
|
3185
3207
|
grid: {
|
|
3186
|
-
borderColor: getThemeColorHexString('medium'),
|
|
3208
|
+
borderColor: getThemeColorHexString$3('medium'),
|
|
3187
3209
|
borderWidth: 1,
|
|
3188
3210
|
},
|
|
3189
3211
|
ticks: {
|
|
3190
3212
|
font: {
|
|
3191
|
-
size: parseInt(fontSize$
|
|
3213
|
+
size: parseInt(fontSize$3('xs')),
|
|
3192
3214
|
},
|
|
3193
3215
|
},
|
|
3194
3216
|
},
|
|
@@ -3215,7 +3237,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3215
3237
|
bottom: 0,
|
|
3216
3238
|
},
|
|
3217
3239
|
},
|
|
3218
|
-
backgroundColor: getThemeColorRgbString('semi-light', 0.5),
|
|
3240
|
+
backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
|
|
3219
3241
|
scales: {
|
|
3220
3242
|
x: {
|
|
3221
3243
|
grid: {
|
|
@@ -3225,7 +3247,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3225
3247
|
maxRotation: 0,
|
|
3226
3248
|
autoSkipPadding: 120,
|
|
3227
3249
|
font: {
|
|
3228
|
-
size: parseInt(fontSize$
|
|
3250
|
+
size: parseInt(fontSize$3('xs')),
|
|
3229
3251
|
},
|
|
3230
3252
|
},
|
|
3231
3253
|
},
|
|
@@ -3238,7 +3260,7 @@ const CHART_TYPES_CONFIG = {
|
|
|
3238
3260
|
ticks: {
|
|
3239
3261
|
display: true,
|
|
3240
3262
|
font: {
|
|
3241
|
-
size: parseInt(fontSize$
|
|
3263
|
+
size: parseInt(fontSize$3('xs')),
|
|
3242
3264
|
},
|
|
3243
3265
|
},
|
|
3244
3266
|
},
|
|
@@ -3262,9 +3284,9 @@ const CHART_TYPES_CONFIG = {
|
|
|
3262
3284
|
enabled: true,
|
|
3263
3285
|
mode: 'index',
|
|
3264
3286
|
intersect: false,
|
|
3265
|
-
backgroundColor: getThemeColorHexString('semi-light'),
|
|
3266
|
-
titleColor: getThemeColorHexString('semi-light-contrast'),
|
|
3267
|
-
bodyColor: getThemeColorHexString('semi-light-contrast'),
|
|
3287
|
+
backgroundColor: getThemeColorHexString$3('semi-light'),
|
|
3288
|
+
titleColor: getThemeColorHexString$3('semi-light-contrast'),
|
|
3289
|
+
bodyColor: getThemeColorHexString$3('semi-light-contrast'),
|
|
3268
3290
|
caretSize: 0,
|
|
3269
3291
|
bodySpacing: 5,
|
|
3270
3292
|
titleSpacing: 5,
|
|
@@ -3273,17 +3295,20 @@ const CHART_TYPES_CONFIG = {
|
|
|
3273
3295
|
labelColor: (tooltipItem) => {
|
|
3274
3296
|
return {
|
|
3275
3297
|
backgroundColor: tooltipItem.dataset.borderColor,
|
|
3298
|
+
borderColor: getThemeColorHexString$3('semi-light'),
|
|
3299
|
+
borderWidth: 2, // This value must be exactly 2. If it is less, a white "border" will appear, if greater than, a shadow around the box will be shown.
|
|
3300
|
+
// An issue has been created, requesting a test to check this value doesn´t change: https://github.com/kirbydesign/designsystem/issues/2578
|
|
3276
3301
|
};
|
|
3277
3302
|
},
|
|
3278
3303
|
},
|
|
3279
3304
|
},
|
|
3280
3305
|
datalabels: {
|
|
3281
3306
|
backgroundColor: (context) => context.dataset.borderColor,
|
|
3282
|
-
color: getThemeColorHexString('white'),
|
|
3307
|
+
color: getThemeColorHexString$3('white'),
|
|
3283
3308
|
borderRadius: 3,
|
|
3284
3309
|
font: {
|
|
3285
3310
|
lineHeight: 1,
|
|
3286
|
-
size: parseInt(fontSize$
|
|
3311
|
+
size: parseInt(fontSize$3('xs')),
|
|
3287
3312
|
},
|
|
3288
3313
|
padding: {
|
|
3289
3314
|
top: 6,
|
|
@@ -3390,6 +3415,10 @@ class ChartJSService {
|
|
|
3390
3415
|
redrawChart() {
|
|
3391
3416
|
this.chart.update();
|
|
3392
3417
|
}
|
|
3418
|
+
destroyChart() {
|
|
3419
|
+
var _a;
|
|
3420
|
+
(_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
3421
|
+
}
|
|
3393
3422
|
updateData(data) {
|
|
3394
3423
|
const datasets = this.createDatasets(data);
|
|
3395
3424
|
this.chart.data.datasets = datasets;
|
|
@@ -3784,6 +3813,9 @@ class BaseChartComponent {
|
|
|
3784
3813
|
redrawChart() {
|
|
3785
3814
|
this.chartJSService.redrawChart();
|
|
3786
3815
|
}
|
|
3816
|
+
ngOnDestroy() {
|
|
3817
|
+
this.chartJSService.destroyChart();
|
|
3818
|
+
}
|
|
3787
3819
|
}
|
|
3788
3820
|
/** @nocollapse */ BaseChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3789
3821
|
/** @nocollapse */ BaseChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: BaseChartComponent, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] });
|
|
@@ -4049,10 +4081,10 @@ class ItemComponent {
|
|
|
4049
4081
|
}
|
|
4050
4082
|
}
|
|
4051
4083
|
/** @nocollapse */ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4052
|
-
/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:
|
|
4084
|
+
/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4053
4085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, decorators: [{
|
|
4054
4086
|
type: Component,
|
|
4055
|
-
args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:
|
|
4087
|
+
args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
|
|
4056
4088
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
4057
4089
|
type: Input
|
|
4058
4090
|
}], selected: [{
|
|
@@ -4762,7 +4794,7 @@ DropdownComponent.OPEN_DELAY_IN_MS = 100;
|
|
|
4762
4794
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
4763
4795
|
multi: true,
|
|
4764
4796
|
},
|
|
4765
|
-
], 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: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\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)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}
|
|
4797
|
+
], 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: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\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)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block: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-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "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", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
4766
4798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
4767
4799
|
type: Component,
|
|
4768
4800
|
args: [{ selector: 'kirby-dropdown', providers: [
|
|
@@ -4771,7 +4803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
4771
4803
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
4772
4804
|
multi: true,
|
|
4773
4805
|
},
|
|
4774
|
-
], 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: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\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)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}
|
|
4806
|
+
], 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: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\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)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block: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-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
|
|
4775
4807
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
|
|
4776
4808
|
type: Input
|
|
4777
4809
|
}], selectedIndex: [{
|
|
@@ -6345,16 +6377,12 @@ class FabSheetComponent {
|
|
|
6345
6377
|
this.disabled = false;
|
|
6346
6378
|
this.horizontalAlignment = 'right';
|
|
6347
6379
|
this._isFabSheetOpen = false;
|
|
6348
|
-
this._isBackdropVisible = false;
|
|
6349
6380
|
}
|
|
6350
6381
|
get isFabSheetOpen() {
|
|
6351
6382
|
return this._isFabSheetOpen;
|
|
6352
6383
|
}
|
|
6353
|
-
get isBackdropVisible() {
|
|
6354
|
-
return this._isBackdropVisible;
|
|
6355
|
-
}
|
|
6356
6384
|
ngAfterContentInit() {
|
|
6357
|
-
if (
|
|
6385
|
+
if (this.actionSheet) {
|
|
6358
6386
|
this.actionSheet.hideCancel = true;
|
|
6359
6387
|
}
|
|
6360
6388
|
}
|
|
@@ -6375,21 +6403,22 @@ class FabSheetComponent {
|
|
|
6375
6403
|
this._isFabSheetOpen = isOpen;
|
|
6376
6404
|
if (this.isFabSheetOpen) {
|
|
6377
6405
|
this.renderer.addClass(this.document.body, 'fab-sheet-active');
|
|
6406
|
+
this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
|
|
6378
6407
|
}
|
|
6379
6408
|
else {
|
|
6380
6409
|
this.renderer.removeClass(this.document.body, 'fab-sheet-active');
|
|
6410
|
+
this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
|
|
6381
6411
|
}
|
|
6382
|
-
this._isBackdropVisible = !!this.actionSheet && isOpen;
|
|
6383
6412
|
this.changeDetectorRef.detectChanges();
|
|
6384
6413
|
}
|
|
6385
6414
|
}
|
|
6386
6415
|
/** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
6387
|
-
/** @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" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n [class.backdrop-visible]=\"
|
|
6416
|
+
/** @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" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\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}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #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{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 721px){ion-backdrop.backdrop-visible{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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6388
6417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, decorators: [{
|
|
6389
6418
|
type: Component,
|
|
6390
|
-
args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"
|
|
6419
|
+
args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\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}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #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{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 721px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
|
|
6391
6420
|
}], ctorParameters: function () {
|
|
6392
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type:
|
|
6421
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
6393
6422
|
type: Inject,
|
|
6394
6423
|
args: [DOCUMENT]
|
|
6395
6424
|
}] }];
|
|
@@ -6468,6 +6497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
6468
6497
|
}]
|
|
6469
6498
|
}], ctorParameters: function () { return []; } });
|
|
6470
6499
|
|
|
6500
|
+
const GRID_DEPRICATION_WARNING = 'Deprecation warning: The "kirby-grid" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';
|
|
6471
6501
|
class GridCard {
|
|
6472
6502
|
constructor(configuration, row, col, colSpan) {
|
|
6473
6503
|
this.configuration = configuration;
|
|
@@ -6480,6 +6510,7 @@ class GridComponent {
|
|
|
6480
6510
|
constructor(breakpointHelper) {
|
|
6481
6511
|
this.breakpointHelper = breakpointHelper;
|
|
6482
6512
|
this.cards = [];
|
|
6513
|
+
console.warn(GRID_DEPRICATION_WARNING);
|
|
6483
6514
|
}
|
|
6484
6515
|
set cardConfigurations(cardConfigurations) {
|
|
6485
6516
|
this.cardConfigs = cardConfigurations;
|
|
@@ -7007,10 +7038,10 @@ class ListItemComponent {
|
|
|
7007
7038
|
}
|
|
7008
7039
|
}
|
|
7009
7040
|
/** @nocollapse */ ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListItemComponent, deps: [{ token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7010
|
-
/** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7041
|
+
/** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7011
7042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
7012
7043
|
type: Component,
|
|
7013
|
-
args: [{ selector: 'kirby-list-item', template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"] }]
|
|
7044
|
+
args: [{ selector: 'kirby-list-item', template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"] }]
|
|
7014
7045
|
}], ctorParameters: function () { return [{ type: PlatformService }]; }, propDecorators: { ionItemSliding: [{
|
|
7015
7046
|
type: ViewChild,
|
|
7016
7047
|
args: [IonItemSliding]
|
|
@@ -7137,22 +7168,26 @@ class ListComponent {
|
|
|
7137
7168
|
args.event.stopPropagation();
|
|
7138
7169
|
}
|
|
7139
7170
|
_getBoundaryClass(index, section) {
|
|
7140
|
-
|
|
7141
|
-
|
|
7142
|
-
|
|
7143
|
-
|
|
7144
|
-
|
|
7171
|
+
if (index === 0) {
|
|
7172
|
+
if (this.headerTemplate)
|
|
7173
|
+
return null;
|
|
7174
|
+
else
|
|
7175
|
+
return section.length === 1 ? ['first', 'last'] : 'first';
|
|
7176
|
+
}
|
|
7177
|
+
if (index === section.length - 1) {
|
|
7145
7178
|
return this.footerTemplate ? null : 'last';
|
|
7179
|
+
}
|
|
7180
|
+
return null;
|
|
7146
7181
|
}
|
|
7147
7182
|
standAloneClass() {
|
|
7148
7183
|
return this._isStandAloneEnabled ? `stand-alone-bottom-margin-${this.standAloneSpacing}` : '';
|
|
7149
7184
|
}
|
|
7150
7185
|
}
|
|
7151
7186
|
/** @nocollapse */ ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, deps: [{ token: ListHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7152
|
-
/** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "kirbyItems", predicate: ItemComponent }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], components: [{ type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonItemGroup, selector: "ion-item-group" }, { type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7187
|
+
/** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "kirbyItems", predicate: ItemComponent }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], components: [{ type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonItemGroup, selector: "ion-item-group" }, { type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7153
7188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, decorators: [{
|
|
7154
7189
|
type: Component,
|
|
7155
|
-
args: [{ selector: 'kirby-list', providers: [ListHelper], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
|
|
7190
|
+
args: [{ selector: 'kirby-list', providers: [ListHelper], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
|
|
7156
7191
|
}], ctorParameters: function () { return [{ type: ListHelper }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { list: [{
|
|
7157
7192
|
type: ViewChild,
|
|
7158
7193
|
args: ['list', { static: true }]
|
|
@@ -7361,12 +7396,15 @@ const selectedTabClickEvent = 'kirbySelectedTabClick';
|
|
|
7361
7396
|
|
|
7362
7397
|
class TabsService {
|
|
7363
7398
|
constructor() {
|
|
7364
|
-
this.outletSubject$ = new ReplaySubject();
|
|
7399
|
+
this.outletSubject$ = new ReplaySubject(1);
|
|
7365
7400
|
this.outlet$ = this.outletSubject$.asObservable();
|
|
7366
7401
|
}
|
|
7367
7402
|
setOutlet(outlet) {
|
|
7368
7403
|
this.outletSubject$.next(outlet);
|
|
7369
7404
|
}
|
|
7405
|
+
resetOutlet() {
|
|
7406
|
+
this.outletSubject$.next(null);
|
|
7407
|
+
}
|
|
7370
7408
|
}
|
|
7371
7409
|
/** @nocollapse */ TabsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
7372
7410
|
/** @nocollapse */ TabsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabsService, providedIn: 'root' });
|
|
@@ -7385,6 +7423,9 @@ class TabsComponent {
|
|
|
7385
7423
|
ngAfterViewInit() {
|
|
7386
7424
|
this.tabsService.setOutlet(this.tabs.outlet);
|
|
7387
7425
|
}
|
|
7426
|
+
ngOnDestroy() {
|
|
7427
|
+
this.tabsService.resetOutlet();
|
|
7428
|
+
}
|
|
7388
7429
|
}
|
|
7389
7430
|
/** @nocollapse */ TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7390
7431
|
/** @nocollapse */ TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TabsComponent, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 721px){ion-tabs{--kirby-tab-bar-height: 70px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], components: [{ type: i1.IonTabs, selector: "ion-tabs", outputs: ["ionTabsWillChange", "ionTabsDidChange"] }, { type: i1.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] });
|
|
@@ -7428,7 +7469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
7428
7469
|
type: Injectable
|
|
7429
7470
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
|
|
7430
7471
|
|
|
7431
|
-
const fontSize = DesignTokenHelper.fontSize;
|
|
7472
|
+
const fontSize$2 = DesignTokenHelper.fontSize;
|
|
7432
7473
|
const lineHeight = DesignTokenHelper.lineHeight;
|
|
7433
7474
|
class FitHeadingDirective {
|
|
7434
7475
|
constructor(elementRef, renderer, resizeObserverService, lineClampHelper) {
|
|
@@ -7439,17 +7480,17 @@ class FitHeadingDirective {
|
|
|
7439
7480
|
this.headingSizes = [
|
|
7440
7481
|
{
|
|
7441
7482
|
name: 'h1',
|
|
7442
|
-
fontSize: fontSize('xl'),
|
|
7483
|
+
fontSize: fontSize$2('xl'),
|
|
7443
7484
|
lineHeight: lineHeight('xl'),
|
|
7444
7485
|
},
|
|
7445
7486
|
{
|
|
7446
7487
|
name: 'h2',
|
|
7447
|
-
fontSize: fontSize('l'),
|
|
7488
|
+
fontSize: fontSize$2('l'),
|
|
7448
7489
|
lineHeight: lineHeight('l'),
|
|
7449
7490
|
},
|
|
7450
7491
|
{
|
|
7451
7492
|
name: 'h3',
|
|
7452
|
-
fontSize: fontSize('m'),
|
|
7493
|
+
fontSize: fontSize$2('m'),
|
|
7453
7494
|
lineHeight: lineHeight('m'),
|
|
7454
7495
|
},
|
|
7455
7496
|
];
|
|
@@ -7527,6 +7568,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
7527
7568
|
args: ['kirbyFitHeading']
|
|
7528
7569
|
}] } });
|
|
7529
7570
|
|
|
7571
|
+
/**
|
|
7572
|
+
* Specify scroll event debounce time in ms and scrolled offset from top in pixels
|
|
7573
|
+
*/
|
|
7574
|
+
const contentScrollDebounceTimeInMS = 10;
|
|
7575
|
+
const contentScrolledOffsetInPixels = 4;
|
|
7530
7576
|
class PageTitleDirective {
|
|
7531
7577
|
}
|
|
7532
7578
|
/** @nocollapse */ PageTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -7686,9 +7732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
7686
7732
|
}]
|
|
7687
7733
|
}] });
|
|
7688
7734
|
class PageComponent {
|
|
7689
|
-
constructor(
|
|
7690
|
-
this.elementRef = elementRef;
|
|
7691
|
-
this.renderer = renderer;
|
|
7735
|
+
constructor(router, changeDetectorRef, modalNavigationService, tabsComponent) {
|
|
7692
7736
|
this.router = router;
|
|
7693
7737
|
this.changeDetectorRef = changeDetectorRef;
|
|
7694
7738
|
this.modalNavigationService = modalNavigationService;
|
|
@@ -7699,9 +7743,10 @@ class PageComponent {
|
|
|
7699
7743
|
this.refresh = new EventEmitter();
|
|
7700
7744
|
this.backButtonClick = new EventEmitter();
|
|
7701
7745
|
this.pageTitleIntersectionObserverRef = this.pageTitleIntersectionObserver();
|
|
7746
|
+
this.stickyContentIntersectionObserverRef = this.stickyContentIntersectionObserver();
|
|
7702
7747
|
this.ngOnDestroy$ = new Subject();
|
|
7703
|
-
this.navigationStart$ = this.router.events.pipe(
|
|
7704
|
-
this.navigationEnd$ = this.router.events.pipe(
|
|
7748
|
+
this.navigationStart$ = this.router.events.pipe(filter((event) => event instanceof NavigationStart), takeUntil(this.ngOnDestroy$));
|
|
7749
|
+
this.navigationEnd$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.ngOnDestroy$));
|
|
7705
7750
|
}
|
|
7706
7751
|
get tabBarBottomHidden() {
|
|
7707
7752
|
return this._tabBarBottomHidden;
|
|
@@ -7713,9 +7758,6 @@ class PageComponent {
|
|
|
7713
7758
|
}
|
|
7714
7759
|
this._tabBarBottomHidden = value;
|
|
7715
7760
|
}
|
|
7716
|
-
ngOnInit() {
|
|
7717
|
-
this.removeWrapper();
|
|
7718
|
-
}
|
|
7719
7761
|
ngOnChanges(changes) {
|
|
7720
7762
|
if (changes.titleMaxLines) {
|
|
7721
7763
|
this.fitHeadingConfig = Object.assign(Object.assign({}, this.fitHeadingConfig), { maxLines: changes.titleMaxLines.currentValue });
|
|
@@ -7726,6 +7768,11 @@ class PageComponent {
|
|
|
7726
7768
|
}
|
|
7727
7769
|
}
|
|
7728
7770
|
ngAfterViewInit() {
|
|
7771
|
+
this.contentScrolled$ = this.content.ionScroll.pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.ngOnDestroy$));
|
|
7772
|
+
this.contentScrolled$.subscribe((scrollInfo) => {
|
|
7773
|
+
this.isContentScrolled = scrollInfo.scrollTop > contentScrolledOffsetInPixels;
|
|
7774
|
+
this.changeDetectorRef.detectChanges();
|
|
7775
|
+
});
|
|
7729
7776
|
// This instance has observed a page enter so register the correct url for this instance
|
|
7730
7777
|
this.url = this.router.url;
|
|
7731
7778
|
this.onEnter();
|
|
@@ -7743,6 +7790,7 @@ class PageComponent {
|
|
|
7743
7790
|
}
|
|
7744
7791
|
});
|
|
7745
7792
|
this.interceptBackButtonClicksSetup();
|
|
7793
|
+
this.initializeStickyIntersectionObserver();
|
|
7746
7794
|
}
|
|
7747
7795
|
ngAfterContentChecked() {
|
|
7748
7796
|
this.initializeTitle();
|
|
@@ -7755,6 +7803,7 @@ class PageComponent {
|
|
|
7755
7803
|
this.ngOnDestroy$.next();
|
|
7756
7804
|
this.ngOnDestroy$.complete();
|
|
7757
7805
|
this.pageTitleIntersectionObserverRef.disconnect();
|
|
7806
|
+
this.stickyContentIntersectionObserverRef.disconnect();
|
|
7758
7807
|
}
|
|
7759
7808
|
delegateRefreshEvent(event) {
|
|
7760
7809
|
this.refresh.emit({
|
|
@@ -7793,6 +7842,14 @@ class PageComponent {
|
|
|
7793
7842
|
this.backButtonClick.emit(event);
|
|
7794
7843
|
};
|
|
7795
7844
|
}
|
|
7845
|
+
initializeStickyIntersectionObserver() {
|
|
7846
|
+
if (this.stickyContentTemplate) {
|
|
7847
|
+
// Sticky content present - start observing for stickiness
|
|
7848
|
+
setTimeout(() => {
|
|
7849
|
+
this.stickyContentIntersectionObserverRef.observe(this.stickyContentContainer.nativeElement);
|
|
7850
|
+
});
|
|
7851
|
+
}
|
|
7852
|
+
}
|
|
7796
7853
|
initializeTitle() {
|
|
7797
7854
|
// Ensures initializeTitle() won't run, if already initialized
|
|
7798
7855
|
if (this.hasPageTitle)
|
|
@@ -7818,16 +7875,14 @@ class PageComponent {
|
|
|
7818
7875
|
this.customActions.forEach((pageAction) => {
|
|
7819
7876
|
if (pageAction.isFixed) {
|
|
7820
7877
|
this.fixedActionsTemplate = pageAction.template;
|
|
7821
|
-
|
|
7878
|
+
}
|
|
7879
|
+
else if (pageAction.isSticky) {
|
|
7880
|
+
this.stickyActionsTemplate = pageAction.template;
|
|
7822
7881
|
}
|
|
7823
7882
|
else {
|
|
7824
7883
|
this.pageActionsTemplate = pageAction.template;
|
|
7825
|
-
if (pageAction.isSticky) {
|
|
7826
|
-
this.stickyActionsTemplate = pageAction.template;
|
|
7827
|
-
}
|
|
7828
7884
|
}
|
|
7829
7885
|
});
|
|
7830
|
-
this.hasActionsInPage = !!this.pageActionsTemplate;
|
|
7831
7886
|
}
|
|
7832
7887
|
initializeContent() {
|
|
7833
7888
|
this.customContent.forEach((content) => {
|
|
@@ -7842,13 +7897,6 @@ class PageComponent {
|
|
|
7842
7897
|
initializeStickyContent() {
|
|
7843
7898
|
this.stickyContentTemplate = this.stickyContentRef;
|
|
7844
7899
|
}
|
|
7845
|
-
removeWrapper() {
|
|
7846
|
-
const parent = this.elementRef.nativeElement.parentNode;
|
|
7847
|
-
this.renderer.removeChild(parent, this.elementRef.nativeElement);
|
|
7848
|
-
this.renderer.appendChild(parent, this.ionHeaderElement.nativeElement);
|
|
7849
|
-
this.renderer.appendChild(parent, this.ionContentElement.nativeElement);
|
|
7850
|
-
this.renderer.appendChild(parent, this.ionFooterElement.nativeElement);
|
|
7851
|
-
}
|
|
7852
7900
|
pageTitleIntersectionObserver() {
|
|
7853
7901
|
const options = {
|
|
7854
7902
|
rootMargin: '0px',
|
|
@@ -7857,7 +7905,6 @@ class PageComponent {
|
|
|
7857
7905
|
const callback = (entries) => {
|
|
7858
7906
|
if (initialized) {
|
|
7859
7907
|
this.toolbarTitleVisible = !entries[0].isIntersecting;
|
|
7860
|
-
this.toolbarStickyActionsVisible = !entries[0].isIntersecting;
|
|
7861
7908
|
this.changeDetectorRef.detectChanges();
|
|
7862
7909
|
}
|
|
7863
7910
|
else {
|
|
@@ -7866,6 +7913,16 @@ class PageComponent {
|
|
|
7866
7913
|
};
|
|
7867
7914
|
return new IntersectionObserver(callback, options);
|
|
7868
7915
|
}
|
|
7916
|
+
stickyContentIntersectionObserver() {
|
|
7917
|
+
const options = {
|
|
7918
|
+
threshold: 1,
|
|
7919
|
+
};
|
|
7920
|
+
const callback = (entries) => {
|
|
7921
|
+
// The sticky content is pinned when it doesn't fully intersect the viewport
|
|
7922
|
+
this.isStickyContentPinned = !entries[0].isIntersecting;
|
|
7923
|
+
};
|
|
7924
|
+
return new IntersectionObserver(callback, options);
|
|
7925
|
+
}
|
|
7869
7926
|
_onKeyboardWillShow(info) {
|
|
7870
7927
|
if (info && info.keyboardHeight) {
|
|
7871
7928
|
this.ionContentElement.nativeElement.style.setProperty('--keyboard-offset', `${info.keyboardHeight}px`);
|
|
@@ -7880,13 +7937,13 @@ class PageComponent {
|
|
|
7880
7937
|
}
|
|
7881
7938
|
}
|
|
7882
7939
|
}
|
|
7883
|
-
/** @nocollapse */ PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, deps: [{ token:
|
|
7884
|
-
/** @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()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, 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: "stickyContentRef", first: true, predicate: PageStickyContentDirective, 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 <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n <div\n class=\"page-header\"\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 </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div class=\"sticky-content-container\">\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\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-color: var(--kirby-black)}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;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.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);--color: var(--kirby-black)}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}.sticky-content-container{position:sticky;top:0;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}\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: ["collapse", "mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7940
|
+
/** @nocollapse */ PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, deps: [{ token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: ModalNavigationService }, { token: TabsComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
7941
|
+
/** @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()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, 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: "stickyContentRef", first: true, predicate: PageStickyContentDirective, 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: "stickyContentContainer", first: true, predicate: ["stickyContentContainer"], 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 [class.content-scrolled]=\"!stickyContentTemplate && isContentScrolled\">\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 [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"!!stickyActionsTemplate\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons class=\"hide\" slot=\"secondary\" [class.fade-in]=\"!!fixedActionsTemplate\">\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 <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\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 </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\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: [":host{display:contents}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-color: var(--kirby-black);--notch-present: clamp( 0px, var(--kirby-safe-area-top, 0px) - 32px, 1px );--min-height: clamp( 48px, (1px - var(--notch-present)) * 56, 56px );box-sizing:border-box;padding-inline:4px}@media (min-width: 721px){ion-toolbar{--min-height: 64px}}ion-toolbar.content-scrolled:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;background-color:var(--kirby-medium)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease}ion-toolbar ion-title.slide-and-fade-in{opacity:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden;font-weight:700}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:40px;width:40px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.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-top: 12px;--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}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}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}.sticky-content-container.content-pinned:before{content:\"\";position:absolute;left:calc(-1 * var(--page-content-padding-start, 16px));right:calc(-1 * var(--page-content-padding-end, 16px));bottom:0;height:1px;z-index:1;background-color:var(--kirby-medium)}\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: ["collapse", "mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7885
7942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, decorators: [{
|
|
7886
7943
|
type: Component,
|
|
7887
|
-
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
|
|
7944
|
+
args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar [class.content-scrolled]=\"!stickyContentTemplate && isContentScrolled\">\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 [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"!!stickyActionsTemplate\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons class=\"hide\" slot=\"secondary\" [class.fade-in]=\"!!fixedActionsTemplate\">\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 <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\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 </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\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: [":host{display:contents}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-color: var(--kirby-black);--notch-present: clamp( 0px, var(--kirby-safe-area-top, 0px) - 32px, 1px );--min-height: clamp( 48px, (1px - var(--notch-present)) * 56, 56px );box-sizing:border-box;padding-inline:4px}@media (min-width: 721px){ion-toolbar{--min-height: 64px}}ion-toolbar.content-scrolled:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;background-color:var(--kirby-medium)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease}ion-toolbar ion-title.slide-and-fade-in{opacity:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden;font-weight:700}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:40px;width:40px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.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-top: 12px;--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}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}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}.sticky-content-container.content-pinned:before{content:\"\";position:absolute;left:calc(-1 * var(--page-content-padding-start, 16px));right:calc(-1 * var(--page-content-padding-end, 16px));bottom:0;height:1px;z-index:1;background-color:var(--kirby-medium)}\n"] }]
|
|
7888
7945
|
}], ctorParameters: function () {
|
|
7889
|
-
return [{ type:
|
|
7946
|
+
return [{ type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: ModalNavigationService }, { type: TabsComponent, decorators: [{
|
|
7890
7947
|
type: Optional
|
|
7891
7948
|
}, {
|
|
7892
7949
|
type: SkipSelf
|
|
@@ -7933,6 +7990,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
7933
7990
|
}], pageTitle: [{
|
|
7934
7991
|
type: ViewChild,
|
|
7935
7992
|
args: ['pageTitle', { static: false, read: ElementRef }]
|
|
7993
|
+
}], stickyContentContainer: [{
|
|
7994
|
+
type: ViewChild,
|
|
7995
|
+
args: ['stickyContentContainer', { static: false, read: ElementRef }]
|
|
7936
7996
|
}], simpleTitleTemplate: [{
|
|
7937
7997
|
type: ViewChild,
|
|
7938
7998
|
args: ['simpleTitleTemplate', { static: true, read: TemplateRef }]
|
|
@@ -8455,10 +8515,10 @@ class SlideButtonComponent {
|
|
|
8455
8515
|
}
|
|
8456
8516
|
}
|
|
8457
8517
|
/** @nocollapse */ SlideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8458
|
-
/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8518
|
+
/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8459
8519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, decorators: [{
|
|
8460
8520
|
type: Component,
|
|
8461
|
-
args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
|
|
8521
|
+
args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
|
|
8462
8522
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
|
|
8463
8523
|
type: Input
|
|
8464
8524
|
}], expand: [{
|
|
@@ -9034,6 +9094,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
9034
9094
|
args: ['click']
|
|
9035
9095
|
}] } });
|
|
9036
9096
|
|
|
9097
|
+
class ChartBaseConfig {
|
|
9098
|
+
}
|
|
9099
|
+
ChartBaseConfig.registerPlugins = () => { };
|
|
9100
|
+
|
|
9101
|
+
const { getThemeColorHexString: getThemeColorHexString$2 } = ColorHelper;
|
|
9102
|
+
const { fontSize: fontSize$1 } = DesignTokenHelper;
|
|
9103
|
+
const getDataLabelPosition = (data, dataIndex) => {
|
|
9104
|
+
const scatterPointDataYvalues = data.map((scatterDatapoint) => scatterDatapoint.y);
|
|
9105
|
+
const minValue = Math.min(...scatterPointDataYvalues);
|
|
9106
|
+
const minValueIndex = scatterPointDataYvalues.indexOf(minValue);
|
|
9107
|
+
if (dataIndex === minValueIndex) {
|
|
9108
|
+
return 'bottom';
|
|
9109
|
+
}
|
|
9110
|
+
const maxValue = Math.max(...scatterPointDataYvalues);
|
|
9111
|
+
const maxValueIndex = scatterPointDataYvalues.indexOf(maxValue);
|
|
9112
|
+
if (dataIndex === maxValueIndex) {
|
|
9113
|
+
return 'top';
|
|
9114
|
+
}
|
|
9115
|
+
return null;
|
|
9116
|
+
};
|
|
9117
|
+
const dataLabelsPluginConfig = {
|
|
9118
|
+
backgroundColor: '#005c3c',
|
|
9119
|
+
color: getThemeColorHexString$2('white'),
|
|
9120
|
+
borderRadius: 3,
|
|
9121
|
+
font: {
|
|
9122
|
+
lineHeight: 1,
|
|
9123
|
+
size: parseInt(fontSize$1('xs')),
|
|
9124
|
+
},
|
|
9125
|
+
padding: {
|
|
9126
|
+
top: 6,
|
|
9127
|
+
left: 5,
|
|
9128
|
+
right: 5,
|
|
9129
|
+
bottom: 5,
|
|
9130
|
+
},
|
|
9131
|
+
offset: 5,
|
|
9132
|
+
align: (context) => getDataLabelPosition(context.dataset.data, context.dataIndex),
|
|
9133
|
+
display: (context) => {
|
|
9134
|
+
return showDataLabel(context);
|
|
9135
|
+
},
|
|
9136
|
+
formatter: (dataPoint) => dataPoint.y.toString(),
|
|
9137
|
+
};
|
|
9138
|
+
function showDataLabel(context) {
|
|
9139
|
+
const data = [...context.dataset.data];
|
|
9140
|
+
const yValues = data.map((dataPoints) => dataPoints.y);
|
|
9141
|
+
const minValue = Math.min(...yValues);
|
|
9142
|
+
const minValueIndex = yValues.indexOf(minValue);
|
|
9143
|
+
const maxValue = Math.max(...yValues);
|
|
9144
|
+
const maxValueIndex = yValues.indexOf(maxValue);
|
|
9145
|
+
return context.dataIndex === maxValueIndex || context.dataIndex === minValueIndex;
|
|
9146
|
+
}
|
|
9147
|
+
|
|
9148
|
+
const verticalLineId = 'verticalLine';
|
|
9149
|
+
const getVerticalLinePluginConfig = {
|
|
9150
|
+
id: verticalLineId,
|
|
9151
|
+
drawTime: 'beforeDraw',
|
|
9152
|
+
defaults: {
|
|
9153
|
+
width: 1,
|
|
9154
|
+
color: 'black',
|
|
9155
|
+
},
|
|
9156
|
+
afterInit: (chart) => {
|
|
9157
|
+
chart[verticalLineId] = {
|
|
9158
|
+
x: 0,
|
|
9159
|
+
y: 0,
|
|
9160
|
+
};
|
|
9161
|
+
},
|
|
9162
|
+
afterEvent: (chart, args) => {
|
|
9163
|
+
const { inChartArea } = args;
|
|
9164
|
+
const { x, y } = args.event;
|
|
9165
|
+
chart[verticalLineId] = { x, y, draw: inChartArea };
|
|
9166
|
+
chart.draw();
|
|
9167
|
+
},
|
|
9168
|
+
beforeDraw: (chart, _, options) => {
|
|
9169
|
+
const { ctx } = chart;
|
|
9170
|
+
const { top, bottom } = chart.chartArea;
|
|
9171
|
+
const { x, draw } = chart[verticalLineId];
|
|
9172
|
+
if (!draw)
|
|
9173
|
+
return;
|
|
9174
|
+
ctx.save();
|
|
9175
|
+
ctx.beginPath();
|
|
9176
|
+
ctx.lineWidth = options.width;
|
|
9177
|
+
ctx.strokeStyle = options.color;
|
|
9178
|
+
ctx.moveTo(x, bottom);
|
|
9179
|
+
ctx.lineTo(x, top);
|
|
9180
|
+
ctx.stroke();
|
|
9181
|
+
ctx.restore();
|
|
9182
|
+
},
|
|
9183
|
+
};
|
|
9184
|
+
|
|
9185
|
+
var _a;
|
|
9186
|
+
const { getThemeColorHexString: getThemeColorHexString$1, getThemeColorRgbString } = ColorHelper;
|
|
9187
|
+
const { fontSize } = DesignTokenHelper;
|
|
9188
|
+
/**
|
|
9189
|
+
* This class is still experimental. Feel free to use it, but please note that it is still subject to breaking changes.
|
|
9190
|
+
*/
|
|
9191
|
+
class StockChartConfig extends ChartBaseConfig {
|
|
9192
|
+
static registerPlugins() {
|
|
9193
|
+
if (StockChartConfig.pluginsRegistered) {
|
|
9194
|
+
return;
|
|
9195
|
+
}
|
|
9196
|
+
this.registeredElements.forEach((scale) => {
|
|
9197
|
+
Chart.register(scale);
|
|
9198
|
+
});
|
|
9199
|
+
StockChartConfig.pluginsRegistered = true;
|
|
9200
|
+
}
|
|
9201
|
+
}
|
|
9202
|
+
_a = StockChartConfig;
|
|
9203
|
+
StockChartConfig.STOCK_CHART_LOCALE_DEFAULT = 'en-US';
|
|
9204
|
+
StockChartConfig.scales = [CategoryScale, LinearScale, TimeScale];
|
|
9205
|
+
StockChartConfig.elements = [BarElement, LineElement, PointElement];
|
|
9206
|
+
StockChartConfig.controllers = [BarController, LineController];
|
|
9207
|
+
StockChartConfig.plugins = [annotationPlugin, Filler, Tooltip];
|
|
9208
|
+
StockChartConfig.registeredElements = [
|
|
9209
|
+
..._a.scales,
|
|
9210
|
+
..._a.controllers,
|
|
9211
|
+
..._a.elements,
|
|
9212
|
+
..._a.plugins,
|
|
9213
|
+
];
|
|
9214
|
+
StockChartConfig.pluginsRegistered = false;
|
|
9215
|
+
StockChartConfig.baseConfig = {
|
|
9216
|
+
type: 'line',
|
|
9217
|
+
data: {
|
|
9218
|
+
datasets: [],
|
|
9219
|
+
},
|
|
9220
|
+
options: {
|
|
9221
|
+
responsive: true,
|
|
9222
|
+
animation: {
|
|
9223
|
+
duration: 0,
|
|
9224
|
+
},
|
|
9225
|
+
layout: {
|
|
9226
|
+
padding: {
|
|
9227
|
+
left: 20,
|
|
9228
|
+
right: 20,
|
|
9229
|
+
top: 30,
|
|
9230
|
+
bottom: 0,
|
|
9231
|
+
},
|
|
9232
|
+
},
|
|
9233
|
+
backgroundColor: getThemeColorRgbString('semi-light', 0.5),
|
|
9234
|
+
scales: {
|
|
9235
|
+
x: {
|
|
9236
|
+
adapters: {
|
|
9237
|
+
date: {
|
|
9238
|
+
locale: StockChartConfig.STOCK_CHART_LOCALE_DEFAULT,
|
|
9239
|
+
},
|
|
9240
|
+
},
|
|
9241
|
+
grid: {
|
|
9242
|
+
lineWidth: 0,
|
|
9243
|
+
},
|
|
9244
|
+
ticks: {
|
|
9245
|
+
maxRotation: 0,
|
|
9246
|
+
autoSkipPadding: 120,
|
|
9247
|
+
font: {
|
|
9248
|
+
size: parseInt(fontSize('xs')),
|
|
9249
|
+
},
|
|
9250
|
+
callback(tickValue) {
|
|
9251
|
+
const dateInMiliseconds = parseInt(this.getLabelForValue(parseInt(tickValue + '')));
|
|
9252
|
+
return getChartStockShortDate(dateInMiliseconds, StockChartConfig.STOCK_CHART_LOCALE_DEFAULT);
|
|
9253
|
+
},
|
|
9254
|
+
},
|
|
9255
|
+
},
|
|
9256
|
+
y: {
|
|
9257
|
+
position: 'right',
|
|
9258
|
+
display: true,
|
|
9259
|
+
grid: {
|
|
9260
|
+
drawBorder: false,
|
|
9261
|
+
},
|
|
9262
|
+
ticks: {
|
|
9263
|
+
display: true,
|
|
9264
|
+
font: {
|
|
9265
|
+
size: parseInt(fontSize('xs')),
|
|
9266
|
+
},
|
|
9267
|
+
},
|
|
9268
|
+
},
|
|
9269
|
+
},
|
|
9270
|
+
elements: {
|
|
9271
|
+
line: {
|
|
9272
|
+
tension: 0,
|
|
9273
|
+
borderWidth: 2,
|
|
9274
|
+
},
|
|
9275
|
+
point: {
|
|
9276
|
+
hitRadius: 20,
|
|
9277
|
+
radius: 0,
|
|
9278
|
+
hoverRadius: 0,
|
|
9279
|
+
hoverBorderWidth: 0,
|
|
9280
|
+
},
|
|
9281
|
+
},
|
|
9282
|
+
normalized: true,
|
|
9283
|
+
plugins: {},
|
|
9284
|
+
},
|
|
9285
|
+
};
|
|
9286
|
+
StockChartConfig.tooltipPlugin = {
|
|
9287
|
+
padding: 10,
|
|
9288
|
+
enabled: true,
|
|
9289
|
+
mode: 'index',
|
|
9290
|
+
intersect: false,
|
|
9291
|
+
backgroundColor: getThemeColorHexString$1('semi-light'),
|
|
9292
|
+
titleColor: getThemeColorHexString$1('semi-light-contrast'),
|
|
9293
|
+
bodyColor: getThemeColorHexString$1('semi-light-contrast'),
|
|
9294
|
+
caretSize: 0,
|
|
9295
|
+
bodySpacing: 5,
|
|
9296
|
+
titleSpacing: 5,
|
|
9297
|
+
borderColor: 'transparent',
|
|
9298
|
+
callbacks: {
|
|
9299
|
+
title: (toolTipItem) => {
|
|
9300
|
+
const dateInMiliseconds = parseInt(toolTipItem[0].label); // TODO: Right now we use index === 0. I expect multiple datasets will change this
|
|
9301
|
+
return getChartStockShortDateTime(dateInMiliseconds, StockChartConfig.STOCK_CHART_LOCALE_DEFAULT);
|
|
9302
|
+
},
|
|
9303
|
+
label: (context) => context.parsed.y.toString(),
|
|
9304
|
+
labelColor: (tooltipItem) => {
|
|
9305
|
+
return {
|
|
9306
|
+
backgroundColor: tooltipItem.dataset.borderColor,
|
|
9307
|
+
borderColor: getThemeColorHexString$1('semi-light'),
|
|
9308
|
+
borderWidth: 2, // This value must be exactly 2. If it is less, a white "border" will appear, if greater than, a shadow around the box will be shown.
|
|
9309
|
+
// An issue has been created, requesting a test to check this value doesn´t change: https://github.com/kirbydesign/designsystem/issues/2578
|
|
9310
|
+
};
|
|
9311
|
+
},
|
|
9312
|
+
},
|
|
9313
|
+
};
|
|
9314
|
+
StockChartConfig.dataLabelsPluginConfig = dataLabelsPluginConfig;
|
|
9315
|
+
StockChartConfig.verticalLinePluginConfig = getVerticalLinePluginConfig;
|
|
9316
|
+
StockChartConfig.getDataLabelPosition = getDataLabelPosition;
|
|
9317
|
+
const getChartStockShortDate = (dateInMiliseconds, locale) => {
|
|
9318
|
+
const newDate = new Date(dateInMiliseconds);
|
|
9319
|
+
return newDate.toLocaleDateString(locale, {
|
|
9320
|
+
day: 'numeric',
|
|
9321
|
+
month: 'short',
|
|
9322
|
+
});
|
|
9323
|
+
};
|
|
9324
|
+
const getChartStockShortDateTime = (dateInMiliseconds, locale) => {
|
|
9325
|
+
const newDate = new Date(dateInMiliseconds);
|
|
9326
|
+
return newDate.toLocaleDateString(locale, {
|
|
9327
|
+
day: 'numeric',
|
|
9328
|
+
month: 'short',
|
|
9329
|
+
hour: '2-digit',
|
|
9330
|
+
minute: '2-digit',
|
|
9331
|
+
});
|
|
9332
|
+
};
|
|
9333
|
+
|
|
9334
|
+
const { getThemeColorHexString } = ColorHelper;
|
|
9335
|
+
/**
|
|
9336
|
+
* This class is still experimental. Feel free to use it, but please note that it is still subject to breaking changes.
|
|
9337
|
+
*/
|
|
9338
|
+
class BarChartConfig extends ChartBaseConfig {
|
|
9339
|
+
}
|
|
9340
|
+
BarChartConfig.BAR_CHART_LOCALE_DEFAULT = 'en-US';
|
|
9341
|
+
BarChartConfig.baseConfig = {
|
|
9342
|
+
type: 'bar',
|
|
9343
|
+
data: {
|
|
9344
|
+
datasets: [],
|
|
9345
|
+
},
|
|
9346
|
+
options: {
|
|
9347
|
+
datasets: {
|
|
9348
|
+
bar: {
|
|
9349
|
+
barPercentage: 0.6,
|
|
9350
|
+
},
|
|
9351
|
+
line: {
|
|
9352
|
+
spanGaps: true,
|
|
9353
|
+
},
|
|
9354
|
+
},
|
|
9355
|
+
indexAxis: 'x',
|
|
9356
|
+
scales: {
|
|
9357
|
+
y: {
|
|
9358
|
+
grid: {
|
|
9359
|
+
drawBorder: false,
|
|
9360
|
+
},
|
|
9361
|
+
},
|
|
9362
|
+
x: {},
|
|
9363
|
+
},
|
|
9364
|
+
elements: {
|
|
9365
|
+
point: {
|
|
9366
|
+
radius: 0,
|
|
9367
|
+
},
|
|
9368
|
+
line: {
|
|
9369
|
+
borderColor: getThemeColorHexString('medium'),
|
|
9370
|
+
},
|
|
9371
|
+
},
|
|
9372
|
+
},
|
|
9373
|
+
};
|
|
9374
|
+
|
|
9037
9375
|
const appInitialize = (doc) => {
|
|
9038
9376
|
return () => {
|
|
9039
9377
|
defineCustomElements(doc.defaultView);
|
|
@@ -9341,5 +9679,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
9341
9679
|
* Generated bundle index. Do not edit.
|
|
9342
9680
|
*/
|
|
9343
9681
|
|
|
9344
|
-
export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AffixDirective, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, BaseChartComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DataTableModule, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, ElementAsButtonDirective, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, HorizontalDirection, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyExperimentalModule, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, ModalRouterLinkDirective, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageLocalNavigationComponent, PageModule, PageProgressComponent, PageStickyContentDirective, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, SpinnerModule, StockChartComponent, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, TabButtonComponent, TableComponent, TableRowComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleButtonModule, ToggleComponent, chartConfigHasType, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent };
|
|
9682
|
+
export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AffixDirective, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, BarChartConfig, BaseChartComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DataTableModule, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, ElementAsButtonDirective, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, HorizontalDirection, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyExperimentalModule, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, ModalRouterLinkDirective, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageLocalNavigationComponent, PageModule, PageProgressComponent, PageStickyContentDirective, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, SpinnerModule, StockChartComponent, StockChartConfig, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, TabButtonComponent, TableComponent, TableRowComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleButtonModule, ToggleComponent, chartConfigHasType, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent };
|
|
9345
9683
|
//# sourceMappingURL=kirbydesign-designsystem.mjs.map
|