@kirbydesign/designsystem 4.0.21 → 4.0.25

package/bundles/kirbydesign-designsystem.umd.js

@@ -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 = {
@@ -7202,6 +7202,23 @@
                 },] }
     ];
 
+    var ItemGroupComponent = /** @class */ (function () {
+        function ItemGroupComponent() {
+            this.role = 'group';
+        }
+        return ItemGroupComponent;
+    }());
+    ItemGroupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-item-group',
+                    template: "<ng-content></ng-content>\n",
+                    styles: [":host{display:block}"]
+                },] }
+    ];
+    ItemGroupComponent.propDecorators = {
+        role: [{ type: i0.HostBinding, args: ['attr.role',] }]
+    };
+
     var SpinnerComponent = /** @class */ (function () {
         function SpinnerComponent() {
         }
@@ -7535,6 +7552,7 @@
              * Emitting event when an item is selected (tapped on mobile, clicked on web)
              */
             this.itemSelect = new i0.EventEmitter();
+            this.disableSelectionHighlight = false;
         }
         Object.defineProperty(ListComponent.prototype, "isShapeRounded", {
             get: function () {
@@ -7582,8 +7600,10 @@
             return section.name;
         };
         ListComponent.prototype.onItemSelect = function (item) {
-            this._selectedItem = item;
-            this.itemSelect.emit(this._selectedItem);
+            if (!this.disableSelectionHighlight) {
+                this._selectedItem = item;
+            }
+            this.itemSelect.emit(item);
         };
         ListComponent.prototype.onSwipeActionSelect = function (args) {
             args.swipeAction.onSelected(args.item);
@@ -7631,6 +7651,7 @@
         loadOnDemand: [{ type: i0.Output }],
         swipeActions: [{ type: i0.Input }],
         itemSelect: [{ type: i0.Output }],
+        disableSelectionHighlight: [{ type: i0.Input }],
         kirbyItems: [{ type: i0.ContentChildren, args: [ItemComponent,] }],
         headerTemplate: [{ type: i0.ContentChild, args: [ListHeaderDirective, { static: false, read: i0.TemplateRef },] }],
         sectionHeaderTemplate: [{ type: i0.ContentChild, args: [ListSectionHeaderDirective, { static: false, read: i0.TemplateRef },] }],
@@ -9815,6 +9836,7 @@
         RadioGroupComponent,
         RangeComponent,
         ElementAsButtonDirective,
+        ItemGroupComponent,
     ];
     var declarations$1 = __spread(exportedDeclarations$1, [
         KeyHandlerDirective,
@@ -9997,6 +10019,7 @@
     exports.InputComponent = InputComponent;
     exports.InputCounterComponent = InputCounterComponent;
     exports.ItemComponent = ItemComponent;
+    exports.ItemGroupComponent = ItemGroupComponent;
     exports.ItemModule = ItemModule;
     exports.KeyHandlerDirective = KeyHandlerDirective;
     exports.KirbyModule = KirbyModule;
@@ -10162,17 +10185,18 @@
     exports.ɵeo = AccordionItemComponent;
     exports.ɵep = RangeComponent;
     exports.ɵeq = ElementAsButtonDirective;
-    exports.ɵer = KeyHandlerDirective;
-    exports.ɵes = FormFieldMessageComponent;
-    exports.ɵet = AlertComponent;
-    exports.ɵeu = ModalCompactWrapperComponent;
-    exports.ɵev = ProgressCircleRingComponent;
-    exports.ɵew = ToastHelper;
-    exports.ɵex = ToastController;
-    exports.ɵey = LoadingOverlayService;
-    exports.ɵez = appInitialize;
+    exports.ɵer = ItemGroupComponent;
+    exports.ɵes = KeyHandlerDirective;
+    exports.ɵet = FormFieldMessageComponent;
+    exports.ɵeu = AlertComponent;
+    exports.ɵev = ModalCompactWrapperComponent;
+    exports.ɵew = ProgressCircleRingComponent;
+    exports.ɵex = ToastHelper;
+    exports.ɵey = ToastController;
+    exports.ɵez = LoadingOverlayService;
     exports.ɵf = ModalHelper;
-    exports.ɵfa = customElementsInitializer;
+    exports.ɵfa = appInitialize;
+    exports.ɵfb = customElementsInitializer;
     exports.ɵg = ModalAnimationBuilderService;
     exports.ɵh = PlatformService;
     exports.ɵi = WindowRef;