@kirbydesign/designsystem 4.0.6 → 4.0.10

package/fesm2015/kirbydesign-designsystem.js

@@ -1,4 +1,6 @@
-import { Component, Input, EventEmitter, Output, Injectable, ɵɵdefineInjectable, ElementRef, ViewChild, ɵɵinject, InjectionToken, Injector, HostListener, Optional, Inject, HostBinding, ContentChild, NgZone, RendererStyleFlags2, Renderer2, ComponentFactoryResolver, ViewChildren, NgModule, ChangeDetectionStrategy, LOCALE_ID, Directive, forwardRef, ChangeDetectorRef, TemplateRef, ContentChildren, INJECTOR, Pipe, SkipSelf, ViewContainerRef } from '@angular/core';
+import { DesignTokenHelper, ColorHelper, capitalizeFirstLetter } from '@kirbydesign/core';
+export { ColorHelper, DesignTokenHelper, camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, kebabToTitleCase } from '@kirbydesign/core';
+import { Component, Input, EventEmitter, Output, Injectable, ɵɵdefineInjectable, ElementRef, ViewChild, ɵɵinject, InjectionToken, Injector, HostListener, Optional, Inject, HostBinding, ContentChild, NgZone, RendererStyleFlags2, Renderer2, ComponentFactoryResolver, ViewChildren, NgModule, ChangeDetectionStrategy, LOCALE_ID, Directive, forwardRef, ChangeDetectorRef, TemplateRef, ContentChildren, INJECTOR, Pipe, SkipSelf, ViewContainerRef, APP_INITIALIZER } from '@angular/core';
 import { ModalController as ModalController$1, IonContent, IonHeader, IonToolbar, IonTitle, AnimationController, IonApp, IonicModule, IonRadio, IonFabButton, LoadingController, IonItemSliding, IonTabs, IonFooter, ToastController as ToastController$1 } from '@ionic/angular';
 export { IonRouterOutlet, NavController } from '@ionic/angular';
 import { NavigationEnd, Router, ActivatedRoute, RouterOutlet, ROUTES, NavigationStart, RouterModule } from '@angular/router';
@@ -7,7 +9,7 @@ import { filter, first, startWith, map, pairwise, debounceTime, takeUntil } from
 import { CommonModule, formatNumber, getLocaleDateFormat, FormatWidth, getLocaleNumberSymbol, NumberSymbol, DOCUMENT } from '@angular/common';
 import * as Highcharts from 'highcharts';
 import { chart, dateFormat } from 'highcharts';
-import { CategoryScale, LinearScale, BarElement, LineElement, PointElement, BarController, LineController, Chart, Legend } from 'chart.js';
+import { CategoryScale, LinearScale, BarElement, LineElement, PointElement, BarController, LineController, Filler, Chart, Legend } from 'chart.js';
 export { Chart } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import * as Highcharts$1 from 'highcharts/highstock';
@@ -22,97 +24,19 @@ import Inputmask from 'inputmask/lib/inputmask';
 import 'inputmask/lib/extensions/inputmask.numeric.extensions';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { UiScrollModule } from 'ngx-ui-scroll';
-
-const styles = {
-    sizes: {
-        xxxl: '56px',
-        xxl: '48px',
-        xl: '40px',
-        l: '32px',
-        m: '24px',
-        s: '16px',
-        xs: '12px',
-        xxs: '8px',
-        xxxs: '4px',
-        xxxxs: '2px',
-    },
-    fontSizes: {
-        xxxxl: '72px',
-        xxxl: '56px',
-        xxl: '40px',
-        xl: '32px',
-        l: '22px',
-        m: '18px',
-        n: '16px',
-        s: '14px',
-        xs: '12px',
-        xxs: '10px',
-    },
-    lineHeight: { xl: '38px', l: '28px', m: '24px', n: '24px', s: '20px', xs: '16px', xxs: '11px' },
-    fontWeight: { light: '300', normal: '400', bold: '700', black: '900' },
-    iconFontSizes: { xs: '16px', sm: '24px', md: '32px', lg: '56px' },
-    zLayers: {
-        default: '1',
-        segmentBadge: '2',
-        dropdown: '800',
-        popover: '850',
-        modalOverlay: '900',
-        modal: '901',
-        loadingOverlay: '1001',
-    },
-    borderRadius: '16px',
-    borderRadiusRound: '999px',
-    breakpoints: {
-        small: '321px',
-        medium: '721px',
-        large: '1025px',
-        xlarge: '60em',
-        xxlarge: '80em',
-    },
-    elevations: {
-        2: 'rgba(28, 28, 28, 0.3) 0px 5px 10px -10px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
-        4: 'rgba(28, 28, 28, 0.3) 0px 10px 15px -10px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
-        8: 'rgba(28, 28, 28, 0.3) 0px 20px 30px -15px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
-    },
-    avatarSizes: { xs: '32px', s: '40px', m: '56px', l: '96px' },
-    avatarBadgeSize: '16px',
-    pageContentMaxWidth: '720px',
-    alertMaxWidth: '359px',
-    compactModalMaxWidth: '359px',
-    modalMaxWidth: '720px',
-    modalHeights: { s: '288px', m: '460px', l: '576px' },
-    modalDefaultHeight: '460px',
-    drawerDefaultHeight: '288px',
-    itemHeights: { m: '56px', s: '44px', xs: '32px' },
-    dropdownItemHeight: '44px',
-    fatFingerSize: '44px',
-    checkboxRadioSizes: { xs: '32px', sm: '44px', md: '56px' },
-    checkboxRadioSpacing: { toEdge: '16px', toLabel: '12px' },
-    softKeyboardTransitionEnter: '250ms ease-out 1ms',
-    softKeyboardTransitionLeave: '150ms ease-out',
-    transitionDurations: { quick: '200ms', short: '300ms', long: '500ms', extraLong: '1000ms' },
-    transitionEasings: {
-        static: 'linear',
-        enter: 'ease-out',
-        exit: 'ease-in',
-        enterExit: 'ease',
-        motion: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
-        modal: { enter: 'cubic-bezier(0.32, 0.72, 0, 1)', exit: 'cubic-bezier(0.32, 0.72, 0, 1)' },
-    },
-    loadingOverlayBackdropOpacity: '0.8',
-};
+import { defineCustomElements } from '@kirbydesign/core/loader';
 
 var KirbyAnimation;
 (function (KirbyAnimation) {
     let Duration;
     (function (Duration) {
         // Duration in milliseconds
-        Duration[Duration["QUICK"] = parseInt(styles.transitionDurations.quick)] = "QUICK";
-        Duration[Duration["SHORT"] = parseInt(styles.transitionDurations.short)] = "SHORT";
-        Duration[Duration["LONG"] = parseInt(styles.transitionDurations.long)] = "LONG";
-        Duration[Duration["EXTRA_LONG"] = parseInt(styles.transitionDurations.extraLong)] = "EXTRA_LONG";
+        Duration[Duration["QUICK"] = parseInt(DesignTokenHelper.transitionDuration('quick'))] = "QUICK";
+        Duration[Duration["SHORT"] = parseInt(DesignTokenHelper.transitionDuration('short'))] = "SHORT";
+        Duration[Duration["LONG"] = parseInt(DesignTokenHelper.transitionDuration('long'))] = "LONG";
+        Duration[Duration["EXTRA_LONG"] = parseInt(DesignTokenHelper.transitionDuration('extraLong'))] = "EXTRA_LONG";
     })(Duration = KirbyAnimation.Duration || (KirbyAnimation.Duration = {}));
-    KirbyAnimation.Easing = styles.transitionEasings;
+    KirbyAnimation.Easing = DesignTokenHelper.transitionEasings();
 })(KirbyAnimation || (KirbyAnimation = {}));
 
 class RouterOutletComponent {
@@ -182,7 +106,7 @@ class ActionSheetHelper {
                 component: ActionSheetComponent,
                 cssClass: ['kirby-overlay', 'kirby-action-sheet'],
                 componentProps: Object.assign(Object.assign({}, config), { cancel: cancel, itemSelect: itemSelect }),
-                backdropDismiss: false,
+                backdropDismiss: true,
             });
             const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
             const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
@@ -702,429 +626,6 @@ ModalCompactWrapperComponent.propDecorators = {
     onFocusChange: [{ type: HostListener, args: ['window:focus',] }, { type: HostListener, args: ['window:focusout',] }]
 };
 
-const styles$1 = {
-    brandColors: { primary: '#00e89a', secondary: '#005c3c', tertiary: '#01352c' },
-    notificationColors: { success: '#2cf287', warning: '#ffca3a', danger: '#ff595e' },
-    systemColors: {
-        backgroundColor: '#f6f6f6',
-        white: '#ffffff',
-        light: '#f2f2f2',
-        semiLight: '#ebebeb',
-        medium: '#d1d1d1',
-        semiDark: '#8e8e8e',
-        dark: '#353535',
-        black: '#1c1c1c',
-    },
-    textColors: { white: '#ffffff', semiDark: '#707070', black: '#1c1c1c', danger: '#ee0d0d' },
-    focusRingColor: '#4d90fe',
-    mainColors: {
-        primary: '#00e89a',
-        secondary: '#005c3c',
-        tertiary: '#01352c',
-        success: '#2cf287',
-        warning: '#ffca3a',
-        danger: '#ff595e',
-        light: '#f2f2f2',
-        medium: '#d1d1d1',
-        dark: '#353535',
-    },
-    kirbyColors: {
-        black: '#1c1c1c',
-        blackRgb: '28, 28, 28',
-        blackContrast: '#ffffff',
-        blackContrastRgb: '255, 255, 255',
-        blackShade: '#191919',
-        blackShadeRgb: '25, 25, 25',
-        blackTint: '#333333',
-        blackTintRgb: '51, 51, 51',
-        blackColorBrightness: 'dark',
-        dark: '#353535',
-        darkRgb: '53, 53, 53',
-        darkContrast: '#ffffff',
-        darkContrastRgb: '255, 255, 255',
-        darkShade: '#2f2f2f',
-        darkShadeRgb: '47, 47, 47',
-        darkTint: '#494949',
-        darkTintRgb: '73, 73, 73',
-        darkColorBrightness: 'dark',
-        semiDark: '#8e8e8e',
-        semiDarkRgb: '142, 142, 142',
-        semiDarkContrast: '#1c1c1c',
-        semiDarkContrastRgb: '28, 28, 28',
-        semiDarkShade: '#7d7d7d',
-        semiDarkShadeRgb: '125, 125, 125',
-        semiDarkTint: '#999999',
-        semiDarkTintRgb: '153, 153, 153',
-        semiDarkColorBrightness: 'light',
-        medium: '#d1d1d1',
-        mediumRgb: '209, 209, 209',
-        mediumContrast: '#1c1c1c',
-        mediumContrastRgb: '28, 28, 28',
-        mediumShade: '#b8b8b8',
-        mediumShadeRgb: '184, 184, 184',
-        mediumTint: '#d6d6d6',
-        mediumTintRgb: '214, 214, 214',
-        mediumColorBrightness: 'light',
-        semiLight: '#ebebeb',
-        semiLightRgb: '235, 235, 235',
-        semiLightContrast: '#1c1c1c',
-        semiLightContrastRgb: '28, 28, 28',
-        semiLightShade: '#cfcfcf',
-        semiLightShadeRgb: '207, 207, 207',
-        semiLightTint: '#ededed',
-        semiLightTintRgb: '237, 237, 237',
-        semiLightColorBrightness: 'light',
-        light: '#f2f2f2',
-        lightRgb: '242, 242, 242',
-        lightContrast: '#1c1c1c',
-        lightContrastRgb: '28, 28, 28',
-        lightShade: '#d5d5d5',
-        lightShadeRgb: '213, 213, 213',
-        lightTint: '#f3f3f3',
-        lightTintRgb: '243, 243, 243',
-        lightColorBrightness: 'light',
-        white: '#ffffff',
-        whiteRgb: '255, 255, 255',
-        whiteContrast: '#1c1c1c',
-        whiteContrastRgb: '28, 28, 28',
-        whiteShade: '#e0e0e0',
-        whiteShadeRgb: '224, 224, 224',
-        whiteTint: 'white',
-        whiteTintRgb: '255, 255, 255',
-        whiteColorBrightness: 'white',
-        backgroundColor: '#f6f6f6',
-        backgroundColorRgb: '246, 246, 246',
-        backgroundColorContrast: '#1c1c1c',
-        backgroundColorContrastRgb: '28, 28, 28',
-        backgroundColorShade: '#d8d8d8',
-        backgroundColorShadeRgb: '216, 216, 216',
-        backgroundColorTint: '#f7f7f7',
-        backgroundColorTintRgb: '247, 247, 247',
-        backgroundColorColorBrightness: 'light',
-        danger: '#ff595e',
-        dangerRgb: '255, 89, 94',
-        dangerContrast: '#1c1c1c',
-        dangerContrastRgb: '28, 28, 28',
-        dangerShade: '#e04e53',
-        dangerShadeRgb: '224, 78, 83',
-        dangerTint: '#ff6a6e',
-        dangerTintRgb: '255, 106, 110',
-        dangerColorBrightness: 'light',
-        warning: '#ffca3a',
-        warningRgb: '255, 202, 58',
-        warningContrast: '#1c1c1c',
-        warningContrastRgb: '28, 28, 28',
-        warningShade: '#e0b233',
-        warningShadeRgb: '224, 178, 51',
-        warningTint: '#ffcf4e',
-        warningTintRgb: '255, 207, 78',
-        warningColorBrightness: 'light',
-        success: '#2cf287',
-        successRgb: '44, 242, 135',
-        successContrast: '#1c1c1c',
-        successContrastRgb: '28, 28, 28',
-        successShade: '#27d577',
-        successShadeRgb: '39, 213, 119',
-        successTint: '#41f393',
-        successTintRgb: '65, 243, 147',
-        successColorBrightness: 'light',
-        tertiary: '#01352c',
-        tertiaryRgb: '1, 53, 44',
-        tertiaryContrast: '#ffffff',
-        tertiaryContrastRgb: '255, 255, 255',
-        tertiaryShade: '#012f27',
-        tertiaryShadeRgb: '1, 47, 39',
-        tertiaryTint: '#1a4941',
-        tertiaryTintRgb: '26, 73, 65',
-        tertiaryColorBrightness: 'dark',
-        secondary: '#005c3c',
-        secondaryRgb: '0, 92, 60',
-        secondaryContrast: '#ffffff',
-        secondaryContrastRgb: '255, 255, 255',
-        secondaryShade: '#005135',
-        secondaryShadeRgb: '0, 81, 53',
-        secondaryTint: '#1a6c50',
-        secondaryTintRgb: '26, 108, 80',
-        secondaryColorBrightness: 'dark',
-        primary: '#00e89a',
-        primaryRgb: '0, 232, 154',
-        primaryContrast: '#1c1c1c',
-        primaryContrastRgb: '28, 28, 28',
-        primaryShade: '#00cc88',
-        primaryShadeRgb: '0, 204, 136',
-        primaryTint: '#1aeaa4',
-        primaryTintRgb: '26, 234, 164',
-        primaryColorBrightness: 'light',
-    },
-    kirbyTextColors: {
-        danger: '#ee0d0d',
-        dangerRgb: '238, 13, 13',
-        dangerContrast: '#ffffff',
-        dangerContrastRgb: '255, 255, 255',
-        dangerShade: '#d10b0b',
-        dangerShadeRgb: '209, 11, 11',
-        dangerTint: '#f02525',
-        dangerTintRgb: '240, 37, 37',
-        dangerColorBrightness: 'dark',
-        black: '#1c1c1c',
-        blackRgb: '28, 28, 28',
-        blackContrast: '#ffffff',
-        blackContrastRgb: '255, 255, 255',
-        blackShade: '#191919',
-        blackShadeRgb: '25, 25, 25',
-        blackTint: '#333333',
-        blackTintRgb: '51, 51, 51',
-        blackColorBrightness: 'dark',
-        semiDark: '#707070',
-        semiDarkRgb: '112, 112, 112',
-        semiDarkContrast: '#ffffff',
-        semiDarkContrastRgb: '255, 255, 255',
-        semiDarkShade: '#636363',
-        semiDarkShadeRgb: '99, 99, 99',
-        semiDarkTint: '#7e7e7e',
-        semiDarkTintRgb: '126, 126, 126',
-        semiDarkColorBrightness: 'dark',
-        white: '#ffffff',
-        whiteRgb: '255, 255, 255',
-        whiteContrast: '#1c1c1c',
-        whiteContrastRgb: '28, 28, 28',
-        whiteShade: '#e0e0e0',
-        whiteShadeRgb: '224, 224, 224',
-        whiteTint: 'white',
-        whiteTintRgb: '255, 255, 255',
-        whiteColorBrightness: 'white',
-    },
-};
-
-const kebabToCamelCase = (kebabString) => {
-    if (!kebabString.length || kebabString.length === 1) {
-        return kebabString;
-    }
-    const stringInCamelCase = kebabString
-        .split('-')
-        .map((part, index) => (index === 0 ? part : part[0].toUpperCase() + part.substr(1)))
-        .join('');
-    return stringInCamelCase;
-};
-const camelToKebabCase = (camelString) => {
-    if (!camelString.length || camelString.length === 1) {
-        return camelString;
-    }
-    const stringInKebabCase = camelString
-        .split('')
-        .map((char, index) => {
-        const isUppercase = char.toUpperCase() === char;
-        if (!isUppercase || char === '-') {
-            return char;
-        }
-        return index === 0 ? char.toLowerCase() : `-${char.toLowerCase()}`;
-    })
-        .join('');
-    return stringInKebabCase;
-};
-const kebabToTitleCase = (kebabString) => {
-    if (!kebabString.length || kebabString.length === 1) {
-        return kebabString;
-    }
-    const stringInTitleCase = kebabString
-        .split('-')
-        .map((word) => {
-        return word[0].toUpperCase() + word.slice(1);
-    })
-        .join(' ');
-    return stringInTitleCase;
-};
-const capitalizeFirstLetter = (string) => {
-    if (typeof string !== 'string') {
-        return '';
-    }
-    return string.charAt(0).toUpperCase() + string.slice(1);
-};
-
-class ColorHelper {
-    static getMainColors() {
-        // Do not remove the `colorArray` const, since it'll break the ngpackagr build, for more info see:
-        // https://github.com/ng-packagr/ng-packagr/issues/696
-        const colorArray = Object.entries(styles$1.mainColors).map(([name, value]) => ({ name, value }));
-        return colorArray;
-    }
-    static mapToKirbyColorArray(colors, fullColorMap = styles$1.kirbyColors) {
-        const TINT = 'Tint';
-        const SHADE = 'Shade';
-        const CONTRAST = 'Contrast';
-        const colorArray = Object.entries(colors).map(([name, value]) => ({
-            name: camelToKebabCase(name),
-            value,
-            base: value,
-            tint: {
-                value: fullColorMap[name + TINT],
-                name: camelToKebabCase(name + TINT),
-            },
-            shade: {
-                value: fullColorMap[name + SHADE],
-                name: camelToKebabCase(name + SHADE),
-            },
-            contrast: {
-                value: fullColorMap[name + CONTRAST],
-                name: camelToKebabCase(name + CONTRAST),
-            },
-        }));
-        // Do not remove the `colorArray` const, since it'll break the ngpackagr build, for more info see:
-        // https://github.com/ng-packagr/ng-packagr/issues/696
-        return colorArray;
-    }
-    static getBackgroundColor() {
-        return ColorHelper.getColor('background-color');
-    }
-    static getColorBrightness(name) {
-        return ColorHelper.getColor(name + '-color-brightness');
-    }
-    static getThemeColorRgbString(name) {
-        const rgbValue = ColorHelper.getColor(name + '-rgb');
-        return `rgb(${rgbValue})`;
-    }
-    static getThemeTextColorRgbString(name) {
-        const rgbValue = ColorHelper.getTextColor(name + '-rgb');
-        return `rgb(${rgbValue})`;
-    }
-    static getThemeColorHexString(name) {
-        return ColorHelper.getColor(name);
-    }
-    static getThemeTextColorHexString(name) {
-        return ColorHelper.getTextColor(name);
-    }
-    static getTransparentColorRgbString() {
-        return 'rgba(0, 0, 0, 0)';
-    }
-    static colorStringToRgbString(color) {
-        if (color.indexOf('rgb') === 0) {
-            return color;
-        }
-        if (color.indexOf('#') === 0) {
-            return ColorHelper.hexToRGB(color);
-        }
-        if (color.split(',').length === 3) {
-            return `rgb(${color})`;
-        }
-        if (color.split(',').length === 4) {
-            return `rgba(${color})`;
-        }
-        const ctx = document.createElement('canvas').getContext('2d');
-        ctx.fillStyle = color;
-        const renderedColor = ctx.fillStyle.toString();
-        return ColorHelper.colorStringToRgbString(renderedColor);
-    }
-    static hexToRGB(hex) {
-        let r = '0', g = '0', b = '0';
-        // 3 digits
-        if (hex.length === 4) {
-            r = '0x' + hex[1] + hex[1];
-            g = '0x' + hex[2] + hex[2];
-            b = '0x' + hex[3] + hex[3];
-            // 6 digits
-        }
-        else if (hex.length === 7) {
-            r = '0x' + hex[1] + hex[2];
-            g = '0x' + hex[3] + hex[4];
-            b = '0x' + hex[5] + hex[6];
-        }
-        return `rgb(${+r}, ${+g}, ${+b})`;
-    }
-    static getColor(name) {
-        const camelCaseKey = kebabToCamelCase(name);
-        const found = styles$1.kirbyColors[camelCaseKey];
-        return found || null;
-    }
-    static getTextColor(name) {
-        const camelCaseKey = kebabToCamelCase(name);
-        const found = styles$1.kirbyTextColors[camelCaseKey];
-        return found || null;
-    }
-}
-ColorHelper.brandColors = ColorHelper.mapToKirbyColorArray(styles$1.brandColors);
-ColorHelper.notificationColors = ColorHelper.mapToKirbyColorArray(styles$1.notificationColors);
-ColorHelper.systemColors = ColorHelper.mapToKirbyColorArray(styles$1.systemColors);
-ColorHelper.textColors = ColorHelper.mapToKirbyColorArray(styles$1.textColors, styles$1.kirbyTextColors);
-ColorHelper.mainColors = ColorHelper.getMainColors();
-
-class DesignTokenHelper {
-    static getColor(name, variant) {
-        const variantSuffix = variant ? `-${variant}` : '';
-        const colorVariant = `${name}${variantSuffix}`;
-        return {
-            name: name,
-            variant: variant,
-            fullname: colorVariant,
-            value: ColorHelper.getThemeColorRgbString(colorVariant),
-            hex: ColorHelper.getThemeColorHexString(colorVariant),
-        };
-    }
-    static getTextColor(name, variant) {
-        const variantSuffix = variant ? `-${variant}` : '';
-        const colorVariant = `${name}${variantSuffix}`;
-        return {
-            name: name,
-            variant: variant,
-            fullname: colorVariant,
-            value: ColorHelper.getThemeTextColorRgbString(colorVariant),
-            hex: ColorHelper.getThemeTextColorHexString(colorVariant),
-        };
-    }
-    static size(key) {
-        return styles.sizes[key];
-    }
-    static fontSize(key) {
-        return styles.fontSizes[key];
-    }
-    static iconFontSize(key) {
-        return styles.iconFontSizes[key];
-    }
-    static fontWeight(key) {
-        return styles.fontWeight[key];
-    }
-    static lineHeight(key) {
-        return styles.lineHeight[key];
-    }
-    static backgroundColor() {
-        return ColorHelper.getBackgroundColor();
-    }
-    static borderRadius() {
-        return styles.borderRadius;
-    }
-    static borderRadiusRound() {
-        return styles.borderRadiusRound;
-    }
-    static alertMaxWidth() {
-        return styles.alertMaxWidth;
-    }
-    static compactModalMaxWidth() {
-        return styles.compactModalMaxWidth;
-    }
-    static dropdownItemHeight() {
-        return styles.dropdownItemHeight;
-    }
-    static avatarSize(key) {
-        return styles.avatarSizes[key];
-    }
-    static fatFingerSize() {
-        return styles.fatFingerSize;
-    }
-    static getElevation(z) {
-        return styles.elevations[z];
-    }
-    static itemHeight(key) {
-        return styles.itemHeights[key];
-    }
-    static zLayer(key) {
-        return styles.zLayers[key];
-    }
-}
-DesignTokenHelper.breakpoints = styles.breakpoints;
-DesignTokenHelper.softKeyboardTransitionEnter = styles.softKeyboardTransitionEnter;
-DesignTokenHelper.softKeyboardTransitionLeave = styles.softKeyboardTransitionLeave;
-DesignTokenHelper.modalDefaultHeight = styles.modalDefaultHeight;
-DesignTokenHelper.drawerDefaultHeight = styles.drawerDefaultHeight;
-
 class PlatformService {
     constructor(windowRef) {
         this.windowRef = windowRef;
@@ -2550,7 +2051,7 @@ AvatarComponent.decorators = [
                 selector: 'kirby-avatar',
                 template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-right:-2px;--kirby-badge-top:-2px;--kirby-badge-zindex:2}.avatar,:host{position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size:24px}.avatar.shadow{box-shadow:0 2px 4px 2px hsla(0,0%,44.3%,.4)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host(.sm) .avatar,:host-context(kirby-progress-circle.sm) .avatar{width:40px;height:40px}:host(.sm) .avatar .avatar-text,:host-context(kirby-progress-circle.sm) .avatar .avatar-text{font-size:14px}:host(.md),:host-context(kirby-progress-circle.md){--kirby-badge-right:0px;--kirby-badge-top:0px}:host(.md) .avatar,:host-context(kirby-progress-circle.md) .avatar{width:56px;height:56px;--kirby-icon-font-size:32px}:host(.md) .avatar .avatar-text,:host-context(kirby-progress-circle.md) .avatar .avatar-text{font-size:18px}:host(.lg),:host-context(kirby-progress-circle.lg){--kirby-badge-right:6px;--kirby-badge-top:6px}:host(.lg) .avatar,:host-context(kirby-progress-circle.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size:56px}:host(.lg) .avatar .avatar-text,:host-context(kirby-progress-circle.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}"]
+                styles: [":host{--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-right:-2px;--kirby-badge-top:-2px;--kirby-badge-z-index:2}.avatar,:host{position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size:24px}.avatar.shadow{box-shadow:0 2px 4px 2px hsla(0,0%,44.3%,.4)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host(.sm) .avatar,:host-context(kirby-progress-circle.sm) .avatar{width:40px;height:40px}:host(.sm) .avatar .avatar-text,:host-context(kirby-progress-circle.sm) .avatar .avatar-text{font-size:14px}:host(.md),:host-context(kirby-progress-circle.md){--kirby-badge-right:0px;--kirby-badge-top:0px}:host(.md) .avatar,:host-context(kirby-progress-circle.md) .avatar{width:56px;height:56px;--kirby-icon-font-size:32px}:host(.md) .avatar .avatar-text,:host-context(kirby-progress-circle.md) .avatar .avatar-text{font-size:18px}:host(.lg),:host-context(kirby-progress-circle.lg){--kirby-badge-right:6px;--kirby-badge-top:6px}:host(.lg) .avatar,:host-context(kirby-progress-circle.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size:56px}:host(.lg) .avatar .avatar-text,:host-context(kirby-progress-circle.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}"]
             },] }
 ];
 AvatarComponent.propDecorators = {
@@ -2564,19 +2065,6 @@ AvatarComponent.propDecorators = {
     _cssClass: [{ type: HostBinding, args: ['class',] }]
 };
 
-class BadgeComponent {
-}
-BadgeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'kirby-badge',
-                template: "<ion-badge color=\"none\">\n  <ng-content *ngIf=\"!text\"></ng-content>\n  <ng-container *ngIf=\"text\">{{ text }}</ng-container>\n</ion-badge>\n",
-                styles: [":root{--kirby-badge-elevation:none;--kirby-badge-position:relative;--kirby-badge-left:0;--kirby-badge-right:0;--kirby-badge-top:0;--kirby-badge-zindex:none}:host{--kirby-badge-background-color:var(--kirby-white);--kirby-badge-color:var(--kirby-white-contrast);--ion-color-base:var(--kirby-badge-background-color);--ion-color-contrast:var(--kirby-badge-color);position:var(--kirby-badge-position);left:var(--kirby-badge-left);right:var(--kirby-badge-right);top:var(--kirby-badge-top);z-index:var(--kirby-badge-zindex);font-size:10px;line-height:1}:host ion-badge{--padding-top:3px;--padding-end:5px;--padding-bottom:3px;--padding-start:5px;box-sizing:border-box;border-radius:8px;min-width:16px;min-height:16px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation)}:host ::ng-deep kirby-icon{--kirby-icon-font-size:16px;position:absolute;top:0;left:0}:host(.success){--kirby-badge-background-color:var(--kirby-success);--kirby-badge-color:var(--kirby-success-contrast)}:host(.warning){--kirby-badge-background-color:var(--kirby-warning);--kirby-badge-color:var(--kirby-warning-contrast)}:host(.danger){--kirby-badge-background-color:var(--kirby-danger);--kirby-badge-color:var(--kirby-danger-contrast);--kirby-badge-color:var(--kirby-white)}:host(.white){--kirby-badge-background-color:var(--kirby-white);--kirby-badge-color:var(--kirby-white-contrast)}"]
-            },] }
-];
-BadgeComponent.propDecorators = {
-    text: [{ type: Input }]
-};
-
 class CardComponent {
     constructor(elementRef, resizeObserverService, renderer) {
         this.elementRef = elementRef;
@@ -3552,6 +3040,8 @@ function deepCopy(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
 
+// re-export helpers from core, to preserve backwards compatability
+
 const { getThemeColorHexString } = ColorHelper;
 /* The chart.js annotation does not allow for changing the
 defaults it comes with. In order to have sensible defaults
@@ -3598,7 +3088,7 @@ const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
 };
 
 const { fontSize: fontSize$2 } = DesignTokenHelper;
-const { getThemeColorHexString: getThemeColorHexString$1 } = ColorHelper;
+const { getThemeColorHexString: getThemeColorHexString$1, getThemeColorRgbString } = ColorHelper;
 const CHART_TYPES_CONFIG = {
     bar: {
         type: 'bar',
@@ -3672,6 +3162,7 @@ const CHART_TYPES_CONFIG = {
     line: {
         type: 'line',
         options: {
+            backgroundColor: getThemeColorRgbString('semi-light', 0.5),
             scales: {
                 x: {
                     grid: {
@@ -3782,7 +3273,7 @@ const CHART_GLOBAL_DEFAULTS = {
 const CHART_SCALES = [CategoryScale, LinearScale];
 const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
 const CHART_CONTROLLERS = [BarController, LineController];
-const CHART_PLUGINS = [annotationPlugin];
+const CHART_PLUGINS = [annotationPlugin, Filler];
 /* Order matters; defaults must be merged after register as
    register modifies the Chart.defaults objects */
 Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
@@ -7424,6 +6915,7 @@ class PageComponent {
         this.titleAlignment = 'left';
         this.enter = new EventEmitter();
         this.leave = new EventEmitter();
+        this.refresh = new EventEmitter();
         this.pageTitleIntersectionObserverRef = this.pageTitleIntersectionObserver();
         this.urls = [];
         this.ngOnDestroy$ = new Subject();
@@ -7483,6 +6975,11 @@ class PageComponent {
             this.content.scrollToTop(KirbyAnimation.Duration.LONG);
         });
     }
+    delegateRefreshEvent(event) {
+        this.refresh.emit({
+            complete: event.target.complete.bind(event.target),
+        });
+    }
     onEnter() {
         if (this.hasEntered)
             return;
@@ -7583,7 +7080,7 @@ class PageComponent {
 PageComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-page',
-                template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title>\n      <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n        <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n      </div>\n    </ion-title>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"secondary\"\n      [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n  <div class=\"content-inner\">\n    <div\n      class=\"page-title\"\n      #pageTitle\n      *ngIf=\"hasPageTitle\"\n      [class.has-actions]=\"hasActionsInPage\"\n      [ngClass]=\"{\n        'text-center': titleAlignment === 'center',\n        'text-right': titleAlignment === 'right'\n      }\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n      ></ng-container>\n    </div>\n    <!-- Content -->\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n",
+                template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title>\n      <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n        <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n      </div>\n    </ion-title>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"secondary\"\n      [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <div class=\"content-inner\">\n    <div\n      class=\"page-title\"\n      #pageTitle\n      *ngIf=\"hasPageTitle\"\n      [class.has-actions]=\"hasActionsInPage\"\n      [ngClass]=\"{\n        'text-center': titleAlignment === 'center',\n        'text-right': titleAlignment === 'right'\n      }\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n      ></ng-container>\n    </div>\n    <!-- Content -->\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["ion-header,ion-toolbar{--background:var(--kirby-background-color);margin:0 auto}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width:0!important;--padding-start:4px;--padding-end:4px;--padding-top:0;--padding-bottom:0}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color:var(--kirby-black);--icon-font-size:24px;height:44px;width:44px}.page-title{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom,40px)}.page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-title.text-center{text-align:center;margin-left:0}.page-title.text-right{text-align:right}.page-title h1,.page-title h2,.page-title h3,.page-title h4,.page-title h5,.page-title h6{margin:0}ion-content{--padding-start:var(--page-content-padding-start,16px);--padding-end:var(--page-content-padding-end,16px);--background:var(--kirby-background-color)}ion-content .content-inner{max-width:var(--page-content-max-width,720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}"]
             },] }
@@ -7608,6 +7105,7 @@ PageComponent.propDecorators = {
     tabBarBottomHidden: [{ type: Input }],
     enter: [{ type: Output }],
     leave: [{ type: Output }],
+    refresh: [{ type: Output }],
     content: [{ type: ViewChild, args: [IonContent, { static: true },] }],
     ionContentElement: [{ type: ViewChild, args: [IonContent, { static: true, read: ElementRef },] }],
     ionHeaderElement: [{ type: ViewChild, args: [IonHeader, { static: true, read: ElementRef },] }],
@@ -7793,6 +7291,17 @@ FitHeadingModule.decorators = [
             },] }
 ];
 
+class SpinnerModule {
+}
+SpinnerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SpinnerComponent],
+                imports: [CommonModule],
+                exports: [SpinnerComponent],
+                providers: [],
+            },] }
+];
+
 class PageModule {
 }
 PageModule.decorators = [
@@ -7809,7 +7318,7 @@ PageModule.decorators = [
                     PageTitleDirective,
                     PageToolbarTitleDirective,
                 ],
-                imports: [CommonModule, IonicModule, FitHeadingModule],
+                imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule],
                 exports: [
                     PageComponent,
                     PageActionsComponent,
@@ -7939,10 +7448,10 @@ class SegmentedControlComponent {
 SegmentedControlComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-segmented-control',
-                template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n      >{{ item.badge.content }}</kirby-badge\n    >\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
+                template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <kirby-icon\n        *ngIf=\"item.badge.icon; else badgeContent\"\n        [customName]=\"item.badge.icon\"\n        [name]=\"item.badge.icon\"\n      ></kirby-icon>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
                 // tslint:disable-next-line: no-host-metadata-property
                 host: { role: 'group' },
-                styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}kirby-badge{--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);position:absolute;top:-8px;right:8px;z-index:2}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
+                styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
             },] }
 ];
 SegmentedControlComponent.propDecorators = {
@@ -8579,7 +8088,6 @@ ThemeColorDirective.decorators = [
                 // tslint:disable-next-line:directive-selector
                 selector: `kirby-avatar[themeColor],
              kirby-card[themeColor],
-             kirby-badge[themeColor],
              kirby-icon[themeColor],
              kirby-progress-circle-ring[themeColor],
              kirby-modal-footer[themeColor],
@@ -8604,6 +8112,82 @@ ThemeColorDirective.propDecorators = {
     themeColor: [{ type: Input }]
 };
 
+const proxyInputs = (Cmp, inputs) => {
+    const Prototype = Cmp.prototype;
+    inputs.forEach((item) => {
+        Object.defineProperty(Prototype, item, {
+            get() {
+                return this.el[item];
+            },
+            set(val) {
+                this.z.runOutsideAngular(() => (this.el[item] = val));
+            },
+        });
+    });
+};
+const proxyMethods = (Cmp, methods) => {
+    const Prototype = Cmp.prototype;
+    methods.forEach((methodName) => {
+        Prototype[methodName] = function () {
+            const args = arguments;
+            return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+        };
+    });
+};
+const proxyOutputs = (instance, el, events) => {
+    events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+// tslint:disable-next-line: only-arrow-functions
+function ProxyCmp(opts) {
+    const decorator = function (cls) {
+        if (opts.inputs) {
+            proxyInputs(cls, opts.inputs);
+        }
+        if (opts.methods) {
+            proxyMethods(cls, opts.methods);
+        }
+        return cls;
+    };
+    return decorator;
+}
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+let KirbyBadge = class KirbyBadge {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+KirbyBadge.decorators = [
+    { type: Component, args: [{
+                selector: 'kirby-badge',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['size', 'text', 'themeColor']
+            },] }
+];
+/** @nocollapse */
+KirbyBadge.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+KirbyBadge = __decorate([
+    ProxyCmp({
+        inputs: ['size', 'text', 'themeColor']
+    }),
+    __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef, NgZone])
+], KirbyBadge);
+
 class ChartModule {
 }
 ChartModule.decorators = [
@@ -8614,17 +8198,6 @@ ChartModule.decorators = [
             },] }
 ];
 
-class SpinnerModule {
-}
-SpinnerModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SpinnerComponent],
-                imports: [CommonModule],
-                exports: [SpinnerComponent],
-                providers: [],
-            },] }
-];
-
 const exportedDeclarations = [
     ListComponent,
     ListItemComponent,
@@ -8709,6 +8282,20 @@ ToggleButtonModule.decorators = [
             },] }
 ];
 
+const appInitialize = (doc) => {
+    return () => {
+        defineCustomElements(doc.defaultView);
+    };
+};
+function customElementsInitializer() {
+    return {
+        provide: APP_INITIALIZER,
+        useFactory: appInitialize,
+        deps: [DOCUMENT],
+        multi: true,
+    };
+}
+
 class ModalRouterLinkDirective {
     constructor(modalNavigationService) {
         this.modalNavigationService = modalNavigationService;
@@ -8751,7 +8338,7 @@ const exportedDeclarations$1 = [
     ModalRouterLinkDirective,
     SegmentedControlComponent,
     ChipComponent,
-    BadgeComponent,
+    KirbyBadge,
     ThemeColorDirective,
     DateInputDirective,
     DecimalMaskDirective,
@@ -8812,6 +8399,7 @@ const providers = [
     LoadingOverlayService,
     ResizeObserverFactory,
     ResizeObserverService,
+    customElementsInitializer(),
 ];
 const entryComponents = [
     ModalWrapperComponent,
@@ -8866,5 +8454,5 @@ KirbyModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ColorHelper, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DesignTokenHelper, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, camelToKebabCase, capitalizeFirstLetter, defaultIcons, isNumberArray, kebabToCamelCase, kebabToTitleCase, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, AppModule as ɵa, AppComponent as ɵb, Modal as ɵba, ButtonComponent as ɵbb, IconComponent as ɵbc, IconRegistryService as ɵbd, ICON_SETTINGS as ɵbf, ResizeObserverService as ɵbg, ResizeObserverFactory as ɵbh, FitHeadingModule as ɵbi, FitHeadingDirective as ɵbj, LineClampHelper as ɵbk, TabsModule as ɵbl, IconModule as ɵbm, TabButtonComponent as ɵbn, ItemModule as ɵbo, ItemComponent as ɵbp, LabelComponent as ɵbq, ToggleButtonModule as ɵbr, ToggleButtonComponent as ɵbs, ListModule as ɵbt, ListComponent as ɵbu, ListHelper as ɵbv, GroupByPipe as ɵbw, InfiniteScrollDirective as ɵbx, ListItemDirective as ɵby, ListFlexItemDirective as ɵbz, RouterOutletComponent as ɵc, ListItemTemplateDirective as ɵca, ListHeaderDirective as ɵcb, ListSectionHeaderDirective as ɵcc, ListFooterDirective as ɵcd, ListItemComponent as ɵce, ListSectionHeaderComponent as ɵcf, ListHeaderComponent as ɵcg, ListItemColorDirective as ɵch, SpinnerModule as ɵci, SpinnerComponent as ɵcj, ChartModule as ɵck, ChartComponent as ɵcl, ChartJSService as ɵcm, ChartConfigService as ɵcn, CardComponent as ɵco, CardHeaderComponent as ɵcp, CardFooterComponent as ɵcq, ChartDeprecatedComponent as ɵcr, ChartDeprecatedHelper as ɵcs, DONUT_OPTIONS as ɵct, DonutOptions as ɵcu, AREASPLINE_OPTIONS as ɵcv, AreaSplineOptions as ɵcw, TIMESERIES_OPTIONS as ɵcx, TimeSeriesOptions as ɵcy, ACTIVITYGAUGE_OPTIONS as ɵcz, ModalController as ɵd, ActivityGaugeOptions as ɵda, StockChartDeprecatedComponent as ɵdb, GridComponent as ɵdc, BreakpointHelperService as ɵdd, ComponentLoaderDirective as ɵde, AvatarComponent as ɵdf, CalendarComponent as ɵdg, CalendarHelper as ɵdh, CheckboxComponent as ɵdi, ActionSheetComponent as ɵdj, ModalFooterComponent as ɵdk, ModalRouterLinkDirective as ɵdl, SegmentedControlComponent as ɵdm, ChipComponent as ɵdn, BadgeComponent as ɵdo, ThemeColorDirective as ɵdp, DateInputDirective as ɵdq, DecimalMaskDirective as ɵdr, SlideButtonComponent as ɵds, ToggleComponent as ɵdt, EmptyStateComponent as ɵdu, FormFieldComponent as ɵdv, InputCounterComponent as ɵdw, RadioGroupComponent as ɵdx, RadioComponent as ɵdy, InputComponent as ɵdz, ModalHelper as ɵe, TextareaComponent as ɵea, FabSheetComponent as ɵeb, DividerComponent as ɵec, ReorderListComponent as ɵed, DropdownComponent as ɵee, PopoverComponent as ɵef, KeyboardHandlerService as ɵeg, LoadingOverlayComponent as ɵeh, ProgressCircleComponent as ɵei, FlagComponent as ɵej, SlideDirective as ɵek, SlidesComponent as ɵel, AccordionDirective as ɵem, AccordionItemComponent as ɵen, RangeComponent as ɵeo, KeyHandlerDirective as ɵep, FormFieldMessageComponent as ɵeq, AlertComponent as ɵer, ModalCompactWrapperComponent as ɵes, ProgressCircleRingComponent as ɵet, ToastHelper as ɵeu, ToastController as ɵev, LoadingOverlayService as ɵew, ModalAnimationBuilderService as ɵf, PlatformService as ɵg, WindowRef as ɵh, ActionSheetHelper as ɵi, AlertHelper as ɵj, ModalNavigationService as ɵk, RouterOutletModule as ɵl, PageModule as ɵm, PageTitleDirective as ɵn, PageToolbarTitleDirective as ɵo, PageActionsDirective as ɵp, PageContentDirective as ɵq, PageProgressComponent as ɵr, PageTitleComponent as ɵs, PageContentComponent as ɵt, PageActionsComponent as ɵu, PageComponent as ɵv, TabsComponent as ɵw, TabsService as ɵx, PageFooterComponent as ɵy, ModalWrapperComponent as ɵz };
+export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListItemColorDirective as ɵck, ChartModule as ɵcl, ChartComponent as ɵcm, ChartJSService as ɵcn, ChartConfigService as ɵco, CardComponent as ɵcp, CardHeaderComponent as ɵcq, CardFooterComponent as ɵcr, ChartDeprecatedComponent as ɵcs, ChartDeprecatedHelper as ɵct, DONUT_OPTIONS as ɵcu, DonutOptions as ɵcv, AREASPLINE_OPTIONS as ɵcw, AreaSplineOptions as ɵcx, TIMESERIES_OPTIONS as ɵcy, TimeSeriesOptions as ɵcz, RouterOutletComponent as ɵd, ACTIVITYGAUGE_OPTIONS as ɵda, ActivityGaugeOptions as ɵdb, StockChartDeprecatedComponent as ɵdc, GridComponent as ɵdd, BreakpointHelperService as ɵde, ComponentLoaderDirective as ɵdf, AvatarComponent as ɵdg, CalendarComponent as ɵdh, CalendarHelper as ɵdi, CheckboxComponent as ɵdj, ActionSheetComponent as ɵdk, ModalFooterComponent as ɵdl, ModalRouterLinkDirective as ɵdm, SegmentedControlComponent as ɵdn, ChipComponent as ɵdo, ThemeColorDirective as ɵdp, DateInputDirective as ɵdq, DecimalMaskDirective as ɵdr, SlideButtonComponent as ɵds, ToggleComponent as ɵdt, EmptyStateComponent as ɵdu, FormFieldComponent as ɵdv, InputCounterComponent as ɵdw, RadioGroupComponent as ɵdx, RadioComponent as ɵdy, InputComponent as ɵdz, ModalController as ɵe, TextareaComponent as ɵea, FabSheetComponent as ɵeb, DividerComponent as ɵec, ReorderListComponent as ɵed, DropdownComponent as ɵee, PopoverComponent as ɵef, KeyboardHandlerService as ɵeg, LoadingOverlayComponent as ɵeh, ProgressCircleComponent as ɵei, FlagComponent as ɵej, SlideDirective as ɵek, SlidesComponent as ɵel, AccordionDirective as ɵem, AccordionItemComponent as ɵen, RangeComponent as ɵeo, KeyHandlerDirective as ɵep, FormFieldMessageComponent as ɵeq, AlertComponent as ɵer, ModalCompactWrapperComponent as ɵes, ProgressCircleRingComponent as ɵet, ToastHelper as ɵeu, ToastController as ɵev, LoadingOverlayService as ɵew, appInitialize as ɵex, customElementsInitializer as ɵey, ModalHelper as ɵf, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
 //# sourceMappingURL=kirbydesign-designsystem.js.map