@kirbydesign/designsystem 8.0.0 → 8.1.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/esm2020/button/button.component.mjs +2 -2
- package/esm2020/card/card.component.mjs +2 -2
- package/esm2020/form-field/form-field.module.mjs +5 -4
- package/esm2020/form-field/input/input.component.mjs +2 -2
- package/esm2020/form-field/textarea/textarea.component.mjs +3 -3
- package/esm2020/grid/breakpoint-helper.service.mjs +28 -0
- package/esm2020/grid/grid-card-configuration.mjs +8 -0
- package/esm2020/grid/grid.component.mjs +95 -0
- package/esm2020/grid/kirbydesign-designsystem-grid.mjs +5 -0
- package/esm2020/grid/public_api.mjs +4 -0
- package/esm2020/icon/kirby-icon-settings.mjs +5 -1
- package/esm2020/lib/components/index.mjs +1 -4
- package/esm2020/lib/components/segmented-control/segmented-control.component.mjs +3 -3
- package/esm2020/lib/index.mjs +3 -1
- package/esm2020/lib/kirby.module.mjs +13 -11
- package/esm2020/list/list-item/list-item.component.mjs +2 -2
- package/esm2020/list/list.component.mjs +2 -2
- package/esm2020/modal/experimental/footer/footer.component.mjs +2 -2
- package/esm2020/modal/experimental/kirby-modal.module.mjs +5 -5
- package/esm2020/modal/experimental/modal/modal.component.mjs +72 -0
- package/esm2020/modal/experimental/public_api.mjs +2 -2
- package/esm2020/modal/modal/footer/modal-footer.component.mjs +3 -3
- package/esm2020/page/page-footer/page-footer.component.mjs +2 -2
- package/esm2020/testing-jasmine/lib/mock-providers.mjs +3 -2
- package/esm2020/testing-jest/lib/mock-providers.mjs +3 -2
- package/esm2020/toast/config/toast-config.mjs +2 -0
- package/esm2020/toast/kirbydesign-designsystem-toast.mjs +5 -0
- package/esm2020/toast/public_api.mjs +4 -0
- package/esm2020/toast/services/indexs.mjs +3 -0
- package/esm2020/toast/services/toast.controller.mjs +22 -0
- package/esm2020/toast/services/toast.helper.mjs +39 -0
- package/fesm2015/kirbydesign-designsystem-button.mjs +2 -2
- package/fesm2015/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-card.mjs +2 -2
- package/fesm2015/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-form-field.mjs +7 -7
- package/fesm2015/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-grid.mjs +134 -0
- package/fesm2015/kirbydesign-designsystem-grid.mjs.map +1 -0
- package/fesm2015/kirbydesign-designsystem-icon.mjs +4 -0
- package/fesm2015/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2015/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-modal-experimental.mjs +11 -11
- package/fesm2015/kirbydesign-designsystem-modal-experimental.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-modal.mjs +2 -2
- package/fesm2015/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-page.mjs +2 -2
- package/fesm2015/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs +2 -1
- package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-testing-jest.mjs +2 -1
- package/fesm2015/kirbydesign-designsystem-testing-jest.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-toast.mjs +66 -0
- package/fesm2015/kirbydesign-designsystem-toast.mjs.map +1 -0
- package/fesm2015/kirbydesign-designsystem.mjs +24 -197
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-button.mjs +2 -2
- package/fesm2020/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-card.mjs +2 -2
- package/fesm2020/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-form-field.mjs +7 -7
- package/fesm2020/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-grid.mjs +134 -0
- package/fesm2020/kirbydesign-designsystem-grid.mjs.map +1 -0
- package/fesm2020/kirbydesign-designsystem-icon.mjs +4 -0
- package/fesm2020/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2020/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-modal-experimental.mjs +11 -11
- package/fesm2020/kirbydesign-designsystem-modal-experimental.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-modal.mjs +2 -2
- package/fesm2020/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-page.mjs +2 -2
- package/fesm2020/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs +2 -1
- package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-jest.mjs +2 -1
- package/fesm2020/kirbydesign-designsystem-testing-jest.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-toast.mjs +63 -0
- package/fesm2020/kirbydesign-designsystem-toast.mjs.map +1 -0
- package/fesm2020/kirbydesign-designsystem.mjs +24 -194
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/form-field/form-field.module.d.ts +2 -1
- package/{lib/components/grid → grid}/breakpoint-helper.service.d.ts +0 -0
- package/{lib/components/grid → grid}/grid-card-configuration.d.ts +0 -0
- package/{lib/components/grid → grid}/grid.component.d.ts +1 -1
- package/grid/index.d.ts +5 -0
- package/grid/public_api.d.ts +3 -0
- package/icons/svg/air-balloon.svg +3 -0
- package/icons/svg/banknotes.svg +4 -0
- package/icons/svg/business.svg +3 -0
- package/icons/svg/piggybank.svg +3 -0
- package/lib/components/index.d.ts +0 -3
- package/lib/index.d.ts +2 -0
- package/lib/kirby.module.d.ts +26 -26
- package/modal/experimental/kirby-modal.module.d.ts +2 -2
- package/modal/experimental/{fullscreen/fullscreen.component.d.ts → modal/modal.component.d.ts} +3 -3
- package/modal/experimental/public_api.d.ts +1 -1
- package/package.json +18 -2
- package/testing-jasmine/lib/mock-providers.d.ts +2 -1
- package/testing-jest/lib/mock-providers.d.ts +2 -1
- package/{lib/components/toast → toast}/config/toast-config.d.ts +0 -0
- package/toast/index.d.ts +5 -0
- package/{lib/components/toast/index.d.ts → toast/public_api.d.ts} +1 -0
- package/toast/services/indexs.d.ts +2 -0
- package/{lib/components/toast → toast}/services/toast.controller.d.ts +0 -0
- package/{lib/components/toast → toast}/services/toast.helper.d.ts +0 -0
- package/esm2020/lib/components/grid/breakpoint-helper.service.mjs +0 -28
- package/esm2020/lib/components/grid/grid-card-configuration.mjs +0 -8
- package/esm2020/lib/components/grid/grid.component.mjs +0 -97
- package/esm2020/lib/components/toast/config/toast-config.mjs +0 -2
- package/esm2020/lib/components/toast/index.mjs +0 -3
- package/esm2020/lib/components/toast/services/toast.controller.mjs +0 -22
- package/esm2020/lib/components/toast/services/toast.helper.mjs +0 -39
- package/esm2020/modal/experimental/fullscreen/fullscreen.component.mjs +0 -72
|
@@ -59,10 +59,10 @@ export class ButtonComponent {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
/** @nocollapse */ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", 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.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);box-shadow:var(--kirby-interactive-elevation);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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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);box-shadow:none}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var( --kirby-interactive-element-background-color, var(--kirby-white) );--kirby-button-color: var(--kirby-interactive-element-color, var(--kirby-black))}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}: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(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);box-shadow:none}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var( --kirby-interactive-element-background-color, var(--kirby-white) );--kirby-button-color: var(--kirby-interactive-element-color, var(--kirby-black))}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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 });
|
|
62
|
+
/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", 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.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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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)}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}: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(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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 });
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
|
-
args: [{ standalone: true, 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);box-shadow:var(--kirby-interactive-elevation);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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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);box-shadow:none}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var( --kirby-interactive-element-background-color, var(--kirby-white) );--kirby-button-color: var(--kirby-interactive-element-color, var(--kirby-black))}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}: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(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);box-shadow:none}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var( --kirby-interactive-element-background-color, var(--kirby-white) );--kirby-button-color: var(--kirby-interactive-element-color, var(--kirby-black))}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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"] }]
|
|
65
|
+
args: [{ standalone: true, 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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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)}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}: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(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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"] }]
|
|
66
66
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isAttentionLevel1: [{
|
|
67
67
|
type: HostBinding,
|
|
68
68
|
args: ['class.attention-level1']
|
|
@@ -52,10 +52,10 @@ export class CardComponent {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
/** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
-
/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-
|
|
55
|
+
/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50)}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .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[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] });
|
|
56
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
|
-
args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-
|
|
58
|
+
args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50)}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .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[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
|
|
59
59
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
|
|
60
60
|
type: Input
|
|
61
61
|
}], subtitle: [{
|
|
@@ -3,19 +3,20 @@ import { NgModule } from '@angular/core';
|
|
|
3
3
|
import { FormFieldMessageComponent } from './form-field-message/form-field-message.component';
|
|
4
4
|
import { FormFieldComponent } from './form-field.component';
|
|
5
5
|
import { InputCounterComponent } from './input-counter/input-counter.component';
|
|
6
|
+
import { DecimalMaskDirective } from './directives/decimal-mask/decimal-mask.directive';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
const declarations = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
|
|
8
9
|
export class FormFieldModule {
|
|
9
10
|
}
|
|
10
11
|
/** @nocollapse */ FormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
11
|
-
/** @nocollapse */ FormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent] });
|
|
12
|
+
/** @nocollapse */ FormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective] });
|
|
12
13
|
/** @nocollapse */ FormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFieldModule, imports: [CommonModule] });
|
|
13
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFieldModule, decorators: [{
|
|
14
15
|
type: NgModule,
|
|
15
16
|
args: [{
|
|
16
|
-
imports: [CommonModule],
|
|
17
|
+
imports: [CommonModule, DecimalMaskDirective],
|
|
17
18
|
declarations: [...declarations],
|
|
18
|
-
exports: [...declarations],
|
|
19
|
+
exports: [...declarations, DecimalMaskDirective],
|
|
19
20
|
}]
|
|
20
21
|
}] });
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9mb3JtLWZpZWxkL3NyYy9mb3JtLWZpZWxkLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxtREFBbUQsQ0FBQztBQUM5RixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM1RCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUNoRixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrREFBa0QsQ0FBQzs7QUFFeEYsTUFBTSxZQUFZLEdBQUcsQ0FBQyxrQkFBa0IsRUFBRSx5QkFBeUIsRUFBRSxxQkFBcUIsQ0FBQyxDQUFDO0FBTzVGLE1BQU0sT0FBTyxlQUFlOzsrSEFBZixlQUFlO2dJQUFmLGVBQWUsaUJBUE4sa0JBQWtCLEVBQUUseUJBQXlCLEVBQUUscUJBQXFCLGFBRzlFLFlBQVksRUFBRSxvQkFBb0IsYUFIeEIsa0JBQWtCLEVBQUUseUJBQXlCLEVBQUUscUJBQXFCLEVBSzdELG9CQUFvQjtnSUFFcEMsZUFBZSxZQUpoQixZQUFZOzJGQUlYLGVBQWU7a0JBTDNCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLG9CQUFvQixDQUFDO29CQUM3QyxZQUFZLEVBQUUsQ0FBQyxHQUFHLFlBQVksQ0FBQztvQkFDL0IsT0FBTyxFQUFFLENBQUMsR0FBRyxZQUFZLEVBQUUsb0JBQW9CLENBQUM7aUJBQ2pEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtRmllbGRNZXNzYWdlQ29tcG9uZW50IH0gZnJvbSAnLi9mb3JtLWZpZWxkLW1lc3NhZ2UvZm9ybS1maWVsZC1tZXNzYWdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGb3JtRmllbGRDb21wb25lbnQgfSBmcm9tICcuL2Zvcm0tZmllbGQuY29tcG9uZW50JztcbmltcG9ydCB7IElucHV0Q291bnRlckNvbXBvbmVudCB9IGZyb20gJy4vaW5wdXQtY291bnRlci9pbnB1dC1jb3VudGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEZWNpbWFsTWFza0RpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9kZWNpbWFsLW1hc2svZGVjaW1hbC1tYXNrLmRpcmVjdGl2ZSc7XG5cbmNvbnN0IGRlY2xhcmF0aW9ucyA9IFtGb3JtRmllbGRDb21wb25lbnQsIEZvcm1GaWVsZE1lc3NhZ2VDb21wb25lbnQsIElucHV0Q291bnRlckNvbXBvbmVudF07XG5cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIERlY2ltYWxNYXNrRGlyZWN0aXZlXSxcbiAgZGVjbGFyYXRpb25zOiBbLi4uZGVjbGFyYXRpb25zXSxcbiAgZXhwb3J0czogWy4uLmRlY2xhcmF0aW9ucywgRGVjaW1hbE1hc2tEaXJlY3RpdmVdLFxufSlcbmV4cG9ydCBjbGFzcyBGb3JtRmllbGRNb2R1bGUge31cbiJdfQ==
|
|
@@ -36,10 +36,10 @@ InputComponent.typeToInputmodeMap = {
|
|
|
36
36
|
search: 'search',
|
|
37
37
|
};
|
|
38
38
|
/** @nocollapse */ InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
/** @nocollapse */ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-
|
|
39
|
+
/** @nocollapse */ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}:host{transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: InputComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
|
-
args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-
|
|
42
|
+
args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}:host{transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
|
|
43
43
|
}], propDecorators: { type: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}], size: [{
|
|
@@ -22,10 +22,10 @@ export class TextareaComponent {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
/** @nocollapse */ TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
/** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-
|
|
25
|
+
/** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}:host{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-
|
|
28
|
+
args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}:host{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
|
|
29
29
|
}], propDecorators: { value: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], borderless: [{
|
|
@@ -63,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
63
63
|
type: HostListener,
|
|
64
64
|
args: ['cut', ['$event.target']]
|
|
65
65
|
}] } });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vZm9ybS1maWVsZC9zcmMvdGV4dGFyZWEvdGV4dGFyZWEuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vZm9ybS1maWVsZC9zcmMvdGV4dGFyZWEvdGV4dGFyZWEuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsWUFBWSxFQUNaLEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQzs7O0FBV3ZCLE1BQU0sT0FBTyxpQkFBaUI7SUFUOUI7UUFVRSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFpQnpDLGlCQUFZLEdBQWlCLEtBQUssQ0FBQztRQUluQyxnQkFBVyxHQUFpQixLQUFLLENBQUM7S0F1Qm5DO0lBaEJDLFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9CLENBQUM7SUFJRCxXQUFXLENBQUMsTUFBd0I7UUFDbEMsdURBQXVEO1FBQ3ZELFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLEtBQUssRUFBRTtZQUNqQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ25EO0lBQ0gsQ0FBQzs7aUlBNUNVLGlCQUFpQjtxSEFBakIsaUJBQWlCLG1tQkNyQjlCLHdHQUVBLDB1RERZWSxZQUFZOzJGQU9YLGlCQUFpQjtrQkFUN0IsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsbUJBQ04sdUJBQXVCLENBQUMsTUFBTSxZQUVyQywwQkFBMEI7OEJBTzNCLEtBQUs7c0JBQWIsS0FBSztnQkFPTixVQUFVO3NCQUZULFdBQVc7dUJBQUMsa0JBQWtCOztzQkFDOUIsS0FBSztnQkFLTixRQUFRO3NCQUZQLFdBQVc7dUJBQUMsYUFBYTs7c0JBQ3pCLEtBQUs7Z0JBS04sWUFBWTtzQkFGWCxXQUFXO3VCQUFDLG1CQUFtQjs7c0JBQy9CLEtBQUs7Z0JBS04sV0FBVztzQkFGVixXQUFXO3VCQUFDLGtCQUFrQjs7c0JBQzlCLEtBQUs7Z0JBS04sU0FBUztzQkFGUixXQUFXO3VCQUFDLGdCQUFnQjs7c0JBQzVCLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2dCQU85QyxXQUFXO3NCQUZWLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsZUFBZSxDQUFDOztzQkFDdkMsWUFBWTt1QkFBQyxLQUFLLEVBQUUsQ0FBQyxlQUFlLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0QmluZGluZyxcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICd0ZXh0YXJlYVtraXJieS10ZXh0YXJlYV0nLFxuICBzdHlsZVVybHM6IFsnLi90ZXh0YXJlYS5jb21wb25lbnQuc2NzcyddLFxuICB0ZW1wbGF0ZVVybDogJy4vdGV4dGFyZWEuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0YXJlYUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIGtpcmJ5Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZztcblxuICAvKipcbiAgICogUmVtb3ZlcyBwYWRkaW5nLCB3aWR0aCwgcm91bmRlZCBib3JkZXJzIGFuZCBkcm9wLXNoYWRvdyB3aGVuIHNldCB0byBgdHJ1ZWAuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJvcmRlcmxlc3MnKVxuICBASW5wdXQoKVxuICBib3JkZXJsZXNzOiBib29sZWFuO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZXJyb3InKVxuICBASW5wdXQoKVxuICBoYXNFcnJvcjogYm9vbGVhbjtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXV0b2NvbXBsZXRlJylcbiAgQElucHV0KClcbiAgYXV0b2NvbXBsZXRlOiAnb24nIHwgJ29mZicgPSAnb2ZmJztcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXV0b2NvcnJlY3QnKVxuICBASW5wdXQoKVxuICBhdXRvY29ycmVjdDogJ29uJyB8ICdvZmYnID0gJ29mZic7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLm1heGxlbmd0aCcpXG4gIEBJbnB1dCgpXG4gIG1heGxlbmd0aDogbnVtYmVyO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleXVwJywgWyckZXZlbnQudGFyZ2V0LnZhbHVlJ10pXG4gIF9vbktleVVwKHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLmtpcmJ5Q2hhbmdlLmVtaXQodmFsdWUpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcigncGFzdGUnLCBbJyRldmVudC50YXJnZXQnXSlcbiAgQEhvc3RMaXN0ZW5lcignY3V0JywgWyckZXZlbnQudGFyZ2V0J10pXG4gIF9vbkN1dFBhc3RlKHRhcmdldDogSFRNTElucHV0RWxlbWVudCkge1xuICAgIC8vVmFsdWUgb2YgdGV4dGFyZWEgZWxlbWVudCBpcyB1cGRhdGVkIGFmdGVyIGN1dC9wYXN0ZTpcbiAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMua2lyYnlDaGFuZ2UuZW1pdCh0YXJnZXQudmFsdWUpKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy52YWx1ZSkge1xuICAgICAgdGhpcy5raXJieUNoYW5nZS5lbWl0KGNoYW5nZXMudmFsdWUuY3VycmVudFZhbHVlKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50ICpuZ0lmPVwiIXZhbHVlXCI+PC9uZy1jb250ZW50PlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInZhbHVlXCI+e3sgdmFsdWUgfX08L25nLWNvbnRhaW5lcj5cbiJdfQ==
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Injectable } from '@angular/core';
|
|
2
|
+
import { Subject } from 'rxjs';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class BreakpointHelperService {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.orientationChangedSubject = new Subject();
|
|
7
|
+
this.init();
|
|
8
|
+
}
|
|
9
|
+
init() {
|
|
10
|
+
// TODO JEO: Implement Angular/CDK BreakpointObserver:
|
|
11
|
+
this.orientationChangedSubject.next();
|
|
12
|
+
}
|
|
13
|
+
observe() {
|
|
14
|
+
return this.orientationChangedSubject.asObservable();
|
|
15
|
+
}
|
|
16
|
+
ngOnDestroy() {
|
|
17
|
+
this.orientationChangedSubject.complete();
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
/** @nocollapse */ BreakpointHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreakpointHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
21
|
+
/** @nocollapse */ BreakpointHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreakpointHelperService, providedIn: 'root' });
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreakpointHelperService, decorators: [{
|
|
23
|
+
type: Injectable,
|
|
24
|
+
args: [{
|
|
25
|
+
providedIn: 'root',
|
|
26
|
+
}]
|
|
27
|
+
}], ctorParameters: function () { return []; } });
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWtwb2ludC1oZWxwZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2dyaWQvc3JjL2JyZWFrcG9pbnQtaGVscGVyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUN0RCxPQUFPLEVBQWMsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDOztBQUszQyxNQUFNLE9BQU8sdUJBQXVCO0lBSWxDO1FBRlEsOEJBQXlCLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUd0RCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDZCxDQUFDO0lBRU8sSUFBSTtRQUNWLHNEQUFzRDtRQUN0RCxJQUFJLENBQUMseUJBQXlCLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVELE9BQU87UUFDTCxPQUFPLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN2RCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM1QyxDQUFDOzt1SUFuQlUsdUJBQXVCOzJJQUF2Qix1QkFBdUIsY0FGdEIsTUFBTTsyRkFFUCx1QkFBdUI7a0JBSG5DLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxufSlcbmV4cG9ydCBjbGFzcyBCcmVha3BvaW50SGVscGVyU2VydmljZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIGN1cnJlbnRTY3JlZW5XaWR0aDogODAwO1xuICBwcml2YXRlIG9yaWVudGF0aW9uQ2hhbmdlZFN1YmplY3QgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuaW5pdCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBpbml0KCkge1xuICAgIC8vIFRPRE8gSkVPOiBJbXBsZW1lbnQgQW5ndWxhci9DREsgQnJlYWtwb2ludE9ic2VydmVyOlxuICAgIHRoaXMub3JpZW50YXRpb25DaGFuZ2VkU3ViamVjdC5uZXh0KCk7XG4gIH1cblxuICBvYnNlcnZlKCk6IE9ic2VydmFibGU8dm9pZD4ge1xuICAgIHJldHVybiB0aGlzLm9yaWVudGF0aW9uQ2hhbmdlZFN1YmplY3QuYXNPYnNlcnZhYmxlKCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLm9yaWVudGF0aW9uQ2hhbmdlZFN1YmplY3QuY29tcGxldGUoKTtcbiAgfVxufVxuIl19
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export class GridCardConfiguration {
|
|
2
|
+
constructor(component, data, preferredSize) {
|
|
3
|
+
this.component = component;
|
|
4
|
+
this.data = data;
|
|
5
|
+
this.preferredSize = preferredSize;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1jYXJkLWNvbmZpZ3VyYXRpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9ncmlkL3NyYy9ncmlkLWNhcmQtY29uZmlndXJhdGlvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQSxNQUFNLE9BQU8scUJBQXFCO0lBQ2hDLFlBQW1CLFNBQW9CLEVBQVMsSUFBUyxFQUFTLGFBQXFCO1FBQXBFLGNBQVMsR0FBVCxTQUFTLENBQVc7UUFBUyxTQUFJLEdBQUosSUFBSSxDQUFLO1FBQVMsa0JBQWEsR0FBYixhQUFhLENBQVE7SUFBRyxDQUFDO0NBQzVGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVHlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tcG9uZW50Q29uZmlndXJhdGlvbiB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vc2hhcmVkJztcblxuZXhwb3J0IGNsYXNzIEdyaWRDYXJkQ29uZmlndXJhdGlvbiBpbXBsZW1lbnRzIENvbXBvbmVudENvbmZpZ3VyYXRpb24ge1xuICBjb25zdHJ1Y3RvcihwdWJsaWMgY29tcG9uZW50OiBUeXBlPGFueT4sIHB1YmxpYyBkYXRhOiBhbnksIHB1YmxpYyBwcmVmZXJyZWRTaXplOiBudW1iZXIpIHt9XG59XG4iXX0=
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Component, HostBinding, Input } from '@angular/core';
|
|
2
|
+
import { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';
|
|
3
|
+
import { BreakpointHelperService } from './breakpoint-helper.service';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "./breakpoint-helper.service";
|
|
6
|
+
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';
|
|
7
|
+
class GridCard {
|
|
8
|
+
constructor(configuration, row, col, colSpan) {
|
|
9
|
+
this.configuration = configuration;
|
|
10
|
+
this.row = row;
|
|
11
|
+
this.col = col;
|
|
12
|
+
this.colSpan = colSpan;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
export class GridComponent {
|
|
16
|
+
constructor(breakpointHelper) {
|
|
17
|
+
this.breakpointHelper = breakpointHelper;
|
|
18
|
+
this.cards = [];
|
|
19
|
+
console.warn(GRID_DEPRICATION_WARNING);
|
|
20
|
+
}
|
|
21
|
+
set cardConfigurations(cardConfigurations) {
|
|
22
|
+
this.cardConfigs = cardConfigurations;
|
|
23
|
+
// TODO TRM/JEO Remove this when breakpoint observe something something...
|
|
24
|
+
this.configureGrid();
|
|
25
|
+
}
|
|
26
|
+
configureGrid() {
|
|
27
|
+
let calculatedMaxColumns = 0;
|
|
28
|
+
if (this.maxColumns === undefined) {
|
|
29
|
+
calculatedMaxColumns =
|
|
30
|
+
this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
calculatedMaxColumns = this.maxColumns;
|
|
34
|
+
}
|
|
35
|
+
this.cards = [];
|
|
36
|
+
let columnCounter = 0;
|
|
37
|
+
let currentRow = 0;
|
|
38
|
+
let currentColumn = 0;
|
|
39
|
+
this.cardConfigs.forEach((card, index) => {
|
|
40
|
+
// Cards colspan is added to the column counter
|
|
41
|
+
columnCounter += card.preferredSize;
|
|
42
|
+
// If only maxColumns are set to 1, just add all cards with a colspan of 1
|
|
43
|
+
if (calculatedMaxColumns === 1) {
|
|
44
|
+
this.cards.push(new GridCard(card, currentRow, currentColumn, 1));
|
|
45
|
+
currentRow += 1;
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
// If we are below maxColumns, then add the card to the array
|
|
49
|
+
if (columnCounter <= calculatedMaxColumns) {
|
|
50
|
+
this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));
|
|
51
|
+
// Update currentColumn, so the next card will be placed correctly
|
|
52
|
+
currentColumn += card.preferredSize;
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
// The new card didn't fit - Calculate remaining columns for previous card
|
|
56
|
+
const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);
|
|
57
|
+
const prevCard = this.cards[index - 1];
|
|
58
|
+
// Add the restColumns to the previous cards colspan, to make it span out
|
|
59
|
+
prevCard.colSpan = restColumns + prevCard.colSpan;
|
|
60
|
+
// We are now on a new row
|
|
61
|
+
currentRow += 1;
|
|
62
|
+
currentColumn = 0;
|
|
63
|
+
this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));
|
|
64
|
+
// Update currentColumn to match the size of the new card and reset columnCounter
|
|
65
|
+
currentColumn = card.preferredSize;
|
|
66
|
+
columnCounter = card.preferredSize;
|
|
67
|
+
}
|
|
68
|
+
// If we on the last card, make sure it spans all the rest of the columns
|
|
69
|
+
if (this.cardConfigs.length - 1 === index) {
|
|
70
|
+
const restColumns = calculatedMaxColumns - columnCounter;
|
|
71
|
+
const currentCard = this.cards[index];
|
|
72
|
+
currentCard.colSpan += restColumns;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
ngOnDestroy() {
|
|
77
|
+
if (this.breakpointSubscription) {
|
|
78
|
+
this.breakpointSubscription.unsubscribe();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
/** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, deps: [{ token: i1.BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
+
/** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] });
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, decorators: [{
|
|
85
|
+
type: Component,
|
|
86
|
+
args: [{ standalone: true, selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
|
|
87
|
+
}], ctorParameters: function () { return [{ type: i1.BreakpointHelperService }]; }, propDecorators: { maxColumns: [{
|
|
88
|
+
type: HostBinding,
|
|
89
|
+
args: ['attr.max-columns']
|
|
90
|
+
}, {
|
|
91
|
+
type: Input
|
|
92
|
+
}], cardConfigurations: [{
|
|
93
|
+
type: Input
|
|
94
|
+
}] } });
|
|
95
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9ncmlkL3NyYy9ncmlkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2dyaWQvc3JjL2dyaWQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUdwRSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7O0FBR3RFLE1BQU0sd0JBQXdCLEdBQzVCLG1RQUFtUSxDQUFDO0FBRXRRLE1BQU0sUUFBUTtJQU1aLFlBQVksYUFBb0MsRUFBRSxHQUFXLEVBQUUsR0FBVyxFQUFFLE9BQWU7UUFDekYsSUFBSSxDQUFDLGFBQWEsR0FBRyxhQUFhLENBQUM7UUFDbkMsSUFBSSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7UUFDZixJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztRQUNmLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO0lBQ3pCLENBQUM7Q0FDRjtBQVFELE1BQU0sT0FBTyxhQUFhO0lBZ0J4QixZQUFvQixnQkFBeUM7UUFBekMscUJBQWdCLEdBQWhCLGdCQUFnQixDQUF5QjtRQWQ3RCxVQUFLLEdBQWUsRUFBRSxDQUFDO1FBZXJCLE9BQU8sQ0FBQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBVEQsSUFDSSxrQkFBa0IsQ0FBQyxrQkFBMkM7UUFDaEUsSUFBSSxDQUFDLFdBQVcsR0FBRyxrQkFBa0IsQ0FBQztRQUN0QywwRUFBMEU7UUFDMUUsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFNRCxhQUFhO1FBQ1gsSUFBSSxvQkFBb0IsR0FBRyxDQUFDLENBQUM7UUFDN0IsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLFNBQVMsRUFBRTtZQUNqQyxvQkFBb0I7Z0JBQ2xCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsSUFBSSxVQUFVLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQ3RGO2FBQU07WUFDTCxvQkFBb0IsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDO1NBQ3hDO1FBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsSUFBSSxhQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQ3RCLElBQUksVUFBVSxHQUFHLENBQUMsQ0FBQztRQUNuQixJQUFJLGFBQWEsR0FBRyxDQUFDLENBQUM7UUFFdEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUU7WUFDdkMsK0NBQStDO1lBQy9DLGFBQWEsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDO1lBQ3BDLDBFQUEwRTtZQUMxRSxJQUFJLG9CQUFvQixLQUFLLENBQUMsRUFBRTtnQkFDOUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxRQUFRLENBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDbEUsVUFBVSxJQUFJLENBQUMsQ0FBQztnQkFDaEIsT0FBTzthQUNSO1lBQ0QsNkRBQTZEO1lBQzdELElBQUksYUFBYSxJQUFJLG9CQUFvQixFQUFFO2dCQUN6QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLFFBQVEsQ0FBQyxJQUFJLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztnQkFDbkYsa0VBQWtFO2dCQUNsRSxhQUFhLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQzthQUNyQztpQkFBTTtnQkFDTCwwRUFBMEU7Z0JBQzFFLE1BQU0sV0FBVyxHQUFHLG9CQUFvQixHQUFHLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztnQkFDaEYsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7Z0JBQ3ZDLHlFQUF5RTtnQkFDekUsUUFBUSxDQUFDLE9BQU8sR0FBRyxXQUFXLEdBQUcsUUFBUSxDQUFDLE9BQU8sQ0FBQztnQkFDbEQsMEJBQTBCO2dCQUMxQixVQUFVLElBQUksQ0FBQyxDQUFDO2dCQUNoQixhQUFhLEdBQUcsQ0FBQyxDQUFDO2dCQUNsQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLFFBQVEsQ0FBQyxJQUFJLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztnQkFDbkYsaUZBQWlGO2dCQUNqRixhQUFhLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztnQkFDbkMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7YUFDcEM7WUFDRCx5RUFBeUU7WUFDekUsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sR0FBRyxDQUFDLEtBQUssS0FBSyxFQUFFO2dCQUN6QyxNQUFNLFdBQVcsR0FBRyxvQkFBb0IsR0FBRyxhQUFhLENBQUM7Z0JBQ3pELE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ3RDLFdBQVcsQ0FBQyxPQUFPLElBQUksV0FBVyxDQUFDO2FBQ3BDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLHNCQUFzQixFQUFFO1lBQy9CLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMzQztJQUNILENBQUM7OzZIQTFFVSxhQUFhO2lIQUFiLGFBQWEsdU5DOUIxQix5TUFNQTsyRkR3QmEsYUFBYTtrQkFOekIsU0FBUztpQ0FDSSxJQUFJLFlBQ04sWUFBWTs4R0FXdEIsVUFBVTtzQkFGVCxXQUFXO3VCQUFDLGtCQUFrQjs7c0JBQzlCLEtBQUs7Z0JBSUYsa0JBQWtCO3NCQURyQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2Nzc0hlbHBlciB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vaGVscGVycy9zY3NzJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQgeyBCcmVha3BvaW50SGVscGVyU2VydmljZSB9IGZyb20gJy4vYnJlYWtwb2ludC1oZWxwZXIuc2VydmljZSc7XG5pbXBvcnQgeyBHcmlkQ2FyZENvbmZpZ3VyYXRpb24gfSBmcm9tICcuL2dyaWQtY2FyZC1jb25maWd1cmF0aW9uJztcblxuY29uc3QgR1JJRF9ERVBSSUNBVElPTl9XQVJOSU5HID1cbiAgJ0RlcHJlY2F0aW9uIHdhcm5pbmc6IFRoZSBcImtpcmJ5LWdyaWRcIiBjb21wb25lbnQgd2lsbCBiZSByZW1vdmVkIGluIGEgZnV0dXJlIHJlbGVhc2Ugb2YgS2lyYnkgZGVzaWduc3lzdGVtLiBDb25zaWRlciB1c2luZyBraXJieS1ncmlkLCBraXJieS1ncmlkLWl0ZW0gY3NzLWNsYXNzZXMgYXMgYW4gYWx0ZXJuYXRpdmUgc29sdXRpb24uIFNlZSBncmlkIGRvY3MgYXQgaHR0cHM6Ly9jb29rYm9vay5raXJieS5kZXNpZ24vIy9ob21lL3Nob3djYXNlL2dyaWQnO1xuXG5jbGFzcyBHcmlkQ2FyZCB7XG4gIGNvbmZpZ3VyYXRpb246IEdyaWRDYXJkQ29uZmlndXJhdGlvbjtcbiAgcm93OiBudW1iZXI7XG4gIGNvbDogbnVtYmVyO1xuICBjb2xTcGFuOiBudW1iZXI7XG5cbiAgY29uc3RydWN0b3IoY29uZmlndXJhdGlvbjogR3JpZENhcmRDb25maWd1cmF0aW9uLCByb3c6IG51bWJlciwgY29sOiBudW1iZXIsIGNvbFNwYW46IG51bWJlcikge1xuICAgIHRoaXMuY29uZmlndXJhdGlvbiA9IGNvbmZpZ3VyYXRpb247XG4gICAgdGhpcy5yb3cgPSByb3c7XG4gICAgdGhpcy5jb2wgPSBjb2w7XG4gICAgdGhpcy5jb2xTcGFuID0gY29sU3BhbjtcbiAgfVxufVxuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdraXJieS1ncmlkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyaWQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmlkLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEdyaWRDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBjYXJkQ29uZmlnczogR3JpZENhcmRDb25maWd1cmF0aW9uW107XG4gIGNhcmRzOiBHcmlkQ2FyZFtdID0gW107XG4gIHByaXZhdGUgYnJlYWtwb2ludFN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5tYXgtY29sdW1ucycpXG4gIEBJbnB1dCgpXG4gIG1heENvbHVtbnM6IG51bWJlcjtcblxuICBASW5wdXQoKVxuICBzZXQgY2FyZENvbmZpZ3VyYXRpb25zKGNhcmRDb25maWd1cmF0aW9uczogR3JpZENhcmRDb25maWd1cmF0aW9uW10pIHtcbiAgICB0aGlzLmNhcmRDb25maWdzID0gY2FyZENvbmZpZ3VyYXRpb25zO1xuICAgIC8vIFRPRE8gVFJNL0pFTyBSZW1vdmUgdGhpcyB3aGVuIGJyZWFrcG9pbnQgb2JzZXJ2ZSBzb21ldGhpbmcgc29tZXRoaW5nLi4uXG4gICAgdGhpcy5jb25maWd1cmVHcmlkKCk7XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGJyZWFrcG9pbnRIZWxwZXI6IEJyZWFrcG9pbnRIZWxwZXJTZXJ2aWNlKSB7XG4gICAgY29uc29sZS53YXJuKEdSSURfREVQUklDQVRJT05fV0FSTklORyk7XG4gIH1cblxuICBjb25maWd1cmVHcmlkKCkge1xuICAgIGxldCBjYWxjdWxhdGVkTWF4Q29sdW1ucyA9IDA7XG4gICAgaWYgKHRoaXMubWF4Q29sdW1ucyA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBjYWxjdWxhdGVkTWF4Q29sdW1ucyA9XG4gICAgICAgIHRoaXMuYnJlYWtwb2ludEhlbHBlci5jdXJyZW50U2NyZWVuV2lkdGggPj0gU2Nzc0hlbHBlci5CUkVBS1BPSU5UX1NDUkVFTl9MID8gMiA6IDE7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNhbGN1bGF0ZWRNYXhDb2x1bW5zID0gdGhpcy5tYXhDb2x1bW5zO1xuICAgIH1cbiAgICB0aGlzLmNhcmRzID0gW107XG4gICAgbGV0IGNvbHVtbkNvdW50ZXIgPSAwO1xuICAgIGxldCBjdXJyZW50Um93ID0gMDtcbiAgICBsZXQgY3VycmVudENvbHVtbiA9IDA7XG5cbiAgICB0aGlzLmNhcmRDb25maWdzLmZvckVhY2goKGNhcmQsIGluZGV4KSA9PiB7XG4gICAgICAvLyBDYXJkcyBjb2xzcGFuIGlzIGFkZGVkIHRvIHRoZSBjb2x1bW4gY291bnRlclxuICAgICAgY29sdW1uQ291bnRlciArPSBjYXJkLnByZWZlcnJlZFNpemU7XG4gICAgICAvLyBJZiBvbmx5IG1heENvbHVtbnMgYXJlIHNldCB0byAxLCBqdXN0IGFkZCBhbGwgY2FyZHMgd2l0aCBhIGNvbHNwYW4gb2YgMVxuICAgICAgaWYgKGNhbGN1bGF0ZWRNYXhDb2x1bW5zID09PSAxKSB7XG4gICAgICAgIHRoaXMuY2FyZHMucHVzaChuZXcgR3JpZENhcmQoY2FyZCwgY3VycmVudFJvdywgY3VycmVudENvbHVtbiwgMSkpO1xuICAgICAgICBjdXJyZW50Um93ICs9IDE7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIC8vIElmIHdlIGFyZSBiZWxvdyBtYXhDb2x1bW5zLCB0aGVuIGFkZCB0aGUgY2FyZCB0byB0aGUgYXJyYXlcbiAgICAgIGlmIChjb2x1bW5Db3VudGVyIDw9IGNhbGN1bGF0ZWRNYXhDb2x1bW5zKSB7XG4gICAgICAgIHRoaXMuY2FyZHMucHVzaChuZXcgR3JpZENhcmQoY2FyZCwgY3VycmVudFJvdywgY3VycmVudENvbHVtbiwgY2FyZC5wcmVmZXJyZWRTaXplKSk7XG4gICAgICAgIC8vIFVwZGF0ZSBjdXJyZW50Q29sdW1uLCBzbyB0aGUgbmV4dCBjYXJkIHdpbGwgYmUgcGxhY2VkIGNvcnJlY3RseVxuICAgICAgICBjdXJyZW50Q29sdW1uICs9IGNhcmQucHJlZmVycmVkU2l6ZTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIFRoZSBuZXcgY2FyZCBkaWRuJ3QgZml0IC0gQ2FsY3VsYXRlIHJlbWFpbmluZyBjb2x1bW5zIGZvciBwcmV2aW91cyBjYXJkXG4gICAgICAgIGNvbnN0IHJlc3RDb2x1bW5zID0gY2FsY3VsYXRlZE1heENvbHVtbnMgLSAoY29sdW1uQ291bnRlciAtIGNhcmQucHJlZmVycmVkU2l6ZSk7XG4gICAgICAgIGNvbnN0IHByZXZDYXJkID0gdGhpcy5jYXJkc1tpbmRleCAtIDFdO1xuICAgICAgICAvLyBBZGQgdGhlIHJlc3RDb2x1bW5zIHRvIHRoZSBwcmV2aW91cyBjYXJkcyBjb2xzcGFuLCB0byBtYWtlIGl0IHNwYW4gb3V0XG4gICAgICAgIHByZXZDYXJkLmNvbFNwYW4gPSByZXN0Q29sdW1ucyArIHByZXZDYXJkLmNvbFNwYW47XG4gICAgICAgIC8vIFdlIGFyZSBub3cgb24gYSBuZXcgcm93XG4gICAgICAgIGN1cnJlbnRSb3cgKz0gMTtcbiAgICAgICAgY3VycmVudENvbHVtbiA9IDA7XG4gICAgICAgIHRoaXMuY2FyZHMucHVzaChuZXcgR3JpZENhcmQoY2FyZCwgY3VycmVudFJvdywgY3VycmVudENvbHVtbiwgY2FyZC5wcmVmZXJyZWRTaXplKSk7XG4gICAgICAgIC8vIFVwZGF0ZSBjdXJyZW50Q29sdW1uIHRvIG1hdGNoIHRoZSBzaXplIG9mIHRoZSBuZXcgY2FyZCBhbmQgcmVzZXQgY29sdW1uQ291bnRlclxuICAgICAgICBjdXJyZW50Q29sdW1uID0gY2FyZC5wcmVmZXJyZWRTaXplO1xuICAgICAgICBjb2x1bW5Db3VudGVyID0gY2FyZC5wcmVmZXJyZWRTaXplO1xuICAgICAgfVxuICAgICAgLy8gSWYgd2Ugb24gdGhlIGxhc3QgY2FyZCwgbWFrZSBzdXJlIGl0IHNwYW5zIGFsbCB0aGUgcmVzdCBvZiB0aGUgY29sdW1uc1xuICAgICAgaWYgKHRoaXMuY2FyZENvbmZpZ3MubGVuZ3RoIC0gMSA9PT0gaW5kZXgpIHtcbiAgICAgICAgY29uc3QgcmVzdENvbHVtbnMgPSBjYWxjdWxhdGVkTWF4Q29sdW1ucyAtIGNvbHVtbkNvdW50ZXI7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRDYXJkID0gdGhpcy5jYXJkc1tpbmRleF07XG4gICAgICAgIGN1cnJlbnRDYXJkLmNvbFNwYW4gKz0gcmVzdENvbHVtbnM7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5icmVha3BvaW50U3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLmJyZWFrcG9pbnRTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNhcmQgb2YgY2FyZHNcIj5cbiAgPG5nLXRlbXBsYXRlXG4gICAgW2tpcmJ5TG9hZENvbXBvbmVudF09XCJjYXJkLmNvbmZpZ3VyYXRpb25cIlxuICAgIFtjc3NDbGFzc109XCInZ3JpZC1pdGVtLS1jb2wtJyArIGNhcmQuY29sU3BhblwiXG4gID48L25nLXRlbXBsYXRlPlxuPC9uZy1jb250YWluZXI+XG4iXX0=
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public_api';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2lyYnlkZXNpZ24tZGVzaWduc3lzdGVtLWdyaWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9ncmlkL3NyYy9raXJieWRlc2lnbi1kZXNpZ25zeXN0ZW0tZ3JpZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export * from './breakpoint-helper.service';
|
|
2
|
+
export * from './grid-card-configuration';
|
|
3
|
+
export * from './grid.component';
|
|
4
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2dyaWQvc3JjL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsa0JBQWtCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2JyZWFrcG9pbnQtaGVscGVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9ncmlkLWNhcmQtY29uZmlndXJhdGlvbic7XG5leHBvcnQgKiBmcm9tICcuL2dyaWQuY29tcG9uZW50JztcbiJdfQ==
|