@kirbydesign/designsystem 4.0.20 → 4.0.24

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 */
@@ -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 },] }],
@@ -7817,6 +7838,18 @@
         color: [{ type: i0.HostBinding, args: ['class',] }]
     };
 
+    var ListExperimentalComponent = /** @class */ (function () {
+        function ListExperimentalComponent() {
+        }
+        return ListExperimentalComponent;
+    }());
+    ListExperimentalComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-list-experimental',
+                    template: "<ion-list>\n  <ng-content></ng-content>\n</ion-list>\n"
+                },] }
+    ];
+
     var ReorderEvent = /** @class */ (function () {
         function ReorderEvent(ev, parentItem) {
             this.origEvent = ev;
@@ -9590,6 +9623,7 @@
         ListHeaderDirective,
         ListHeaderComponent,
         ListFooterDirective,
+        ListExperimentalComponent,
     ];
     var declarations = __spread(exportedDeclarations, [
         ListItemColorDirective,
@@ -9802,6 +9836,7 @@
         RadioGroupComponent,
         RangeComponent,
         ElementAsButtonDirective,
+        ItemGroupComponent,
     ];
     var declarations$1 = __spread(exportedDeclarations$1, [
         KeyHandlerDirective,
@@ -9984,11 +10019,13 @@
     exports.InputComponent = InputComponent;
     exports.InputCounterComponent = InputCounterComponent;
     exports.ItemComponent = ItemComponent;
+    exports.ItemGroupComponent = ItemGroupComponent;
     exports.ItemModule = ItemModule;
     exports.KeyHandlerDirective = KeyHandlerDirective;
     exports.KirbyModule = KirbyModule;
     exports.LabelComponent = LabelComponent;
     exports.ListComponent = ListComponent;
+    exports.ListExperimentalComponent = ListExperimentalComponent;
     exports.ListFlexItemDirective = ListFlexItemDirective;
     exports.ListFooterDirective = ListFooterDirective;
     exports.ListHeaderComponent = ListHeaderComponent;
@@ -10087,77 +10124,79 @@
     exports.ɵch = ListItemComponent;
     exports.ɵci = ListSectionHeaderComponent;
     exports.ɵcj = ListHeaderComponent;
-    exports.ɵck = ListItemColorDirective;
-    exports.ɵcl = ChartModule;
-    exports.ɵcm = ChartComponent;
-    exports.ɵcn = ChartJSService;
-    exports.ɵco = ChartConfigService;
-    exports.ɵcp = CardComponent;
-    exports.ɵcq = CardHeaderComponent;
-    exports.ɵcr = CardFooterComponent;
-    exports.ɵcs = ChartDeprecatedComponent;
-    exports.ɵct = ChartDeprecatedHelper;
-    exports.ɵcu = DONUT_OPTIONS;
-    exports.ɵcv = DonutOptions;
-    exports.ɵcw = AREASPLINE_OPTIONS;
-    exports.ɵcx = AreaSplineOptions;
-    exports.ɵcy = TIMESERIES_OPTIONS;
-    exports.ɵcz = TimeSeriesOptions;
+    exports.ɵck = ListExperimentalComponent;
+    exports.ɵcl = ListItemColorDirective;
+    exports.ɵcm = ChartModule;
+    exports.ɵcn = ChartComponent;
+    exports.ɵco = ChartJSService;
+    exports.ɵcp = ChartConfigService;
+    exports.ɵcq = CardComponent;
+    exports.ɵcr = CardHeaderComponent;
+    exports.ɵcs = CardFooterComponent;
+    exports.ɵct = ChartDeprecatedComponent;
+    exports.ɵcu = ChartDeprecatedHelper;
+    exports.ɵcv = DONUT_OPTIONS;
+    exports.ɵcw = DonutOptions;
+    exports.ɵcx = AREASPLINE_OPTIONS;
+    exports.ɵcy = AreaSplineOptions;
+    exports.ɵcz = TIMESERIES_OPTIONS;
     exports.ɵd = RouterOutletComponent;
-    exports.ɵda = ACTIVITYGAUGE_OPTIONS;
-    exports.ɵdb = ActivityGaugeOptions;
-    exports.ɵdc = StockChartDeprecatedComponent;
-    exports.ɵdd = GridComponent;
-    exports.ɵde = BreakpointHelperService;
-    exports.ɵdf = ComponentLoaderDirective;
-    exports.ɵdg = AvatarComponent;
-    exports.ɵdh = CalendarComponent;
-    exports.ɵdi = CalendarHelper;
-    exports.ɵdj = CheckboxComponent;
-    exports.ɵdk = ActionSheetComponent;
-    exports.ɵdl = ModalFooterComponent;
-    exports.ɵdm = ModalRouterLinkDirective;
-    exports.ɵdn = SegmentedControlComponent;
-    exports.ɵdo = ChipComponent;
-    exports.ɵdp = ThemeColorDirective;
-    exports.ɵdq = DateInputDirective;
-    exports.ɵdr = DecimalMaskDirective;
-    exports.ɵds = SlideButtonComponent;
-    exports.ɵdt = ToggleComponent;
-    exports.ɵdu = EmptyStateComponent;
-    exports.ɵdv = FormFieldComponent;
-    exports.ɵdw = InputCounterComponent;
-    exports.ɵdx = RadioGroupComponent;
-    exports.ɵdy = RadioComponent;
-    exports.ɵdz = InputComponent;
+    exports.ɵda = TimeSeriesOptions;
+    exports.ɵdb = ACTIVITYGAUGE_OPTIONS;
+    exports.ɵdc = ActivityGaugeOptions;
+    exports.ɵdd = StockChartDeprecatedComponent;
+    exports.ɵde = GridComponent;
+    exports.ɵdf = BreakpointHelperService;
+    exports.ɵdg = ComponentLoaderDirective;
+    exports.ɵdh = AvatarComponent;
+    exports.ɵdi = CalendarComponent;
+    exports.ɵdj = CalendarHelper;
+    exports.ɵdk = CheckboxComponent;
+    exports.ɵdl = ActionSheetComponent;
+    exports.ɵdm = ModalFooterComponent;
+    exports.ɵdn = ModalRouterLinkDirective;
+    exports.ɵdo = SegmentedControlComponent;
+    exports.ɵdp = ChipComponent;
+    exports.ɵdq = ThemeColorDirective;
+    exports.ɵdr = DateInputDirective;
+    exports.ɵds = DecimalMaskDirective;
+    exports.ɵdt = SlideButtonComponent;
+    exports.ɵdu = ToggleComponent;
+    exports.ɵdv = EmptyStateComponent;
+    exports.ɵdw = FormFieldComponent;
+    exports.ɵdx = InputCounterComponent;
+    exports.ɵdy = RadioGroupComponent;
+    exports.ɵdz = RadioComponent;
     exports.ɵe = ModalController;
-    exports.ɵea = TextareaComponent;
-    exports.ɵeb = FabSheetComponent;
-    exports.ɵec = DividerComponent;
-    exports.ɵed = ReorderListComponent;
-    exports.ɵee = DropdownComponent;
-    exports.ɵef = PopoverComponent;
-    exports.ɵeg = KeyboardHandlerService;
-    exports.ɵeh = LoadingOverlayComponent;
-    exports.ɵei = ProgressCircleComponent;
-    exports.ɵej = FlagComponent;
-    exports.ɵek = SlideDirective;
-    exports.ɵel = SlidesComponent;
-    exports.ɵem = AccordionDirective;
-    exports.ɵen = AccordionItemComponent;
-    exports.ɵeo = RangeComponent;
-    exports.ɵep = ElementAsButtonDirective;
-    exports.ɵeq = KeyHandlerDirective;
-    exports.ɵer = FormFieldMessageComponent;
-    exports.ɵes = AlertComponent;
-    exports.ɵet = ModalCompactWrapperComponent;
-    exports.ɵeu = ProgressCircleRingComponent;
-    exports.ɵev = ToastHelper;
-    exports.ɵew = ToastController;
-    exports.ɵex = LoadingOverlayService;
-    exports.ɵey = appInitialize;
-    exports.ɵez = customElementsInitializer;
+    exports.ɵea = InputComponent;
+    exports.ɵeb = TextareaComponent;
+    exports.ɵec = FabSheetComponent;
+    exports.ɵed = DividerComponent;
+    exports.ɵee = ReorderListComponent;
+    exports.ɵef = DropdownComponent;
+    exports.ɵeg = PopoverComponent;
+    exports.ɵeh = KeyboardHandlerService;
+    exports.ɵei = LoadingOverlayComponent;
+    exports.ɵej = ProgressCircleComponent;
+    exports.ɵek = FlagComponent;
+    exports.ɵel = SlideDirective;
+    exports.ɵem = SlidesComponent;
+    exports.ɵen = AccordionDirective;
+    exports.ɵeo = AccordionItemComponent;
+    exports.ɵep = RangeComponent;
+    exports.ɵeq = ElementAsButtonDirective;
+    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 = appInitialize;
+    exports.ɵfb = customElementsInitializer;
     exports.ɵg = ModalAnimationBuilderService;
     exports.ɵh = PlatformService;
     exports.ɵi = WindowRef;