@kirbydesign/designsystem 4.0.22 → 5.0.1

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 (55) hide show
  1. package/bundles/kirbydesign-designsystem-testing-base.umd.js +58 -36
  2. package/bundles/kirbydesign-designsystem-testing-base.umd.js.map +1 -1
  3. package/bundles/kirbydesign-designsystem-testing-base.umd.min.js +1 -1
  4. package/bundles/kirbydesign-designsystem-testing-base.umd.min.js.map +1 -1
  5. package/bundles/kirbydesign-designsystem.umd.js +34 -14
  6. package/bundles/kirbydesign-designsystem.umd.js.map +1 -1
  7. package/bundles/kirbydesign-designsystem.umd.min.js +1 -1
  8. package/bundles/kirbydesign-designsystem.umd.min.js.map +1 -1
  9. package/esm2015/kirbydesign-designsystem.js +11 -10
  10. package/esm2015/kirbydesign-designsystem.metadata.json +1 -1
  11. package/esm2015/lib/components/calendar/calendar.component.js +1 -1
  12. package/esm2015/lib/components/calendar/calendar.component.metadata.json +1 -1
  13. package/esm2015/lib/components/index.js +2 -1
  14. package/esm2015/lib/components/index.metadata.json +1 -1
  15. package/esm2015/lib/components/item/label/label.component.js +1 -1
  16. package/esm2015/lib/components/item/label/label.component.metadata.json +1 -1
  17. package/esm2015/lib/components/item-group/item-group.component.js +17 -0
  18. package/esm2015/lib/components/item-group/item-group.component.metadata.json +1 -0
  19. package/esm2015/lib/components/modal/modal-wrapper/modal-wrapper.component.js +1 -1
  20. package/esm2015/lib/components/modal/modal-wrapper/modal-wrapper.component.metadata.json +1 -1
  21. package/esm2015/lib/components/tabs/tab-button/tab-button.component.js +1 -1
  22. package/esm2015/lib/components/tabs/tab-button/tab-button.component.metadata.json +1 -1
  23. package/esm2015/lib/kirby.module.js +3 -1
  24. package/esm2015/lib/kirby.module.metadata.json +1 -1
  25. package/esm2015/testing-base/kirbydesign-designsystem-testing-base.js +30 -29
  26. package/esm2015/testing-base/kirbydesign-designsystem-testing-base.metadata.json +1 -1
  27. package/esm2015/testing-base/lib/components/mock.item-group.component.js +19 -0
  28. package/esm2015/testing-base/lib/components/mock.item-group.component.metadata.json +1 -0
  29. package/esm2015/testing-base/lib/mock-components.js +3 -1
  30. package/esm2015/testing-base/lib/mock-components.metadata.json +1 -1
  31. package/fesm2015/kirbydesign-designsystem-testing-base.js +20 -2
  32. package/fesm2015/kirbydesign-designsystem-testing-base.js.map +1 -1
  33. package/fesm2015/kirbydesign-designsystem.js +22 -5
  34. package/fesm2015/kirbydesign-designsystem.js.map +1 -1
  35. package/kirbydesign-designsystem.d.ts +10 -9
  36. package/kirbydesign-designsystem.metadata.json +1 -1
  37. package/lib/components/index.d.ts +1 -0
  38. package/lib/components/item-group/item-group.component.d.ts +3 -0
  39. package/package.json +2 -2
  40. package/scss/_global-styles.scss +46 -43
  41. package/scss/_utils.scss +7 -4
  42. package/scss/base/_functions.scss +35 -28
  43. package/scss/base/_ionic.scss +9 -5
  44. package/scss/base/_list.scss +11 -0
  45. package/scss/base/_typography.scss +30 -28
  46. package/scss/base/_variables.scss +16 -14
  47. package/scss/print/_index.scss +3 -3
  48. package/scss/print/components/_index.scss +7 -7
  49. package/scss/print/elements/_index.scss +3 -3
  50. package/scss/print/generic/_index.scss +4 -4
  51. package/scss/themes/_colors.scss +14 -12
  52. package/testing-base/kirbydesign-designsystem-testing-base.d.ts +29 -28
  53. package/testing-base/kirbydesign-designsystem-testing-base.metadata.json +1 -1
  54. package/testing-base/lib/components/mock.item-group.component.d.ts +2 -0
  55. package/scss/base/_include-media.scss +0 -589
@@ -2004,7 +2004,7 @@
2004
2004
  selector: 'kirby-modal-wrapper',
2005
2005
  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",
2006
2006
  providers: [{ provide: Modal, useExisting: ModalWrapperComponent }],
2007
- 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}}"]
2007
+ 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}}"]
2008
2008
  },] }
2009
2009
  ];
2010
2010
  /** @nocollapse */
@@ -5161,7 +5161,7 @@
5161
5161
  selector: 'kirby-calendar',
5162
5162
  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",
5163
5163
  providers: [CalendarHelper],
5164
- 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)}"]
5164
+ 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)}"]
5165
5165
  },] }
5166
5166
  ];
5167
5167
  /** @nocollapse */
@@ -7181,7 +7181,7 @@
7181
7181
  { type: i0.Component, args: [{
7182
7182
  selector: 'kirby-label',
7183
7183
  template: "<ion-label>\n <ng-content></ng-content>\n</ion-label>\n",
7184
- 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}"]
7184
+ 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}"]
7185
7185
  },] }
7186
7186
  ];
7187
7187
  LabelComponent.propDecorators = {
@@ -7202,6 +7202,23 @@
7202
7202
  },] }
7203
7203
  ];
7204
7204
 
7205
+ var ItemGroupComponent = /** @class */ (function () {
7206
+ function ItemGroupComponent() {
7207
+ this.role = 'group';
7208
+ }
7209
+ return ItemGroupComponent;
7210
+ }());
7211
+ ItemGroupComponent.decorators = [
7212
+ { type: i0.Component, args: [{
7213
+ selector: 'kirby-item-group',
7214
+ template: "<ng-content></ng-content>\n",
7215
+ styles: [":host{display:block}"]
7216
+ },] }
7217
+ ];
7218
+ ItemGroupComponent.propDecorators = {
7219
+ role: [{ type: i0.HostBinding, args: ['attr.role',] }]
7220
+ };
7221
+
7205
7222
  var SpinnerComponent = /** @class */ (function () {
7206
7223
  function SpinnerComponent() {
7207
7224
  }
@@ -8833,7 +8850,7 @@
8833
8850
  { type: i0.Component, args: [{
8834
8851
  selector: 'kirby-tab-button',
8835
8852
  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",
8836
- 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}}"]
8853
+ 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}}"]
8837
8854
  },] }
8838
8855
  ];
8839
8856
  /** @nocollapse */
@@ -9819,6 +9836,7 @@
9819
9836
  RadioGroupComponent,
9820
9837
  RangeComponent,
9821
9838
  ElementAsButtonDirective,
9839
+ ItemGroupComponent,
9822
9840
  ];
9823
9841
  var declarations$1 = __spread(exportedDeclarations$1, [
9824
9842
  KeyHandlerDirective,
@@ -10001,6 +10019,7 @@
10001
10019
  exports.InputComponent = InputComponent;
10002
10020
  exports.InputCounterComponent = InputCounterComponent;
10003
10021
  exports.ItemComponent = ItemComponent;
10022
+ exports.ItemGroupComponent = ItemGroupComponent;
10004
10023
  exports.ItemModule = ItemModule;
10005
10024
  exports.KeyHandlerDirective = KeyHandlerDirective;
10006
10025
  exports.KirbyModule = KirbyModule;
@@ -10166,17 +10185,18 @@
10166
10185
  exports.ɵeo = AccordionItemComponent;
10167
10186
  exports.ɵep = RangeComponent;
10168
10187
  exports.ɵeq = ElementAsButtonDirective;
10169
- exports.ɵer = KeyHandlerDirective;
10170
- exports.ɵes = FormFieldMessageComponent;
10171
- exports.ɵet = AlertComponent;
10172
- exports.ɵeu = ModalCompactWrapperComponent;
10173
- exports.ɵev = ProgressCircleRingComponent;
10174
- exports.ɵew = ToastHelper;
10175
- exports.ɵex = ToastController;
10176
- exports.ɵey = LoadingOverlayService;
10177
- exports.ɵez = appInitialize;
10188
+ exports.ɵer = ItemGroupComponent;
10189
+ exports.ɵes = KeyHandlerDirective;
10190
+ exports.ɵet = FormFieldMessageComponent;
10191
+ exports.ɵeu = AlertComponent;
10192
+ exports.ɵev = ModalCompactWrapperComponent;
10193
+ exports.ɵew = ProgressCircleRingComponent;
10194
+ exports.ɵex = ToastHelper;
10195
+ exports.ɵey = ToastController;
10196
+ exports.ɵez = LoadingOverlayService;
10178
10197
  exports.ɵf = ModalHelper;
10179
- exports.ɵfa = customElementsInitializer;
10198
+ exports.ɵfa = appInitialize;
10199
+ exports.ɵfb = customElementsInitializer;
10180
10200
  exports.ɵg = ModalAnimationBuilderService;
10181
10201
  exports.ɵh = PlatformService;
10182
10202
  exports.ɵi = WindowRef;