@kirbydesign/designsystem 7.0.0-rc.6 → 7.0.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.
Files changed (10) hide show
  1. package/esm2020/lib/components/card/card.component.mjs +8 -3
  2. package/esm2020/lib/components/dropdown/dropdown.component.mjs +1 -1
  3. package/esm2020/lib/components/modal/action-sheet/action-sheet.component.mjs +1 -1
  4. package/esm2020/lib/components/reorder-list/reorder-list.component.mjs +1 -1
  5. package/fesm2015/kirbydesign-designsystem.mjs +10 -5
  6. package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
  7. package/fesm2020/kirbydesign-designsystem.mjs +10 -5
  8. package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
  9. package/lib/components/card/card.component.d.ts +2 -1
  10. package/package.json +2 -2
package/esm2020/lib/components/card/card.component.mjs CHANGED
@@ -57,10 +57,10 @@ export class CardComponent {
57
57
  }
58
58
  }
59
59
  /** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
60
- /** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted" } }, 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] });
60
+ /** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode", hasDarkBackgroundColor: "hasDarkBackgroundColor" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted", "class.interaction-state-make-lighter-and-louder": "this.hasDarkBackgroundColor" } }, 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] });
61
61
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, decorators: [{
62
62
  type: Component,
63
- 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] }]
63
+ 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] }]
64
64
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
65
65
  type: Input
66
66
  }], subtitle: [{
@@ -82,5 +82,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
82
82
  args: ['class.highlighted']
83
83
  }], mode: [{
84
84
  type: Input
85
+ }], hasDarkBackgroundColor: [{
86
+ type: HostBinding,
87
+ args: ['class.interaction-state-make-lighter-and-louder']
88
+ }, {
89
+ type: Input
85
90
  }] } });
86
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvY2FyZC9jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9jYXJkL2NhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFHTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sbURBQW1ELENBQUM7OztBQVExRixNQUFNLE9BQU8sYUFBYTtJQXdDeEIsWUFDVSxVQUFzQixFQUN0QixxQkFBNEMsRUFDNUMsUUFBbUI7UUFGbkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QiwwQkFBcUIsR0FBckIscUJBQXFCLENBQXVCO1FBQzVDLGFBQVEsR0FBUixRQUFRLENBQVc7UUE1QnJCLDRCQUF1QixHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQztZQUMzRCxLQUFLLEVBQUUsR0FBRztZQUNWLE1BQU0sRUFBRSxHQUFHO1lBQ1gsS0FBSyxFQUFFLElBQUk7U0FDWixDQUFDLENBQUM7UUFhSCxTQUFJLEdBQVksS0FBSyxDQUFDO1FBRXRCLGdCQUFXLEdBQVksS0FBSyxDQUFDO0lBVTFCLENBQUM7SUFyQ0osSUFDSSxrQkFBa0IsQ0FBQyxLQUFhO1FBQ2xDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLEtBQUssSUFBSSxDQUFDO0lBQzVDLENBQUM7SUFXRCxJQUNJLEtBQUssQ0FBQyxLQUFpQztRQUN6QyxJQUFJLE9BQU8sS0FBSyxLQUFLLFFBQVEsRUFBRTtZQUM3QixPQUFPLENBQUMsS0FBSyxDQUNYLGdIQUFnSCxDQUNqSCxDQUFDO1NBQ0g7UUFDRCxJQUFJLENBQUMsdUJBQXVCLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFNRCxJQUFhLElBQUksQ0FBQyxLQUE2QjtRQUM3QyxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssS0FBSyxNQUFNLENBQUM7UUFDN0IsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLEtBQUssYUFBYSxDQUFDO0lBQzdDLENBQUM7SUFRRCxRQUFRO1FBQ04sSUFBSSxDQUFDLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDM0YsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMscUJBQXFCLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRU8scUJBQXFCLENBQUMsS0FBaUM7UUFDN0QsT0FBTyxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztJQUNuRSxDQUFDO0lBRU8sd0JBQXdCLENBQUMsQ0FBbUIsRUFBRSxDQUFtQjtRQUN2RSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRU8sWUFBWSxDQUFDLEtBQTBCO1FBQzdDLE1BQU0saUJBQWlCLEdBQUcsTUFBTSxDQUFDO1FBQ2pDLE1BQU0sc0JBQXNCLEdBQUcsSUFBSSxDQUFDLHVCQUF1QixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2xFLE1BQU0sdUJBQXVCLEdBQUcsSUFBSSxDQUFDLHVCQUF1QixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ25FLElBQUksS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLEdBQUcsdUJBQXVCLEVBQUU7WUFDckQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxJQUFJLHNCQUFzQixFQUFFLENBQUMsQ0FBQztTQUMzRjthQUFNO1lBQ0wsSUFBSSxDQUFDLHVCQUF1QixDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUU7Z0JBQ3JELElBQUksS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLElBQUksS0FBSyxFQUFFO29CQUNwQyxJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLGlCQUFpQixFQUFFLElBQUksQ0FBQyxDQUFDO2lCQUNuRTtZQUNILENBQUMsQ0FBQyxDQUFDO1NBQ0o7SUFDSCxDQUFDOzs2SEEzRVUsYUFBYTtpSEFBYixhQUFhLG9XQ2xCMUIsZ1VBUUE7MkZEVWEsYUFBYTtrQkFMekIsU0FBUzsrQkFDRSxZQUFZOzZKQUtiLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdOLGdCQUFnQjtzQkFEZixXQUFXO3VCQUFDLHFDQUFxQztnQkFJOUMsa0JBQWtCO3NCQURyQixLQUFLO2dCQU1OLFVBQVU7c0JBRFQsS0FBSztnQkFVRixLQUFLO3NCQURSLEtBQUs7Z0JBV04sSUFBSTtzQkFESCxXQUFXO3VCQUFDLFlBQVk7Z0JBR3pCLFdBQVc7c0JBRFYsV0FBVzt1QkFBQyxtQkFBbUI7Z0JBRW5CLElBQUk7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIFJlbmRlcmVyMixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFJlc2l6ZU9ic2VydmVyU2VydmljZSB9IGZyb20gJy4uL3NoYXJlZC9yZXNpemUtb2JzZXJ2ZXIvcmVzaXplLW9ic2VydmVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgUmVzaXplT2JzZXJ2ZXJFbnRyeSB9IGZyb20gJy4uL3NoYXJlZC9yZXNpemUtb2JzZXJ2ZXIvdHlwZXMvcmVzaXplLW9ic2VydmVyLWVudHJ5JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnktY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2FyZC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBzdWJ0aXRsZTogc3RyaW5nO1xuXG4gIEBIb3N0QmluZGluZygnc3R5bGUuLS1raXJieS1jYXJkLWJhY2tncm91bmQtaW1hZ2UnKVxuICBfYmFja2dyb3VuZEltYWdlOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgc2V0IGJhY2tncm91bmRJbWFnZVVybCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5fYmFja2dyb3VuZEltYWdlID0gYHVybCgnJHt2YWx1ZX0nKWA7XG4gIH1cblxuICBASW5wdXQoKVxuICBoYXNQYWRkaW5nOiBib29sZWFuO1xuXG4gIHByaXZhdGUgc2l6ZXNTb3J0ZWRCeUJyZWFrcG9pbnQgPSB0aGlzLnNvcnRTaXplc0J5QnJlYWtwb2ludCh7XG4gICAgc21hbGw6IDM2MCxcbiAgICBtZWRpdW06IDcyMCxcbiAgICBsYXJnZTogMTAyNCxcbiAgfSk7XG5cbiAgQElucHV0KClcbiAgc2V0IHNpemVzKHZhbHVlOiB7IFtzaXplOiBzdHJpbmddOiBudW1iZXIgfSkge1xuICAgIGlmICh0eXBlb2YgdmFsdWUgPT09ICdzdHJpbmcnKSB7XG4gICAgICBjb25zb2xlLmVycm9yKFxuICAgICAgICAnU2l6ZXMgcHJvcGVydHkgY2Fubm90IGJlIGEgc3RyaW5nLiBQbGVhc2UgZW5zdXJlIHRoZSBzaXplIHByb3BlcnR5IGlzIGJvdW5kIGFzIGFuIGV4cHJlc3Npb246XFxuW3NpemVzXT1cInsuLi59XCInXG4gICAgICApO1xuICAgIH1cbiAgICB0aGlzLnNpemVzU29ydGVkQnlCcmVha3BvaW50ID0gdGhpcy5zb3J0U2l6ZXNCeUJyZWFrcG9pbnQodmFsdWUpO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mbGF0JylcbiAgZmxhdDogYm9vbGVhbiA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmhpZ2hsaWdodGVkJylcbiAgaGlnaGxpZ2h0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2V0IG1vZGUodmFsdWU6ICdmbGF0JyB8ICdoaWdobGlnaHRlZCcpIHtcbiAgICB0aGlzLmZsYXQgPSB2YWx1ZSA9PT0gJ2ZsYXQnO1xuICAgIHRoaXMuaGlnaGxpZ2h0ZWQgPSB2YWx1ZSA9PT0gJ2hpZ2hsaWdodGVkJztcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlc2l6ZU9ic2VydmVyU2VydmljZTogUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5yZXNpemVPYnNlcnZlclNlcnZpY2Uub2JzZXJ2ZSh0aGlzLmVsZW1lbnRSZWYsIChlbnRyeSkgPT4gdGhpcy5oYW5kbGVSZXNpemUoZW50cnkpKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLnVub2JzZXJ2ZSh0aGlzLmVsZW1lbnRSZWYpO1xuICB9XG5cbiAgcHJpdmF0ZSBzb3J0U2l6ZXNCeUJyZWFrcG9pbnQoc2l6ZXM6IHsgW3NpemU6IHN0cmluZ106IG51bWJlciB9KTogW3N0cmluZywgbnVtYmVyXVtdIHtcbiAgICByZXR1cm4gT2JqZWN0LmVudHJpZXMoc2l6ZXMpLnNvcnQodGhpcy5jb21wYXJlU2l6ZXNCeUJyZWFrcG9pbnQpO1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wYXJlU2l6ZXNCeUJyZWFrcG9pbnQoYTogW3N0cmluZywgbnVtYmVyXSwgYjogW3N0cmluZywgbnVtYmVyXSk6IG51bWJlciB7XG4gICAgcmV0dXJuIGFbMV0gPiBiWzFdID8gMSA6IGJbMV0gPiBhWzFdID8gLTEgOiAwO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVSZXNpemUoZW50cnk6IFJlc2l6ZU9ic2VydmVyRW50cnkpIHtcbiAgICBjb25zdCBzaXplQXR0cmlidXRlTmFtZSA9ICdzaXplJztcbiAgICBjb25zdCBzbWFsbGVzdEJyZWFrcG9pbnROYW1lID0gdGhpcy5zaXplc1NvcnRlZEJ5QnJlYWtwb2ludFswXVswXTtcbiAgICBjb25zdCBzbWFsbGVzdEJyZWFrcG9pbnRXaWR0aCA9IHRoaXMuc2l6ZXNTb3J0ZWRCeUJyZWFrcG9pbnRbMF1bMV07XG4gICAgaWYgKGVudHJ5LmNvbnRlbnRSZWN0LndpZHRoIDwgc21hbGxlc3RCcmVha3BvaW50V2lkdGgpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKGVudHJ5LnRhcmdldCwgc2l6ZUF0dHJpYnV0ZU5hbWUsIGA8JHtzbWFsbGVzdEJyZWFrcG9pbnROYW1lfWApO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNpemVzU29ydGVkQnlCcmVha3BvaW50LmZvckVhY2goKFtzaXplLCB3aWR0aF0pID0+IHtcbiAgICAgICAgaWYgKGVudHJ5LmNvbnRlbnRSZWN0LndpZHRoID49IHdpZHRoKSB7XG4gICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUoZW50cnkudGFyZ2V0LCBzaXplQXR0cmlidXRlTmFtZSwgc2l6ZSk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInN0YXRlLWxheWVyXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9kaXY+XG48ZGl2IGNsYXNzPVwiY29udGVudC1sYXllclwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJraXJieS1jYXJkLWhlYWRlclwiPjwvbmctY29udGVudD5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnQtd3JhcHBlclwiIFtjbGFzcy5wYWRkaW5nXT1cImhhc1BhZGRpbmdcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJraXJieS1jYXJkLWZvb3RlclwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
91
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvY2FyZC9jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9jYXJkL2NhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFHTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sbURBQW1ELENBQUM7OztBQVExRixNQUFNLE9BQU8sYUFBYTtJQTRDeEIsWUFDVSxVQUFzQixFQUN0QixxQkFBNEMsRUFDNUMsUUFBbUI7UUFGbkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QiwwQkFBcUIsR0FBckIscUJBQXFCLENBQXVCO1FBQzVDLGFBQVEsR0FBUixRQUFRLENBQVc7UUFoQ3JCLDRCQUF1QixHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQztZQUMzRCxLQUFLLEVBQUUsR0FBRztZQUNWLE1BQU0sRUFBRSxHQUFHO1lBQ1gsS0FBSyxFQUFFLElBQUk7U0FDWixDQUFDLENBQUM7UUFhSCxTQUFJLEdBQVksS0FBSyxDQUFDO1FBRXRCLGdCQUFXLEdBQVksS0FBSyxDQUFDO0lBYzFCLENBQUM7SUF6Q0osSUFDSSxrQkFBa0IsQ0FBQyxLQUFhO1FBQ2xDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLEtBQUssSUFBSSxDQUFDO0lBQzVDLENBQUM7SUFXRCxJQUNJLEtBQUssQ0FBQyxLQUFpQztRQUN6QyxJQUFJLE9BQU8sS0FBSyxLQUFLLFFBQVEsRUFBRTtZQUM3QixPQUFPLENBQUMsS0FBSyxDQUNYLGdIQUFnSCxDQUNqSCxDQUFDO1NBQ0g7UUFDRCxJQUFJLENBQUMsdUJBQXVCLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFNRCxJQUFhLElBQUksQ0FBQyxLQUE2QjtRQUM3QyxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssS0FBSyxNQUFNLENBQUM7UUFDN0IsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLEtBQUssYUFBYSxDQUFDO0lBQzdDLENBQUM7SUFZRCxRQUFRO1FBQ04sSUFBSSxDQUFDLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDM0YsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMscUJBQXFCLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRU8scUJBQXFCLENBQUMsS0FBaUM7UUFDN0QsT0FBTyxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztJQUNuRSxDQUFDO0lBRU8sd0JBQXdCLENBQUMsQ0FBbUIsRUFBRSxDQUFtQjtRQUN2RSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRU8sWUFBWSxDQUFDLEtBQTBCO1FBQzdDLE1BQU0saUJBQWlCLEdBQUcsTUFBTSxDQUFDO1FBQ2pDLE1BQU0sc0JBQXNCLEdBQUcsSUFBSSxDQUFDLHVCQUF1QixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2xFLE1BQU0sdUJBQXVCLEdBQUcsSUFBSSxDQUFDLHVCQUF1QixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ25FLElBQUksS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLEdBQUcsdUJBQXVCLEVBQUU7WUFDckQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxJQUFJLHNCQUFzQixFQUFFLENBQUMsQ0FBQztTQUMzRjthQUFNO1lBQ0wsSUFBSSxDQUFDLHVCQUF1QixDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUU7Z0JBQ3JELElBQUksS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLElBQUksS0FBSyxFQUFFO29CQUNwQyxJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLGlCQUFpQixFQUFFLElBQUksQ0FBQyxDQUFDO2lCQUNuRTtZQUNILENBQUMsQ0FBQyxDQUFDO1NBQ0o7SUFDSCxDQUFDOzs2SEEvRVUsYUFBYTtpSEFBYixhQUFhLHdlQ2xCMUIsZ1VBUUE7MkZEVWEsYUFBYTtrQkFMekIsU0FBUzsrQkFDRSxZQUFZOzZKQUtiLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdOLGdCQUFnQjtzQkFEZixXQUFXO3VCQUFDLHFDQUFxQztnQkFJOUMsa0JBQWtCO3NCQURyQixLQUFLO2dCQU1OLFVBQVU7c0JBRFQsS0FBSztnQkFVRixLQUFLO3NCQURSLEtBQUs7Z0JBV04sSUFBSTtzQkFESCxXQUFXO3VCQUFDLFlBQVk7Z0JBR3pCLFdBQVc7c0JBRFYsV0FBVzt1QkFBQyxtQkFBbUI7Z0JBRW5CLElBQUk7c0JBQWhCLEtBQUs7Z0JBT04sc0JBQXNCO3NCQUZyQixXQUFXO3VCQUFDLGlEQUFpRDs7c0JBQzdELEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIFJlbmRlcmVyMixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFJlc2l6ZU9ic2VydmVyU2VydmljZSB9IGZyb20gJy4uL3NoYXJlZC9yZXNpemUtb2JzZXJ2ZXIvcmVzaXplLW9ic2VydmVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgUmVzaXplT2JzZXJ2ZXJFbnRyeSB9IGZyb20gJy4uL3NoYXJlZC9yZXNpemUtb2JzZXJ2ZXIvdHlwZXMvcmVzaXplLW9ic2VydmVyLWVudHJ5JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnktY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2FyZC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBzdWJ0aXRsZTogc3RyaW5nO1xuXG4gIEBIb3N0QmluZGluZygnc3R5bGUuLS1raXJieS1jYXJkLWJhY2tncm91bmQtaW1hZ2UnKVxuICBfYmFja2dyb3VuZEltYWdlOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgc2V0IGJhY2tncm91bmRJbWFnZVVybCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5fYmFja2dyb3VuZEltYWdlID0gYHVybCgnJHt2YWx1ZX0nKWA7XG4gIH1cblxuICBASW5wdXQoKVxuICBoYXNQYWRkaW5nOiBib29sZWFuO1xuXG4gIHByaXZhdGUgc2l6ZXNTb3J0ZWRCeUJyZWFrcG9pbnQgPSB0aGlzLnNvcnRTaXplc0J5QnJlYWtwb2ludCh7XG4gICAgc21hbGw6IDM2MCxcbiAgICBtZWRpdW06IDcyMCxcbiAgICBsYXJnZTogMTAyNCxcbiAgfSk7XG5cbiAgQElucHV0KClcbiAgc2V0IHNpemVzKHZhbHVlOiB7IFtzaXplOiBzdHJpbmddOiBudW1iZXIgfSkge1xuICAgIGlmICh0eXBlb2YgdmFsdWUgPT09ICdzdHJpbmcnKSB7XG4gICAgICBjb25zb2xlLmVycm9yKFxuICAgICAgICAnU2l6ZXMgcHJvcGVydHkgY2Fubm90IGJlIGEgc3RyaW5nLiBQbGVhc2UgZW5zdXJlIHRoZSBzaXplIHByb3BlcnR5IGlzIGJvdW5kIGFzIGFuIGV4cHJlc3Npb246XFxuW3NpemVzXT1cInsuLi59XCInXG4gICAgICApO1xuICAgIH1cbiAgICB0aGlzLnNpemVzU29ydGVkQnlCcmVha3BvaW50ID0gdGhpcy5zb3J0U2l6ZXNCeUJyZWFrcG9pbnQodmFsdWUpO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mbGF0JylcbiAgZmxhdDogYm9vbGVhbiA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmhpZ2hsaWdodGVkJylcbiAgaGlnaGxpZ2h0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2V0IG1vZGUodmFsdWU6ICdmbGF0JyB8ICdoaWdobGlnaHRlZCcpIHtcbiAgICB0aGlzLmZsYXQgPSB2YWx1ZSA9PT0gJ2ZsYXQnO1xuICAgIHRoaXMuaGlnaGxpZ2h0ZWQgPSB2YWx1ZSA9PT0gJ2hpZ2hsaWdodGVkJztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuaW50ZXJhY3Rpb24tc3RhdGUtbWFrZS1saWdodGVyLWFuZC1sb3VkZXInKVxuICBASW5wdXQoKVxuICBoYXNEYXJrQmFja2dyb3VuZENvbG9yOiBib29sZWFuO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlc2l6ZU9ic2VydmVyU2VydmljZTogUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5yZXNpemVPYnNlcnZlclNlcnZpY2Uub2JzZXJ2ZSh0aGlzLmVsZW1lbnRSZWYsIChlbnRyeSkgPT4gdGhpcy5oYW5kbGVSZXNpemUoZW50cnkpKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLnVub2JzZXJ2ZSh0aGlzLmVsZW1lbnRSZWYpO1xuICB9XG5cbiAgcHJpdmF0ZSBzb3J0U2l6ZXNCeUJyZWFrcG9pbnQoc2l6ZXM6IHsgW3NpemU6IHN0cmluZ106IG51bWJlciB9KTogW3N0cmluZywgbnVtYmVyXVtdIHtcbiAgICByZXR1cm4gT2JqZWN0LmVudHJpZXMoc2l6ZXMpLnNvcnQodGhpcy5jb21wYXJlU2l6ZXNCeUJyZWFrcG9pbnQpO1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wYXJlU2l6ZXNCeUJyZWFrcG9pbnQoYTogW3N0cmluZywgbnVtYmVyXSwgYjogW3N0cmluZywgbnVtYmVyXSk6IG51bWJlciB7XG4gICAgcmV0dXJuIGFbMV0gPiBiWzFdID8gMSA6IGJbMV0gPiBhWzFdID8gLTEgOiAwO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVSZXNpemUoZW50cnk6IFJlc2l6ZU9ic2VydmVyRW50cnkpIHtcbiAgICBjb25zdCBzaXplQXR0cmlidXRlTmFtZSA9ICdzaXplJztcbiAgICBjb25zdCBzbWFsbGVzdEJyZWFrcG9pbnROYW1lID0gdGhpcy5zaXplc1NvcnRlZEJ5QnJlYWtwb2ludFswXVswXTtcbiAgICBjb25zdCBzbWFsbGVzdEJyZWFrcG9pbnRXaWR0aCA9IHRoaXMuc2l6ZXNTb3J0ZWRCeUJyZWFrcG9pbnRbMF1bMV07XG4gICAgaWYgKGVudHJ5LmNvbnRlbnRSZWN0LndpZHRoIDwgc21hbGxlc3RCcmVha3BvaW50V2lkdGgpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKGVudHJ5LnRhcmdldCwgc2l6ZUF0dHJpYnV0ZU5hbWUsIGA8JHtzbWFsbGVzdEJyZWFrcG9pbnROYW1lfWApO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNpemVzU29ydGVkQnlCcmVha3BvaW50LmZvckVhY2goKFtzaXplLCB3aWR0aF0pID0+IHtcbiAgICAgICAgaWYgKGVudHJ5LmNvbnRlbnRSZWN0LndpZHRoID49IHdpZHRoKSB7XG4gICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUoZW50cnkudGFyZ2V0LCBzaXplQXR0cmlidXRlTmFtZSwgc2l6ZSk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInN0YXRlLWxheWVyXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9kaXY+XG48ZGl2IGNsYXNzPVwiY29udGVudC1sYXllclwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJraXJieS1jYXJkLWhlYWRlclwiPjwvbmctY29udGVudD5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnQtd3JhcHBlclwiIFtjbGFzcy5wYWRkaW5nXT1cImhhc1BhZGRpbmdcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJraXJieS1jYXJkLWZvb3RlclwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
package/esm2020/lib/components/dropdown/dropdown.component.mjs CHANGED
@@ -410,7 +410,7 @@ DropdownComponent.OPEN_DELAY_IN_MS = 100;
410
410
  useExisting: forwardRef((() => DropdownComponent)),
411
411
  multi: true,
412
412
  },
413
- ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: i2.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i4.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: i5.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: i6.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
413
+ ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: i2.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i4.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: i5.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: i6.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
414
414
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
415
415
  type: Component,
416
416
  args: [{ selector: 'kirby-dropdown', providers: [
package/esm2020/lib/components/modal/action-sheet/action-sheet.component.mjs CHANGED
@@ -20,7 +20,7 @@ export class ActionSheetComponent {
20
20
  }
21
21
  }
22
22
  /** @nocollapse */ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
23
- /** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], components: [{ type: i1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: i2.CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
23
+ /** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], components: [{ type: i1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: i2.CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
24
24
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, decorators: [{
25
25
  type: Component,
26
26
  args: [{ selector: 'kirby-action-sheet', template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"] }]
package/esm2020/lib/components/reorder-list/reorder-list.component.mjs CHANGED
@@ -53,7 +53,7 @@ export class ReorderListComponent {
53
53
  }
54
54
  }
55
55
  /** @nocollapse */ ReorderListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
56
- /** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: i2.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: i3.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
56
+ /** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: i2.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: i3.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
57
57
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, decorators: [{
58
58
  type: Component,
59
59
  args: [{ selector: 'kirby-reorder-list', template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"] }]
package/fesm2015/kirbydesign-designsystem.mjs CHANGED
@@ -1571,10 +1571,10 @@ class CardComponent {
1571
1571
  }
1572
1572
  }
1573
1573
  /** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1574
- /** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted" } }, 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] });
1574
+ /** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode", hasDarkBackgroundColor: "hasDarkBackgroundColor" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted", "class.interaction-state-make-lighter-and-louder": "this.hasDarkBackgroundColor" } }, 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] });
1575
1575
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, decorators: [{
1576
1576
  type: Component,
1577
- 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] }]
1577
+ 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{--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);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;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 .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #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(.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)}\n"] }]
1578
1578
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
1579
1579
  type: Input
1580
1580
  }], subtitle: [{
@@ -1596,6 +1596,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
1596
1596
  args: ['class.highlighted']
1597
1597
  }], mode: [{
1598
1598
  type: Input
1599
+ }], hasDarkBackgroundColor: [{
1600
+ type: HostBinding,
1601
+ args: ['class.interaction-state-make-lighter-and-louder']
1602
+ }, {
1603
+ type: Input
1599
1604
  }] } });
1600
1605
 
1601
1606
  class CardHeaderComponent {
@@ -1637,7 +1642,7 @@ class ActionSheetComponent {
1637
1642
  }
1638
1643
  }
1639
1644
  /** @nocollapse */ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1640
- /** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], components: [{ type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1645
+ /** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], components: [{ type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1641
1646
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, decorators: [{
1642
1647
  type: Component,
1643
1648
  args: [{ selector: 'kirby-action-sheet', template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n [noDecoration]=\"true\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"] }]
@@ -4679,7 +4684,7 @@ DropdownComponent.OPEN_DELAY_IN_MS = 100;
4679
4684
  useExisting: forwardRef((() => DropdownComponent)),
4680
4685
  multi: true,
4681
4686
  },
4682
- ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4687
+ ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4683
4688
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
4684
4689
  type: Component,
4685
4690
  args: [{ selector: 'kirby-dropdown', providers: [
@@ -8006,7 +8011,7 @@ class ReorderListComponent {
8006
8011
  }
8007
8012
  }
8008
8013
  /** @nocollapse */ ReorderListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
8009
- /** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
8014
+ /** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
8010
8015
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, decorators: [{
8011
8016
  type: Component,
8012
8017
  args: [{ selector: 'kirby-reorder-list', template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"] }]