@kirbydesign/designsystem 5.2.2 → 5.4.1

package/lib/components/avatar/avatar.component.d.ts

@@ -11,7 +11,7 @@ export declare class AvatarComponent {
     shadow: boolean;
     text: string;
     overlay: boolean;
-    size: AvatarSize;
+    size: AvatarSize | `${AvatarSize}`;
     themeColor: NotificationColor | BrandColor | 'medium' | 'white' | 'dark' | 'light' | 'semi-light';
-    get _cssClass(): ("medium" | "success" | "primary" | "secondary" | "tertiary" | "warning" | "danger" | "light" | "dark" | "white" | "semi-light" | AvatarSize)[];
+    get _cssClass(): ("medium" | "success" | "primary" | "secondary" | "tertiary" | "warning" | "danger" | "light" | "dark" | "white" | "semi-light" | "xs" | "sm" | "md" | "lg")[];
 }

package/lib/components/button/button.component.d.ts

@@ -19,13 +19,13 @@ export declare class ButtonComponent implements AfterContentInit {
     get isIconLeft(): boolean;
     private _isIconRight;
     get isIconRight(): boolean;
-    get _cssClass(): ("success" | "warning" | "danger" | ButtonSize)[];
+    get _cssClass(): ("success" | "warning" | "danger" | "sm" | "md" | "lg")[];
     set attentionLevel(level: '1' | '2' | '3' | '4');
     set isDestructive(state: boolean);
     themeColor: NotificationColor;
     expand: 'full' | 'block';
     isFloating: boolean;
-    size: ButtonSize;
+    size: ButtonSize | `${ButtonSize}`;
     icon: IconComponent;
     iconElementRef: ElementRef<HTMLElement>;
     private hasText;

package/lib/components/chart/chart-js/chart-js.service.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { ChartOptions } from 'chart.js';
 import { AnnotationOptions } from 'chartjs-plugin-annotation';
-import { ChartDataLabelOptions, ChartDataset, ChartHighlightedElements, ChartType } from '../chart.types';
+import { ChartDataLabelOptions, ChartDataset, ChartHighlightedElements, ChartLabel, ChartType } from '../chart.types';
 import { ChartConfigService } from '../configs/chart-config.service';
 export declare class ChartJSService {
     private chartConfigService;
@@ -15,7 +15,7 @@ export declare class ChartJSService {
         targetElement: ElementRef<HTMLCanvasElement>;
         type: ChartType;
         data: ChartDataset[] | number[];
-        labels?: string[] | string[][];
+        labels?: ChartLabel[];
         customOptions?: ChartOptions;
         annotations?: AnnotationOptions[];
         dataLabelOptions?: ChartDataLabelOptions;
@@ -23,7 +23,7 @@ export declare class ChartJSService {
     }): void;
     redrawChart(): void;
     updateData(data: ChartDataset[] | number[]): void;
-    updateLabels(labels: string[] | string[][]): void;
+    updateLabels(labels: ChartLabel[]): void;
     updateType(type: ChartType, customOptions?: ChartOptions): void;
     setDataLabelOptions(dataLabelOptions: ChartDataLabelOptions): void;
     updateOptions(customOptions: ChartOptions, type: ChartType): void;
@@ -40,6 +40,7 @@ export declare class ChartJSService {
     private createStockOptionsObject;
     private createOptionsObject;
     private getDefaultStockLabels;
+    private getLabelsToApply;
     private createConfigurationObject;
     private addHighlightedElementsToDatasets;
     private createDatasets;

package/lib/components/chart/chart.component.d.ts

@@ -2,14 +2,14 @@ import { AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/co
 import { ChartOptions } from 'chart.js';
 import { AnnotationOptions } from 'chartjs-plugin-annotation';
 import { ChartJSService } from './chart-js/chart-js.service';
-import { ChartDataLabelOptions, ChartDataset, ChartHighlightedElements, ChartType } from './chart.types';
+import { ChartDataLabelOptions, ChartDataset, ChartHighlightedElements, ChartLabel, ChartType } from './chart.types';
 export declare class ChartComponent implements AfterViewInit, OnChanges {
     private chartJSService;
     type: ChartType;
     data: ChartDataset[] | number[];
     private _labels;
-    get labels(): string[] | string[][];
-    set labels(value: string[] | string[][]);
+    get labels(): ChartLabel[];
+    set labels(value: ChartLabel[]);
     set dataLabels(value: string[] | string[][]);
     customOptions?: ChartOptions;
     dataLabelOptions?: ChartDataLabelOptions;

package/lib/components/chart/chart.types.d.ts

@@ -8,6 +8,7 @@ export declare type ChartTypeConfig = {
 export declare type ChartTypesConfig = {
     [key in ChartType]: ChartTypeConfig;
 };
+export declare type ChartLabel = string | string[];
 export declare type ChartDataLabelOptions = {
     showMin?: boolean;
     showMax?: boolean;

package/lib/components/dropdown/dropdown.component.d.ts

@@ -20,8 +20,8 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     set selectedIndex(value: number);
     itemTextProperty: string;
     placeholder: string;
-    set popout(direction: HorizontalDirection);
-    get popout(): HorizontalDirection;
+    set popout(direction: HorizontalDirection | `${HorizontalDirection}`);
+    get popout(): HorizontalDirection | `${HorizontalDirection}`;
     attentionLevel: '1' | '2' | '3' | '4';
     readonly attentionLevelOpen = "2";
     expand?: 'block';

package/lib/components/form-field/input/input.component.d.ts

@@ -7,7 +7,7 @@ export declare class InputComponent implements OnChanges {
     private static typeToInputmodeMap;
     kirbyChange: EventEmitter<string>;
     set type(value: string);
-    size: InputSize;
+    size: InputSize | `${InputSize}`;
     /**
      * Removes padding, width, rounded borders and drop-shadow when set to `true`.
      */

package/lib/components/form-field/input-counter/input-counter.component.d.ts

@@ -1,6 +1,6 @@
-import { OnInit, OnDestroy } from '@angular/core';
-import { TextareaComponent } from './../textarea/textarea.component';
+import { OnDestroy, OnInit } from '@angular/core';
 import { InputComponent } from '../input/input.component';
+import { TextareaComponent } from './../textarea/textarea.component';
 export declare class InputCounterComponent implements OnInit, OnDestroy {
     listenTo: InputComponent | TextareaComponent;
     length: number;

package/lib/components/icon/icon.component.d.ts

@@ -11,7 +11,7 @@ export declare class IconComponent implements OnChanges {
     private iconRegistryService;
     defaultIcon: Icon;
     private _icon;
-    size: IconSize;
+    size: IconSize | `${IconSize}`;
     name: string;
     customName: string;
     get icon(): Icon;

package/lib/components/item/item.component.d.ts

@@ -8,6 +8,6 @@ export declare class ItemComponent {
     selected: boolean;
     selectable: boolean;
     reorderable: boolean;
-    size: ItemSize;
+    size: ItemSize | `${ItemSize}`;
     onMouseDown(event: MouseEvent): void;
 }

package/lib/components/popover/popover.component.d.ts

@@ -13,17 +13,16 @@ export declare class PopoverComponent implements AfterViewInit, OnDestroy {
     private zIndex;
     private document;
     wrapperElement: ElementRef<HTMLDivElement>;
-    popout: HorizontalDirection;
+    popout: HorizontalDirection | `${HorizontalDirection}`;
     target: HTMLElement | ElementRef<HTMLElement>;
     willHide: EventEmitter<void>;
     private get targetElement();
-    _backdropClick(): void;
     _onWindowResize(): void;
     constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private placePopoverAboveClosestModal;
-    private preventEvent;
+    private static preventEventOutsidePopover;
     private preventScroll;
     private releaseScroll;
     show(): void;

package/lib/components/segmented-control/segmented-control.component.d.ts

@@ -10,7 +10,7 @@ export declare class SegmentedControlComponent {
     private iconRegistryService;
     constructor(iconRegistryService: IconRegistryService);
     preventWrapperClick(event: Event): void;
-    mode: SegmentedControlMode;
+    mode: SegmentedControlMode | `${SegmentedControlMode}`;
     get _modeCssClass(): string;
     private _items;
     get items(): SegmentItem[];
@@ -23,6 +23,9 @@ export declare class SegmentedControlComponent {
     set value(value: SegmentItem);
     isSmallSize: boolean;
     set size(size: 'sm' | 'md');
+    private _disableChangeOnSwipe;
+    get disableChangeOnSwipe(): boolean;
+    set disableChangeOnSwipe(value: boolean);
     segmentSelect: EventEmitter<SegmentItem>;
     onSegmentSelect(selectedId: string): void;
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "5.2.2",
+  "version": "5.4.1",
   "dependencies": {
     "@fontsource/roboto": "4.2.1",
     "@ionic/angular": "5.5.2",
-    "@kirbydesign/core": "0.0.24",
+    "@kirbydesign/core": "0.0.26",
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",

package/polyfills/intersection-observer-polyfill-loader.js

@@ -1,14 +1,14 @@
 (function () {
-    // A technique for loading polyfills only when needed. Details here:
-    // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
-    if (polyfillNeeded()) {
-      // Browsers that doesn't support IntersectionObserver must load the polyfills first:
-      var script = document.createElement('script');
-      script.src = 'kirby/polyfills/intersection-observer-polyfill.min.js';
-      document.head.appendChild(script);
-    }
+  // A technique for loading polyfills only when needed. Details here:
+  // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
+  if (polyfillNeeded()) {
+    // Browsers that doesn't support IntersectionObserver must load the polyfills first:
+    var script = document.createElement('script');
+    script.src = 'kirby/polyfills/intersection-observer-polyfill.min.js';
+    document.head.appendChild(script);
+  }
 
-    function polyfillNeeded() {
-        return (typeof IntersectionObserver === 'undefined');
-    }
-  })();
+  function polyfillNeeded() {
+    return typeof IntersectionObserver === 'undefined';
+  }
+})();

package/polyfills/resize-observer-polyfill-loader.js

@@ -1,4 +1,4 @@
-(function() {
+(function () {
   // A technique for loading polyfills only when needed. Details here:
   // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
   if (polyfillNeeded()) {