@baloise/ds-core 16.8.0 → 17.0.0-nightly.20241202

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

@@ -0,0 +1,229 @@
+import { Host, h } from "@stencil/core";
+import * as balIcons from "../../../../../../icons/src/index";
+import { updateBalIcons } from "../../../utils/config";
+import { balBrowser } from "../../../utils/browser";
+import globalScript from "../../../global";
+/**
+ * @internal
+ */
+export class DocApp {
+    constructor() {
+        this.logComponents = '';
+        this.logLifecycle = true;
+        this.logEvents = true;
+        this.logRender = true;
+        this.logCustom = true;
+        this.stickyFooter = false;
+        this.region = undefined;
+        this.language = undefined;
+        this.animated = true;
+    }
+    connectedCallback() {
+        globalScript();
+        updateBalIcons(balIcons);
+    }
+    componentDidRender() {
+        const logConfig = {
+            components: this.logComponents
+                .split(',')
+                .map(c => c.trim())
+                .filter(c => c !== ''),
+            lifecycle: this.logLifecycle,
+            event: this.logEvents,
+            render: this.logRender,
+            custom: this.logCustom,
+        };
+        if (balBrowser.hasWindow) {
+            if (this.logComponents) {
+                ;
+                window.BaloiseDesignSystem.config.logger = logConfig;
+            }
+            if (this.region) {
+                ;
+                window.BaloiseDesignSystem.config.region = this.region;
+            }
+            if (this.language) {
+                ;
+                window.BaloiseDesignSystem.config.language = this.language;
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f2f93224cddb0b57a9a781aa06b5d3aa0a9216bb' }, h("bal-app", { key: 'c67b08452317ed2a051c5106e7e8c4334c017899', animated: this.animated }, h("div", { key: 'b2922fb904aebbd1530cd2196dabc2216511151a', class: { 'has-sticky-footer': this.stickyFooter } }, h("slot", { key: '6cc371e527a2003053475412a5ac82c3bb9ff994' })))));
+    }
+    static get is() { return "bal-doc-app"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-doc-app.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-doc-app.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logComponents": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-components",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "logLifecycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-lifecycle",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logEvents": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-events",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logRender": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-render",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logCustom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-custom",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stickyFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sticky-footer",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "region",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all animation inside the bal-app. Can be used for simplify e2e testing."
+                },
+                "attribute": "animated",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+}

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-nightly.20241202';

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;