@baloise/ds-core 16.8.0 → 17.0.0

package/dist/collection/components/bal-time-input/bal-time-input.css

@@ -1 +1 @@
-:root{--bal-time-input-native-placeholder-background-before: var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before: var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before: var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before: var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before: var(--bal-color-grey-1);--bal-time-input-native-text-color: var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value: var(--bal-color-primary);--bal-time-input-native-text-color-disabled: var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value: var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before: var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before: var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;flex:1;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native::-webkit-datetime-edit-ampm-field{display:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}
+:root{--bal-time-input-native-placeholder-background-before: var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before: var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before: var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before: var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before: var(--bal-color-grey-1);--bal-time-input-native-text-color: var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value: var(--bal-color-primary);--bal-time-input-native-text-color-disabled: var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value: var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before: var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before: var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;flex:1;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}

package/dist/collection/components/bal-time-input/bal-time-input.js

@@ -10,6 +10,7 @@ import { BEM } from "../../utils/bem";
 import { i18nBalTimeInput } from "./bal-time-input.i18n";
 import { defaultBalAriaForm } from "../../utils/form";
 import { Logger } from "../../utils/log";
+import { ListenTo } from "../../utils/listen";
 export class TimeInput {
     constructor() {
         this.inputId = `bal-time-input-${timeInputIds++}`;
@@ -117,7 +118,7 @@ export class TimeInput {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     getAllowedKeys() {
-        return [...NUMBER_KEYS, ...ACTION_KEYS, ':'];
+        return [...NUMBER_KEYS, ...ACTION_KEYS, ':', 'A', 'M', 'P'];
     }
     getRawValue() {
         const value = (this.value || '').toString();
@@ -130,7 +131,7 @@ export class TimeInput {
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '67ec2306c4cf0a9e6b5cee8af80f930e5dc4ee33', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '1873f5acc2647eb4b4d4f2634693caafadb98341', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '846d18705dd58f61a418cb4c25fab603e3c9264d', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'd34d154f6bafaa5fe925a9333796e5c2b1c41dfc', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     static get is() { return "bal-time-input"; }
     static get originalStyleUrls() {
@@ -549,21 +550,6 @@ export class TimeInput {
                 "methodName": "debounceChanged"
             }];
     }
-    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-time-input'),
@@ -571,6 +557,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], TimeInput.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -34,7 +34,7 @@ export class Toast {
         return `bal-toast__inner--is-${this.color}`;
     }
     render() {
-        return (h(Host, { id: this.toastId, class: "bal-toast" }, h("div", { role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", null)), h("bal-close", { class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
+        return (h(Host, { key: '022b79aa15606a15256ff3a4a8ea327cd3d7badf', id: this.toastId, class: "bal-toast" }, h("div", { key: '13e4f7084f3d27ecec0729a229c4ced273b781d7', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { key: 'ba07ca16899d4af96dbc8936e997a424b3c1b584', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", { key: '059e7c7095f24eeefa2629e7fc168d1eda116a7c' })), h("bal-close", { key: '3efd56336ee10d4afbdf118c091ec9f306603450', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
     }
     static get is() { return "bal-toast"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { balDevice } from "../../utils/device";
 import { showContainerElement, showArrowElement, hideContainerElement, hideArrowElement } from "./bal-tooltip.util";
-import { computePosition, offset, arrow, flip, autoUpdate, shift } from "@floating-ui/dom";
+import { balFloatingUi } from "../../utils/floating-ui";
 export class Tooltip {
     constructor() {
         this.tooltipId = `bal-to-${tooltipIds++}`;
@@ -91,7 +91,8 @@ export class Tooltip {
             showArrowElement(this.arrowEl);
             this.trigger.classList.add('bal-tooltip-trigger');
             this.presented = true;
-            this.cleanup = autoUpdate(this.trigger, this.containerEl, () => {
+            const lib = await balFloatingUi.load();
+            this.cleanup = lib.autoUpdate(this.trigger, this.containerEl, () => {
                 this.update();
             }, {
                 ancestorScroll: true,
@@ -133,18 +134,21 @@ export class Tooltip {
             if (balBrowser.hasWindow) {
                 isInFrame = !!window.frameElement;
             }
-            computePosition(this.trigger, this.containerEl, {
+            const lib = await balFloatingUi.load();
+            lib
+                .computePosition(this.trigger, this.containerEl, {
                 placement: this.placement,
                 middleware: [
-                    isInFrame ? undefined : shift(),
-                    flip(),
-                    offset(8),
-                    arrow({
+                    isInFrame ? undefined : lib.shift(),
+                    lib.flip(),
+                    lib.offset(8),
+                    lib.arrow({
                         element: this.arrowEl,
                         padding: 4,
                     }),
                 ],
-            }).then(({ x, y, middlewareData, placement }) => {
+            })
+                .then(({ x, y, middlewareData, placement }) => {
                 const side = placement.split('-')[0];
                 const staticSide = {
                     top: 'bottom',
@@ -191,7 +195,7 @@ export class Tooltip {
         const arrowBlock = block.element('arrow');
         const innerBlock = block.element('inner');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", null))))));
+        return (h(Host, { key: 'be527a1b6a3bc6c4958692998c35a935ec529484', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '1ef5d833c3796839e5f265651867d2a3d17c0251', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: '0f29a68c79453bbde28ed48464e91b49caf46ada', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '71509e320a90d1e5e8fd92fc689352bd352a5557', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: '56628c0fce715db27e5a39385d7b698aabc070e1', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: 'a303a3a3b414eaddd6cba0a3ee585451a29be532' }))))));
     }
     static get is() { return "bal-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -18,7 +18,6 @@ export * from './components/bal-radio/bal-radio.type';
 export * from './components/bal-date/bal-date.i18n';
 export * from './components/bal-close/bal-close.i18n';
 export * from './components/bal-field/bal-field-label/bal-field-label.i18n';
-export * from './components/bal-datepicker/bal-datepicker.i18n';
 export * from './components/bal-time-input/bal-time-input.i18n';
 export * from './components/bal-input-stepper/bal-input-stepper.i18n';
 export * from './components/bal-label/bal-label.i18n';
@@ -32,7 +31,7 @@ export { newBalTabOption } from './components/bal-tabs/bal-tab.util';
 export { newBalCheckboxOption } from './components/bal-checkbox/utils/bal-checkbox.util';
 export { newBalRadioOption } from './components/bal-radio/utils/bal-radio.util';
 export { newBalOptionValue, newBalSingleOptionValue } from './components/bal-select/utils/bal-option.util';
-export { waitForComponent, waitForDesignSystem, waitAfterFramePaint, waitAfterIdleCallback, shallowReady, deepReady, wait, getAppRoot, componentOnReady, isDescendant, } from './utils/helpers';
+export { waitForComponent, waitForDesignSystem, waitAfterFramePaint, waitAfterIdleCallback, waitAfterLargestContentfulPaintCallback, shallowReady, deepReady, wait, getAppRoot, componentOnReady, isDescendant, } from './utils/helpers';
 export { scrollToFirstInvalidField } from './utils/form';
 export { BalScrollHandler } from './utils/scroll';
 export { balBrowser } from './utils/browser';

package/dist/collection/utils/array.js

@@ -0,0 +1,17 @@
+import isNil from "lodash.isnil";
+import isEqual from "lodash.isequal";
+/**
+ * Returns `true` if the arrays are equal
+ *
+ * ```typescript
+ * areArraysEqual(['a', 'b'], ['b', 'a']) // true
+ * ```
+ */
+export function areArraysEqual(a, b) {
+    if (isNil(a) || isNil(b)) {
+        return false;
+    }
+    const copyA = [...a].sort();
+    const copyB = [...b].sort();
+    return isEqual(copyA, copyB);
+}

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.8.0';
+export const VERSION = '17.0.0';

package/dist/collection/utils/date/date.helpers.js

@@ -0,0 +1,30 @@
+/**
+ * Returns the char which separates day form month and year.
+ *
+ * ```typescript
+ * dateSeparator('de-CH')
+ * // .
+ * ```
+ */
+export function dateSeparator(locale = 'de-CH') {
+    return new Intl.DateTimeFormat(dateLocale(locale))
+        .format(new Date())
+        .replace(/\p{Number}/gu, '')
+        .charAt(0);
+}
+/**************************************************************
+ * PRIVATE
+ **************************************************************/
+function dateLocale(locale = 'de-CH') {
+    const [, region] = locale.split('-');
+    if (region === 'CH') {
+        return 'fr-CH';
+    }
+    if (region === 'BE') {
+        return 'fr-BE';
+    }
+    if (region === 'LU') {
+        return 'fr-LU';
+    }
+    return locale;
+}

package/dist/collection/utils/date/date.js

@@ -1,6 +1,6 @@
 import { DateTime, Info, Settings } from "luxon";
 import { useBalConfig } from "../config";
-import { dateSeparator } from "@baloise/web-app-utils";
+import { dateSeparator } from "./date.helpers";
 export class BalDate {
     static setTwoDigitCutoffYear(cutoff = 10) {
         Settings.twoDigitCutoffYear = (new Date().getFullYear() % 100) + cutoff;

package/dist/collection/utils/date/index.js

@@ -1 +1,2 @@
 export * from './date';
+export * from './date.helpers';

package/dist/collection/utils/dropdown/auto-fill.js

@@ -1,4 +1,4 @@
-import { areArraysEqual } from "@baloise/web-app-utils";
+import { areArraysEqual } from "../array";
 import { stopEventBubbling } from "../form-input";
 export class DropdownAutoFillUtil {
     constructor() {

package/dist/collection/utils/dropdown/icon.js

@@ -7,7 +7,7 @@ export const DropdownIcon = ({ icon, language, loading, clearable, invalid, fill
         return h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
     }
     else if (clearable && filled && !disabled) {
-        return (h("button", { title: i18nBalDropdown[language].clearable, class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) }, h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
+        return (h("button", { title: i18nBalDropdown[language].clearable, type: 'button', class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) }, h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
     }
     else {
         return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : 'primary' }));

package/dist/collection/utils/dropdown/popup.js

@@ -1,11 +1,13 @@
-import { autoUpdate, computePosition, flip, shift } from "@floating-ui/dom";
+import { balFloatingUi } from "../floating-ui";
 export class DropdownPopupUtil {
     constructor() {
-        this.updatePanelPosition = (referenceEl, floatingEl) => () => {
-            computePosition(referenceEl, floatingEl, {
+        this.updatePanelPosition = (lib, referenceEl, floatingEl) => () => {
+            lib
+                .computePosition(referenceEl, floatingEl, {
                 placement: 'bottom-start',
-                middleware: [flip(), shift()],
-            }).then(({ x, y }) => {
+                middleware: [lib.flip(), lib.shift()],
+            })
+                .then(({ x, y }) => {
                 Object.assign(floatingEl.style, {
                     left: `${x}px`,
                     top: `${y}px`,
@@ -29,7 +31,8 @@ export class DropdownPopupUtil {
     async expandList() {
         var _a;
         if (this.component.panelEl) {
-            this.component.panelCleanup = autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
+            const lib = await balFloatingUi.load();
+            this.component.panelCleanup = lib.autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(lib, this.component.el, this.component.panelEl));
         }
         this.component.isExpanded = true;
         await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());

package/dist/collection/utils/dropdown/value.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { areArraysEqual } from "@baloise/web-app-utils";
+import { areArraysEqual } from "../../utils/array";
 import isNil from "lodash.isnil";
 import { BEM } from "../bem";
 import { waitAfterFramePaint } from "../helpers";

package/dist/collection/utils/floating-ui.js

@@ -0,0 +1,23 @@
+import { rLCP } from "./helpers";
+class BalFloatingUiInternal {
+    constructor() {
+        this.load = async () => {
+            return new Promise((resolve, reject) => {
+                if (this.lib) {
+                    return resolve(this.lib);
+                }
+                else {
+                    rLCP(async () => {
+                        import(/* @vite-ignore */ '@floating-ui/dom')
+                            .then(module => {
+                            this.lib = module;
+                            resolve(this.lib);
+                        })
+                            .catch(reject);
+                    });
+                }
+            });
+        };
+    }
+}
+export const balFloatingUi = new BalFloatingUiInternal();

package/dist/collection/utils/helpers.js

@@ -1,6 +1,36 @@
 import { balBrowser } from "./browser";
 import { useBalConfig } from "./config";
 import { balIconCaretUp, balIconCaretDown, balIconCaretLeft, balIconCaretRight, balIconCheck, balIconClose, balIconDate, balIconDocument, balIconEdit, balIconInfoCircle, balIconMenuBars, balIconMinus, balIconNavGoDown, balIconNavGoLeft, balIconNavGoRight, balIconNavGoUp, balIconPlus, balIconTrash, balIconUpload, } from "./constants/icons.constant";
+/**
+ * Request Largest Contentful Paint (LCP) callback
+ */
+export const rLCP = (callback, timeout = 3000) => {
+    let isLargestContentPatinDone = false;
+    if (!balBrowser.isSafari && balBrowser.hasWindow && 'PerformanceObserver' in window) {
+        const observer = new PerformanceObserver(entryList => {
+            const entries = entryList.getEntries();
+            const lcpEntry = entries[entries.length - 1]; // Get the last (largest) entry
+            if (lcpEntry) {
+                // Disconnect the observer as we only need the LCP
+                observer.disconnect();
+                // Load the script after LCP
+                isLargestContentPatinDone = true;
+                rIC(() => callback());
+            }
+        });
+        // Start observing for Largest Contentful Paint (LCP) entries
+        observer.observe({ type: 'largest-contentful-paint', buffered: true });
+        setTimeout(() => {
+            if (!isLargestContentPatinDone) {
+                observer.disconnect();
+                callback();
+            }
+        }, timeout);
+    }
+    else {
+        return setTimeout(callback, 32);
+    }
+};
 export const rIC = (callback, timeout = 5000) => {
     if (balBrowser.hasWindow && 'requestIdleCallback' in window) {
         ;
@@ -22,6 +52,13 @@ export const debounceEvent = (ev, wait) => {
         emit: debounce(original.emit.bind(original), wait),
     };
 };
+export const debounceLCP = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
 export const debounce = (func, wait = 0) => {
     let timer;
     return (...args) => {
@@ -227,8 +264,7 @@ export const waitForDesignSystem = async (el, _config) => {
             }
         }));
     }
-    await waitAfterFramePaint();
-    await waitAfterIdleCallback();
+    await Promise.all([waitAfterFramePaint(), waitAfterLargestContentfulPaintCallback(), waitAfterIdleCallback()]);
 };
 export const waitAfterFramePaint = () => {
     return new Promise(resolve => raf(() => runHighPrioritizedTask(resolve)));
@@ -236,6 +272,9 @@ export const waitAfterFramePaint = () => {
 export const waitAfterIdleCallback = () => {
     return new Promise(resolve => rIC(() => runHighPrioritizedTask(resolve)));
 };
+export const waitAfterLargestContentfulPaintCallback = () => {
+    return new Promise(resolve => rLCP(() => runHighPrioritizedTask(resolve)));
+};
 export const runHighPrioritizedTask = (callback) => {
     if (balBrowser.hasWindow && 'MessageChannel' in window) {
         const messageChannel = new window.MessageChannel();

package/dist/collection/utils/keyboard/index.js

@@ -1,2 +1,3 @@
 export * from './keyboard.interfaces';
 export * from './keyboard.decorator';
+export * from './keyboard.helpers';

package/dist/collection/utils/keyboard/keyboard.helpers.js

@@ -0,0 +1,60 @@
+/**
+ * Returns `true` if the keyboard event was triggered by the `Enter` key
+ */
+export function isEnterKey(event) {
+    return event.key === 'Enter';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `Space` key
+ */
+export function isSpaceKey(event) {
+    return event.key === ' ';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `Escape` key
+ */
+export function isEscapeKey(event) {
+    return event.key === 'Escape';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `Backspace` key
+ */
+export function isBackspaceKey(event) {
+    return event.key === 'Backspace';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `ArrowDown` key
+ */
+export function isArrowDownKey(event) {
+    return event.key === 'ArrowDown' || event.key === 'Down';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `ArrowUp` key
+ */
+export function isArrowUpKey(event) {
+    return event.key === 'ArrowUp' || event.key === 'Up';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `ArrowLeft` key
+ */
+export function isArrowLeftKey(event) {
+    return event.key === 'ArrowLeft' || event.key === 'Left';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `ArrowRight` key
+ */
+export function isArrowRightKey(event) {
+    return event.key === 'ArrowRight' || event.key === 'Right';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `Home` key
+ */
+export function isHomeKey(event) {
+    return event.key === 'Home';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `End` key
+ */
+export function isEndKey(event) {
+    return event.key === 'End';
+}

package/dist/collection/utils/listen.js

@@ -0,0 +1,55 @@
+import { addEventListener, removeEventListener } from "./helpers";
+import { balBrowser } from "./browser";
+/**
+ * This decorator replaces the @Listen from stencil since
+ * they have issue with connecting and disconnecting web-components.
+ */
+export function ListenTo(eventName, opts = {}) {
+    return function (target, propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback } = target;
+        const { capture, passive } = opts;
+        const options = { capture, passive };
+        const callback = target[propertyKey];
+        /**
+         * Define const keys for binding the target
+         * and callback to the web component
+         */
+        const boundPropertyKey = `__${propertyKey}Bound`;
+        const boundEL = `__elBound`;
+        target.connectedCallback = function () {
+            connectedCallback && connectedCallback.call(this);
+            if (this.el) {
+                /**
+                 * Bind target element to the web component so we can
+                 * add and remove the event listener
+                 */
+                if (opts.target === 'document' && balBrowser.hasDocument) {
+                    this[boundEL] = document;
+                }
+                else if (opts.target === 'window' && balBrowser.hasWindow) {
+                    this[boundEL] = window;
+                }
+                else {
+                    this[boundEL] = this.el;
+                }
+                /**
+                 * Bind event listener callback function to the web component
+                 * so we can add and remove the event listener
+                 */
+                this[boundPropertyKey] = callback.bind(this);
+                /**
+                 * Add event listener
+                 */
+                if (this[boundEL] && callback) {
+                    addEventListener(this[boundEL], eventName, this[boundPropertyKey], options);
+                }
+            }
+        };
+        target.disconnectedCallback = function () {
+            disconnectedCallback && disconnectedCallback.call(this);
+            if (this[boundEL] && callback) {
+                removeEventListener(this[boundEL], eventName, this[boundPropertyKey], options);
+            }
+        };
+    };
+}

package/dist/collection/utils/mask/types/mask-date.js

@@ -1,4 +1,4 @@
-import { dateSeparator } from "@baloise/web-app-utils";
+import { dateSeparator } from "../../date";
 import { NUMBER_KEYS } from "../../constants/keys.constant";
 import { MaskBlock } from "../blocks";
 import { AbstractMask } from "../mask";

package/dist/collection/utils/mutation/mutation.subject.js

@@ -1,4 +1,4 @@
-import { debounce } from "../helpers";
+import { debounce, rLCP } from "../helpers";
 import { SingleSubject } from "../types/signal";
 import { BalMutationListener } from "./mutation.listener";
 export class BalMutationSubject extends SingleSubject {
@@ -13,18 +13,20 @@ export class BalMutationSubject extends SingleSubject {
         this.listener = new BalMutationListener(options);
     }
     attach(observer) {
-        var _a, _b, _c;
         super.attach(observer);
-        if (this.options.closest) {
-            const closestElement = observer.el.closest(this.options.closest);
-            if (closestElement) {
-                (_a = this.listener) === null || _a === void 0 ? void 0 : _a.connect(closestElement);
+        rLCP(() => {
+            var _a, _b, _c;
+            if (this.options.closest) {
+                const closestElement = observer.el.closest(this.options.closest);
+                if (closestElement) {
+                    (_a = this.listener) === null || _a === void 0 ? void 0 : _a.connect(closestElement);
+                }
             }
-        }
-        else {
-            (_b = this.listener) === null || _b === void 0 ? void 0 : _b.connect(observer.el);
-        }
-        (_c = this.listener) === null || _c === void 0 ? void 0 : _c.add(() => this.debouncedNotify());
+            else {
+                (_b = this.listener) === null || _b === void 0 ? void 0 : _b.connect(observer.el);
+            }
+            (_c = this.listener) === null || _c === void 0 ? void 0 : _c.add(() => this.debouncedNotify());
+        });
     }
     detach() {
         var _a;

package/dist/collection/utils/number.js

@@ -1,24 +1,32 @@
 import { defaultLocale, useBalConfig } from "./config";
-import { getDecimalSeparator as getDecimalSeparatorUtil, getThousandSeparator as getThousandSeparatorUtil, formatLocaleNumber as formatLocaleNumberUtil, } from "@baloise/web-app-utils";
 const getLocale = () => {
     const config = useBalConfig();
     return (config && config.locale) || defaultLocale;
 };
-export const getDecimalSeparator = () => {
-    return getDecimalSeparatorUtil(getLocale());
-};
+export function getDecimalSeparator() {
+    return Intl.NumberFormat(getLocale())
+        .format(1.1)
+        .replace(/\p{Number}/gu, '');
+}
 export const getDecimalSeparators = () => {
     if (getThousandSeparator() !== '.') {
         return [getDecimalSeparator(), '.'];
     }
     return [getDecimalSeparator()];
 };
-export const getThousandSeparator = () => {
-    return getThousandSeparatorUtil(getLocale());
-};
-export const formatLocaleNumber = (number, minimumFractionDigits) => {
-    return formatLocaleNumberUtil(getLocale(), number, minimumFractionDigits);
-};
+export function getThousandSeparator() {
+    return Intl.NumberFormat(getLocale())
+        .format(11111)
+        .replace(/\p{Number}/gu, '');
+}
+export function formatLocaleNumber(number, minimumFractionDigits) {
+    const options = minimumFractionDigits !== undefined ? { minimumFractionDigits, maximumFractionDigits: minimumFractionDigits } : {};
+    const formattedNumber = Intl.NumberFormat(getLocale(), Object.assign({}, options)).format(number);
+    if (formattedNumber === 'NaN') {
+        return '';
+    }
+    return formattedNumber;
+}
 export const parseLocaleNumber = (stringNumber) => {
     const thousandSeparator = getThousandSeparator();
     const decimalSeparator = getDecimalSeparator();

package/dist/collection/utils/swipe/swipe.listener.js

@@ -1,5 +1,5 @@
 import { ListenerAbstract } from "../types/listener";
-import { rIC } from "../helpers";
+import { rLCP } from "../helpers";
 export class BalSwipeListener extends ListenerAbstract {
     async connect(el) {
         super.connect(el);
@@ -17,7 +17,7 @@ export class BalSwipeListener extends ListenerAbstract {
     }
     async loadLib() {
         return new Promise((resolve, reject) => {
-            rIC(async () => {
+            rLCP(async () => {
                 import(/* @vite-ignore */ 'contactjs')
                     .then(module => {
                     this.PointerListenerLib = module.PointerListener;

package/dist/esm/{app-globals-b0dd0fc4.js → app-globals-4d0448ee.js}

@@ -1,4 +1,4 @@
-import { i as initializeBaloiseDesignSystem } from './initialize-e216cfe4.js';
+import { i as initializeBaloiseDesignSystem } from './initialize-f93872c4.js';
 
 function appGlobalScript () {
     initializeBaloiseDesignSystem();