@kirbydesign/designsystem 4.0.23 → 5.0.2

package/bundles/kirbydesign-designsystem.umd.js

@@ -2004,7 +2004,7 @@
                     selector: 'kirby-modal-wrapper',
                     template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title>{{ config.title }}</ion-title>\n    <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n      <ng-container\n        *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n      ></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"4\" size=\"sm\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"sm\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n",
                     providers: [{ provide: Modal, useExisting: ModalWrapperComponent }],
-                    styles: ["@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),calc(var(--vh100) - var(--kirby-modal-padding-top, 0px)))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),calc(var(--vh100) - var(--kirby-modal-padding-top, 0px)))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host{--vh100:var(--vh,1vh) * 100;--header-height:0px;--footer-height:0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
+                    styles: ["@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host{--vh100:var(--vh,1vh) * 100;--header-height:0px;--footer-height:0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
                 },] }
     ];
     /** @nocollapse */
@@ -5161,7 +5161,7 @@
                     selector: 'kirby-calendar',
                     template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button [disabled]=\"!_canNavigateBack\" (click)=\"_changeMonth(-1)\">\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span\n      ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button [disabled]=\"!_canNavigateForward\" (click)=\"_changeMonth(1)\">\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  >\n  </kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }}\"\n          [class.selected]=\"day.isSelected\"\n        >\n          {{ day.date }}\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n",
                     providers: [CalendarHelper],
-                    styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}td,th{text-align:center;padding:0}td:first-child,th:first-child{padding-left:8px}td:last-child,th:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,td,th{background-color:transparent}.header{margin:8px 8px 0}.header,.month-navigator{display:flex;justify-content:space-between}.month-navigator{flex-grow:1;align-items:center}.month-navigator button{background-color:transparent;outline:none;border:none;cursor:pointer;height:40px;width:40px;padding:0}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0}.day.selectable,.day.selected{cursor:pointer}.day.disabled,.day:not(.selectable){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.day:not(.current-month){visibility:hidden;pointer-events:none}.day.selectable:not(.selected):hover{color:var(--kirby-light-contrast);background-color:var(--kirby-light)}"]
+                    styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}td,th{text-align:center;padding:0}td:first-child,th:first-child{padding-left:8px}td:last-child,th:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,td,th{background-color:transparent}.header{margin:8px 8px 0}.header,.month-navigator{display:flex;justify-content:space-between}.month-navigator{flex-grow:1;align-items:center}.month-navigator button{background-color:transparent;outline:none;border:none;color:inherit;cursor:pointer;height:40px;width:40px;padding:0}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0}.day.selectable,.day.selected{cursor:pointer}.day.disabled,.day:not(.selectable){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.day:not(.current-month){visibility:hidden;pointer-events:none}.day.selectable:not(.selected):hover{color:var(--kirby-light-contrast);background-color:var(--kirby-light)}"]
                 },] }
     ];
     /** @nocollapse */
@@ -7181,7 +7181,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-label',
                     template: "<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n",
-                    styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ion-label ::ng-deep>data,:host-context(kirby-item) ion-label ::ng-deep>h1,:host-context(kirby-item) ion-label ::ng-deep>h2,:host-context(kirby-item) ion-label ::ng-deep>h3,:host-context(kirby-item) ion-label ::ng-deep>h4,:host-context(kirby-item) ion-label ::ng-deep>h5,:host-context(kirby-item) ion-label ::ng-deep>h6,:host-context(kirby-item) ion-label ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host-context(kirby-item) ion-label ::ng-deep>data.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h1.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h2.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h3.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h4.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h5.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h6.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>p.kirby-text-bold{font-weight:700}:host-context(kirby-item) ion-label ::ng-deep>p{font-size:14px}:host-context(kirby-item) ion-label ::ng-deep>[detail],:host-context(kirby-item) ion-label ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host-context(kirby-item) ion-label ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ion-label ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host([slot=end]) ion-label ::ng-deep>[detail],:host([slot=end]) ion-label ::ng-deep>data{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>data,:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p{font-weight:700}"]
+                    styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ion-label ::ng-deep>data,:host-context(kirby-item) ion-label ::ng-deep>h1,:host-context(kirby-item) ion-label ::ng-deep>h2,:host-context(kirby-item) ion-label ::ng-deep>h3,:host-context(kirby-item) ion-label ::ng-deep>h4,:host-context(kirby-item) ion-label ::ng-deep>h5,:host-context(kirby-item) ion-label ::ng-deep>h6,:host-context(kirby-item) ion-label ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host-context(kirby-item) ion-label ::ng-deep>data.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h1.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h2.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h3.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h4.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h5.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h6.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>p.kirby-text-bold{font-weight:700}:host-context(kirby-item) ion-label ::ng-deep>p{font-size:14px}:host-context(kirby-item) ion-label ::ng-deep>[detail],:host-context(kirby-item) ion-label ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host-context(kirby-item) ion-label ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ion-label ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host([slot=end]) ion-label ::ng-deep>[detail],:host([slot=end]) ion-label ::ng-deep>data{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]),:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]){font-weight:700}"]
                 },] }
     ];
     LabelComponent.propDecorators = {
@@ -8850,7 +8850,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-tab-button',
                     template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n    <ng-content select=\"kirby-badge\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n</ion-tab-button>\n",
-                    styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
+                    styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:utils.get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
                 },] }
     ];
     /** @nocollapse */