@baloise/ds-core 16.8.0 → 17.0.0

package/dist/collection/components/bal-accordion/bal-accordion-details/bal-accordion-details.js

@@ -47,7 +47,7 @@ export class AccordionDetails {
         const id = this.parentAccordionId ? `${this.parentAccordionId}-details` : this.componentId;
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
-        return (h(Host, { id: id, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), block.modifier('animated').class(this.animated)) }, h("div", { id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, h("slot", null))));
+        return (h(Host, { key: '46658e9e2842371f4faac02f3666f908f48000a2', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), block.modifier('animated').class(this.animated)) }, h("div", { key: '4e2616b9946f33ce3a30c396f200dd2a8c16eed4', id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, h("slot", { key: '76467aaa5660e88ab9a208fdf0577f203f000fcf' }))));
     }
     static get is() { return "bal-accordion-details"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.js

@@ -3,7 +3,7 @@ import { Host, h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { Logger } from "../../../utils/log";
 import { stopEventBubbling } from "../../../utils/form-input";
-import { isEnterKey, isSpaceKey } from "@baloise/web-app-utils";
+import { isEnterKey, isSpaceKey } from "../../..//utils/keyboard";
 export class AccordionSummary {
     constructor() {
         this.componentId = `bal-accordion-summary-${accordionSummaryIds++}`;
@@ -83,7 +83,7 @@ export class AccordionSummary {
                 'onKeyDown': this.onKeyDown,
             };
         }
-        return (h(Host, Object.assign({ id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
+        return (h(Host, Object.assign({ key: 'c3a6c35f68b01dcfe81b8e87a8a31b3c87db771c', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
     }
     static get is() { return "bal-accordion-summary"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.js

@@ -81,7 +81,7 @@ export class AccordionTrigger {
                 tabindex: 0,
             };
         }
-        return (h(Host, { id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
+        return (h(Host, { key: 'af0ac1bbf7cb49a28ad9e481d3cf41f377c3d434', id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
     }
     static get is() { return "bal-accordion-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-app/bal-app.css

@@ -1 +1 @@
-:root{--bal-app-height: 100%}.bal-app{position:relative;display:block}
+:root{--bal-app-height: 100%}.bal-app{position:relative;display:block}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}

package/dist/collection/components/bal-app/bal-app.js

@@ -3,7 +3,7 @@ import { Host, h } from "@stencil/core";
 import { balBrowser } from "../../utils/browser";
 import { balDevice } from "../../utils/device";
 import { updateBalAnimated } from "../../utils/config";
-import { debounce, rIC } from "../../utils/helpers";
+import { debounce, rIC, rLCP } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { startFocusVisible } from "../../utils/focus-visible";
 export class App {
@@ -29,10 +29,16 @@ export class App {
         }
     }
     componentDidLoad() {
-        rIC(async () => {
+        rIC(() => {
             this.ready = true;
             startFocusVisible();
         });
+        rLCP(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
     }
     disconnectedCallback() {
         if (balBrowser.hasWindow) {
@@ -45,11 +51,11 @@ export class App {
         }
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '7e5b5c9164dd2fc89e1a41278904b6e020b535a7', class: {
                 'bal-app': true,
                 'bal-app--safari': balBrowser.isSafari,
                 'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '5eac7462d067b17d8ff18ceb5d6ae8aa4e040d39' })));
     }
     static get is() { return "bal-app"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-badge/bal-badge.js

@@ -15,7 +15,7 @@ export class Badge {
         const size = this.size !== '';
         const position = this.position !== '';
         const labelHidden = !!this.icon || this.size === 'small';
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, h("span", { class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, h("slot", null)), this.size !== 'small' ? (h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
+        return (h(Host, { key: '8fefcf48fb5ba2011faf11b6d5dee452080d3344', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, h("span", { key: '582a5f522dd5c7fff3c373b4e85055d7b203aa20', class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, h("slot", { key: 'cb210bd83465da685b87be59d29195f96be0b584' })), this.size !== 'small' ? (h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
     }
     static get is() { return "bal-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-button/bal-button-group/bal-button-group.js

@@ -8,12 +8,12 @@ export class ButtonGroup {
     }
     render() {
         const block = BEM.block('button-group');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { class: {
+        return (h(Host, { key: '37a0df1c1011b201337d3a3838131fd4eec4ad52', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: 'fc6667209c1ce56dee220bca313c1b894e49be62', class: {
                 'field': true,
                 'is-grouped': true,
                 'is-reverse': this.reverse,
                 [`has-direction-${this.direction}`]: true,
-            } }, h("slot", null))));
+            } }, h("slot", { key: '8187edbafa351fc0b57178bd826dd4d36fc56721' }))));
     }
     static get is() { return "bal-button-group"; }
     static get properties() {

package/dist/collection/components/bal-button/bal-button.js

@@ -1,5 +1,8 @@
+import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { inheritAttributes } from "../../utils/attributes";
+import { rLCP } from "../../utils/helpers";
+import { ListenTo } from "../../utils/listen";
 export class Button {
     constructor() {
         this.inheritAttributes = {};
@@ -14,6 +17,7 @@ export class Button {
                 this.balNavigate.emit(ev);
             }
         };
+        this.isLargestContentPaintDone = false;
         this.color = 'primary';
         this.elementType = 'button';
         this.disabled = false;
@@ -45,6 +49,9 @@ export class Button {
             ev.stopPropagation();
         }
     }
+    componentDidLoad() {
+        rLCP(() => (this.isLargestContentPaintDone = true));
+    }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
@@ -145,11 +152,11 @@ export class Button {
                 'control': true,
                 'is-fullwidth': this.expanded,
                 'is-disabled': this.disabled,
-            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-button" }, ariaAttributes), h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading })), h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted })), h("span", { class: {
+            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-button" }, ariaAttributes), this.isLargestContentPaintDone && this.loading ? (h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading }))) : (''), this.isLargestContentPaintDone && this.icon ? (h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { class: {
                 'button-label': true,
                 'has-no-wrap': this.noWrap,
                 'is-small': this.size === 'small',
-            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted })))));
+            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), this.isLargestContentPaintDone && this.iconRight ? (h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
     }
     static get is() { return "bal-button"; }
     static get originalStyleUrls() {
@@ -618,6 +625,11 @@ export class Button {
             }
         };
     }
+    static get states() {
+        return {
+            "isLargestContentPaintDone": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "balNavigate",
@@ -702,13 +714,10 @@ export class Button {
             }];
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Button.prototype, "listenOnClick", null);

package/dist/collection/components/bal-card/bal-card-actions/bal-card-actions.js

@@ -4,7 +4,7 @@ export class CardActions {
         this.position = '';
     }
     render() {
-        return (h(Host, { class: "bal-card-actions" }, h("bal-button-group", { class: "m-none", position: this.position }, h("slot", null))));
+        return (h(Host, { key: '78f85e69ecf9184127533a57f8fb53793bf7f49e', class: "bal-card-actions" }, h("bal-button-group", { key: 'bee1def05a211bffb60f76b69a32cbd9e6d1a536', class: "m-none", position: this.position }, h("slot", { key: 'd62d486907ed3ef8bcd888464a0ddb32f2dfdcd3' }))));
     }
     static get is() { return "bal-card-actions"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card-button/bal-card-button.js

@@ -10,7 +10,7 @@ export class CardButton {
         this.loading = false;
     }
     render() {
-        return (h(Host, { class: "bal-card-button" }, h("bal-button", { color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", null))));
+        return (h(Host, { key: 'a9a6233b6262d6160868017fd254d5a6ad2612ae', class: "bal-card-button" }, h("bal-button", { key: 'b7a5317e53b75f8d8bb4bbb8dd6ef56325c6676b', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: '9461aa5ace6d22d8c7dd6eff5495dfc4e3232506' }))));
     }
     static get is() { return "bal-card-button"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card-content/bal-card-content.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CardContent {
     render() {
-        return (h(Host, { class: "bal-card-content" }, h("slot", null)));
+        return (h(Host, { key: '3d9b2511b8743f33efeb25ae05691964b938cbcc', class: "bal-card-content" }, h("slot", { key: '2085fa6085da72981d7a5fb86eca8979b8d84076' })));
     }
     static get is() { return "bal-card-content"; }
 }

package/dist/collection/components/bal-card/bal-card-subtitle/bal-card-subtitle.js

@@ -6,7 +6,7 @@ export class CardSubtitle {
         this.color = '';
     }
     render() {
-        return (h(Host, { class: "bal-card-subtitle" }, h("bal-text", { bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", null))));
+        return (h(Host, { key: '3c1cf2160f9cca6e5d9b2ce60069a23bedcb590a', class: "bal-card-subtitle" }, h("bal-text", { key: '22fab503a09f822fe30a6e06340312c3c080b6a4', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: 'bb28c8fcbfec3ba10184721940a453b22b2b8865' }))));
     }
     static get is() { return "bal-card-subtitle"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card-title/bal-card-title.js

@@ -4,7 +4,7 @@ export class CardTitle {
         this.inverted = false;
     }
     render() {
-        return (h(Host, { class: "bal-card-title" }, h("bal-heading", { level: "h3", space: "none", inverted: this.inverted }, h("slot", null))));
+        return (h(Host, { key: '7e5021e2cf281b237676f401ca3109a6988b8edc', class: "bal-card-title" }, h("bal-heading", { key: 'b1a0badb897ba81b3fc25367cdd2155ee5bb7b43', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '8765c2c2485f4f1a885278070328136ec1402b1a' }))));
     }
     static get is() { return "bal-card-title"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card.js

@@ -16,7 +16,7 @@ export class Card {
         return isEmpty(this.color) ? '' : `is-${this.inverted ? 'blue' : this.color}`;
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '7bc59c101e875eedda1f209d3eb2442ac00b4df5', class: {
                 'bal-card': true,
                 [`bal-card--${this.colorTypeClass}`]: !isEmpty(this.color),
                 [`bal-card--is-${this.space}`]: this.space !== '',
@@ -26,7 +26,7 @@ export class Card {
                 'bal-card--is-selected': this.selected,
                 'bal-card--is-square': this.square,
                 'bal-card--has-fullheight': this.fullheight,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '577a43d779ac88042185e9bf5d3eb61f663cebad' })));
     }
     static get is() { return "bal-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-carousel/bal-carousel-item/bal-carousel-item.js

@@ -1,6 +1,6 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-import { waitAfterFramePaint } from "../../../utils/helpers";
+import { rLCP, waitAfterFramePaint } from "../../../utils/helpers";
 import { inheritAttributes } from "../../../utils/attributes";
 export class CarouselItem {
     constructor() {
@@ -16,6 +16,7 @@ export class CarouselItem {
         this.onBlur = () => {
             this.balBlur.emit();
         };
+        this.isLargestContentfulPaintDone = false;
         this.src = undefined;
         this.label = '';
         this.htmlRole = 'listitem';
@@ -28,6 +29,15 @@ export class CarouselItem {
         this.download = undefined;
         this.color = undefined;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
     }
@@ -48,7 +58,7 @@ export class CarouselItem {
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
         if (!isProduct) {
-            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -63,7 +73,7 @@ export class CarouselItem {
                 rel,
                 target,
             };
-        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), loading: "lazy", draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     static get is() { return "bal-carousel-item"; }
     static get properties() {
@@ -278,6 +288,11 @@ export class CarouselItem {
             }
         };
     }
+    static get states() {
+        return {
+            "isLargestContentfulPaintDone": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "balNavigate",

package/dist/collection/components/bal-carousel/bal-carousel.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { raf } from "../../utils/helpers";
+import { debounce, raf, rLCP } from "../../utils/helpers";
 import { BEM } from "../../utils/bem";
 import { TabControl } from "./controls/tab-control";
 import { DotControl } from "./controls/dot-control";
@@ -15,12 +15,14 @@ import { ListenToResize } from "../../utils/resize";
 import { getComputedWidth } from "../../utils/style";
 import { ListenToConfig, defaultConfig } from "../../utils/config";
 import { i18nControlLabel } from "./bal-carousel.i18n";
+import { ListenTo } from "../../utils/listen";
 export class Carousel {
     constructor() {
         this.previousTransformValue = 0;
         this.carouselId = `bal-carousel-${CarouselIds++}`;
         this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
         this.mutationObserverActive = true;
+        this.itemsChanged = debounce(() => this.itemsChangedInternal(), 100);
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -38,6 +40,7 @@ export class Carousel {
                 }
             }
         };
+        this.isLargestContentfulPaintDone = false;
         this.isLastSlideVisible = true;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
@@ -59,6 +62,11 @@ export class Carousel {
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -216,10 +224,12 @@ export class Carousel {
         }
         return undefined;
     }
-    async itemsChanged() {
-        const activeSlide = await this.buildSlide(this.value);
-        if (activeSlide) {
-            this.animate(activeSlide.transformActive, false);
+    async itemsChangedInternal() {
+        if (this.isLargestContentfulPaintDone) {
+            const activeSlide = await this.buildSlide(this.value);
+            if (activeSlide) {
+                this.animate(activeSlide.transformActive, false);
+            }
         }
     }
     async focusNextItem(ev) {
@@ -281,7 +291,7 @@ export class Carousel {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const controlItems = this.getAllControlItems();
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", null), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { key: '8f136f31e2fe4fb99703fdd2a5974697cea659b7', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { key: '76e644a3db07b7aeae2a599b560903a24312cb6b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { key: '8040a1b67deccfa135bda7c1b3cef5b05492ad19', role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", { key: '855f44ac6e8b1cfdfd31cc39f9fd2d9749a2f326' }), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone && this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.isLargestContentfulPaintDone && this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
     }
     static get is() { return "bal-carousel"; }
     static get originalStyleUrls() {
@@ -534,6 +544,7 @@ export class Carousel {
     }
     static get states() {
         return {
+            "isLargestContentfulPaintDone": {},
             "isLastSlideVisible": {},
             "isMobile": {},
             "language": {}
@@ -648,22 +659,13 @@ export class Carousel {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "touchmove",
-                "method": "blockVerticalScrolling",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "listenToKeyDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
+__decorate([
+    ListenTo('touchmove', { target: 'window', passive: false }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Carousel.prototype, "blockVerticalScrolling", null);
 __decorate([
     ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     __metadata("design:type", Function),
@@ -688,6 +690,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Carousel.prototype, "resizeListener", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/dist/collection/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.js

@@ -170,7 +170,7 @@ export class CheckboxButton {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", null))));
+        return (h(Host, { key: '1cc87d4d87494ed93c669658d6b113ecdded148e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '2875aff0c5511077bbbbf697e589ca2e9cba9861', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: 'e83b0706ab2f9d2c8f39b15a654159448921336a' }))));
     }
     static get is() { return "bal-checkbox-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import { areArraysEqual } from "@baloise/web-app-utils";
+import { areArraysEqual } from "../../../utils/array";
 import { h, Host, } from "@stencil/core";
 import { stopEventBubbling } from "../../../utils/form-input";
 import { hasTagName, isDescendant } from "../../../utils/helpers";
@@ -9,6 +9,7 @@ import { Logger } from "../../../utils/log";
 import { ListenToMutation } from "../../../utils/mutation";
 import { defaultBalAriaForm } from "../../../utils/form";
 import { ListenToFocus } from "../../../utils/focus";
+import { ListenTo } from "../../../utils/listen";
 export class CheckboxGroup {
     constructor() {
         this.inputId = `bal-cg-${checkboxGroupIds++}`;
@@ -750,33 +751,6 @@ export class CheckboxGroup {
                 "methodName": "columnsMobileChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balChange",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "balFocus",
-                "method": "checkboxFocusListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "balBlur",
-                "method": "checkboxBlurListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-checkbox-group'),
@@ -802,4 +776,28 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "mutationListener", null);
+__decorate([
+    ListenTo('balChange', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "resetHandler", null);
+__decorate([
+    ListenTo('balFocus', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxFocusListener", null);
+__decorate([
+    ListenTo('balBlur', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxBlurListener", null);
 let checkboxGroupIds = 0;

package/dist/collection/components/bal-checkbox/bal-checkbox.js

@@ -4,11 +4,12 @@ import { inputSetBlur, inputSetFocus, stopEventBubbling } from "../../utils/form
 import { isDescendant } from "../../utils/helpers";
 import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
-import { isSpaceKey } from "@baloise/web-app-utils";
+import { isSpaceKey } from "../../utils/keyboard";
 import { Logger } from "../../utils/log";
 import { FOCUS_KEYS } from "../../utils/focus-visible";
 import { defaultBalAriaForm } from "../../utils/form";
 import { ariaBooleanToString } from "../../utils/aria";
+import { ListenTo } from "../../utils/listen";
 export class Checkbox {
     constructor() {
         this.inputId = `bal-cb-${checkboxIds++}`;
@@ -267,7 +268,7 @@ export class Checkbox {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'ecce7f9cb60f37a738f18f72a2735c853ae02985', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '7a7fe32e829fb5fb68de8a2bb7705db0465792ae', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
     }
     static get is() { return "bal-checkbox"; }
     static get originalStyleUrls() {
@@ -831,21 +832,6 @@ export class Checkbox {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-checkbox'),
@@ -853,4 +839,16 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Checkbox.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Checkbox.prototype, "resetHandler", null);
 let checkboxIds = 0;