@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

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

@@ -0,0 +1,247 @@
+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: 'c86b106e773e7f16451b7cc0767907b48746919b' }, h("bal-app", { key: '1f8de4c0b71fe89f6e3704010271ee499ef5e05c', animated: this.animated }, h("div", { key: 'a58a3eefd8969e481a4950d6dd53a33cfb79c59b', class: { 'has-sticky-footer': this.stickyFooter } }, h("slot", { key: 'c80c4b5bdfeb9f002831ad44911ade2a2b3fb021' })))));
+    }
+    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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "log-components",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "logLifecycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "region",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "animated",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/index.js

@@ -31,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, waitAfterLargestContentfulPaintCallback, shallowReady, deepReady, wait, getAppRoot, componentOnReady, isDescendant, } from './utils/helpers';
+export { waitForComponent, waitForDesignSystem, waitAfterFramePaint, waitAfterIdleCallback, waitAfterLargestContentfulPaintCallback, waitOnLoadEventCallback, 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/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '17.2.1';
+export const VERSION = '17.2.2-nightly.20250109';

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

@@ -1,4 +1,4 @@
-import { rLCP } from "./helpers";
+import { rOnLoad } from "./helpers";
 class BalFloatingUiInternal {
     constructor() {
         this.load = async () => {
@@ -7,7 +7,7 @@ class BalFloatingUiInternal {
                     return resolve(this.lib);
                 }
                 else {
-                    rLCP(async () => {
+                    rOnLoad(async () => {
                         import(/* @vite-ignore */ '@floating-ui/dom')
                             .then(module => {
                             this.lib = module;

package/dist/collection/utils/helpers.js

@@ -31,6 +31,25 @@ export const rLCP = (callback, timeout = 3000) => {
         return setTimeout(callback, 32);
     }
 };
+export const rOnLoad = (callback, timeout = 32) => {
+    let called = false;
+    const callOnce = () => {
+        if (!called) {
+            called = true;
+            callback();
+        }
+    };
+    if (balBrowser.hasWindow) {
+        const timer = setTimeout(callOnce, timeout);
+        window.addEventListener('load', () => {
+            clearTimeout(timer);
+            callOnce();
+        });
+    }
+    else {
+        setTimeout(callOnce, 32);
+    }
+};
 export const rIC = (callback, timeout = 5000) => {
     if (balBrowser.hasWindow && 'requestIdleCallback' in window) {
         ;
@@ -226,8 +245,16 @@ export const waitForComponent = async (el) => {
     await waitAfterIdleCallback();
 };
 export const isChildOfEventTarget = async (ev, el, callback) => {
-    if (ev && ev.target && el && el !== ev.target && isDescendant(ev.target, el)) {
-        callback();
+    if (ev && ev.target && el && el !== ev.target) {
+        let target = ev.target;
+        // special case for the navbar case
+        const isNavbarBrand = ev.target.nodeName === 'BAL-NAVBAR-BRAND';
+        if (isNavbarBrand) {
+            target = target.closest('bal-navbar');
+        }
+        if (target && isDescendant(target, el)) {
+            callback();
+        }
     }
 };
 export const waitForDesignSystem = async (el, _config) => {
@@ -275,6 +302,9 @@ export const waitAfterIdleCallback = () => {
 export const waitAfterLargestContentfulPaintCallback = () => {
     return new Promise(resolve => rLCP(() => runHighPrioritizedTask(resolve)));
 };
+export const waitOnLoadEventCallback = () => {
+    return new Promise(resolve => rOnLoad(() => runHighPrioritizedTask(resolve)));
+};
 export const runHighPrioritizedTask = (callback) => {
     if (balBrowser.hasWindow && 'MessageChannel' in window) {
         const messageChannel = new window.MessageChannel();

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

@@ -1,3 +1,9 @@
+/**
+ * Returns `true` if the keyboard event was triggered by the `Enter` key
+ */
+export function isTabKey(event) {
+    return event.key === 'Tab';
+}
 /**
  * Returns `true` if the keyboard event was triggered by the `Enter` key
  */

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

@@ -13,21 +13,24 @@ export class BalMutationListener extends ListenerAbstract {
             characterData: true,
         };
         this.mutationCallback = (mutationRecord) => {
-            const hasChanges = mutationRecord.some(record => this.tags.includes(record.target.nodeName));
-            if (hasChanges) {
-                return this.notify(undefined);
-            }
-            const hasRemovedNodeChanges = mutationRecord.some(record => Array.from(record.removedNodes).some((node) => this.tags.includes(node.nodeName)));
-            if (hasRemovedNodeChanges) {
-                return this.notify(undefined);
-            }
+            // default when no tag is provided
             if (this.tags.length === 0 && mutationRecord.length > 0) {
-                const hasCharacterDataChanges = mutationRecord.some(record => record.type === 'characterData');
-                if (hasCharacterDataChanges) {
-                    return this.notify(undefined);
-                }
+                return this.notify(undefined);
             }
-            if (this.tags.length === 0 && mutationRecord.length > 0) {
+            const tagRecords = mutationRecord.filter(record => this.tags.includes(record.target.nodeName.toLowerCase()));
+            // check for added nodes
+            const hasAddedNodeChanges = tagRecords.some(record => Array.from(record.addedNodes).some((node) => this.tags.includes(node.nodeName)));
+            // check for removed nodes
+            const hasRemovedNodeChanges = tagRecords.some(record => Array.from(record.removedNodes).some((node) => this.tags.includes(node.nodeName)));
+            // check for attribute changes
+            const attributeNameCheck = (attributeName) => {
+                return (attributeName !== 'styles' &&
+                    attributeName !== 'class' &&
+                    !attributeName.startsWith('data-') &&
+                    !attributeName.startsWith('aria-'));
+            };
+            const hasAttributeChanges = tagRecords.some(record => record.type === 'attributes' && attributeNameCheck(record.attributeName));
+            if (hasAddedNodeChanges || hasAttributeChanges || hasRemovedNodeChanges) {
                 return this.notify(undefined);
             }
         };

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

@@ -1,10 +1,10 @@
 import { balBrowser } from "../browser";
-import { debounce } from "../helpers";
+import { debounce, rIC } from "../helpers";
 import { ListenerAbstract } from "../types/listener";
 export class BalResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
-        this.debouncedNotify = debounce(() => this.notify(), 10);
+        this.debouncedNotify = debounce((info) => this.notify(info), 10);
     }
     connect(el) {
         var _a;
@@ -22,7 +22,23 @@ export class BalResizeListener extends ListenerAbstract {
                     if (!Array.isArray(entries) || !entries.length) {
                         return;
                     }
-                    this.debouncedNotify();
+                    const entry = entries[0];
+                    if (this.lastWidth === undefined && this.lastHeight === undefined) {
+                        this.lastWidth = entry.contentRect.width;
+                        this.lastHeight = entry.contentRect.height;
+                    }
+                    else {
+                        const widthChanged = this.lastWidth !== entry.contentRect.width;
+                        const heightChanged = this.lastHeight !== entry.contentRect.height;
+                        if (widthChanged || heightChanged) {
+                            rIC(() => this.debouncedNotify({
+                                width: widthChanged,
+                                height: heightChanged,
+                            }));
+                            this.lastWidth = entry.contentRect.width;
+                            this.lastHeight = entry.contentRect.height;
+                        }
+                    }
                 });
             }
         });

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

@@ -2,8 +2,8 @@ import { SingleSubject } from "../types/signal";
 import { BalResizeListener } from "./resize.listener";
 export class BalResizeSubject extends SingleSubject {
     constructor() {
-        super((observer, _data) => {
-            observer.resizeListener({});
+        super((observer, data) => {
+            observer.resizeListener(data);
         });
         this.listener = new BalResizeListener();
     }

package/dist/collection/utils/style.js

@@ -15,8 +15,21 @@ export const getComputedWidth = (element) => {
         return element.clientWidth;
     }
     const computedStyle = window.getComputedStyle(element);
+    const boxSizing = computedStyle.getPropertyValue('box-sizing');
     const width = convert(computedStyle.getPropertyValue('width'));
-    const paddingLeft = convert(computedStyle.getPropertyValue('padding-left'));
-    const paddingRight = convert(computedStyle.getPropertyValue('padding-left'));
-    return width + paddingLeft + paddingRight;
+    if (boxSizing === 'border-box') {
+        return width;
+    }
+    const right = convert(computedStyle.getPropertyValue('padding-right'));
+    const left = convert(computedStyle.getPropertyValue('padding-left'));
+    return left + width + right;
+};
+export const getWidthOfOverflowingChildren = (element) => {
+    const children = Array.from(element.children);
+    let maxWidth = 0;
+    for (const child of children) {
+        const childWidth = child.offsetLeft + child.offsetWidth;
+        maxWidth = Math.max(maxWidth, childWidth);
+    }
+    return maxWidth;
 };

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

@@ -1,5 +1,5 @@
 import { ListenerAbstract } from "../types/listener";
-import { rLCP } from "../helpers";
+import { rOnLoad } 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) => {
-            rLCP(async () => {
+            rOnLoad(async () => {
                 import(/* @vite-ignore */ 'contactjs')
                     .then(module => {
                     this.PointerListenerLib = module.PointerListener;

package/dist/collection/{components/bal-carousel → utils/swiper}/controls/dot-control.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export const DotControl = ({ value, items, containerId, onControlChange }) => {
-    const block = BEM.block('carousel');
+    const block = BEM.block('swiper');
     const controls = block.element('controls');
     const onChange = (ev) => {
         let selectedValue = ev.detail - 1;

package/dist/collection/utils/swiper/controls/index.js

@@ -0,0 +1,3 @@
+export * from './dot-control';
+export * from './small-control';
+export * from './large-control';

package/dist/collection/{components/bal-carousel → utils/swiper}/controls/large-control.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, containerId, leftControlTitle, rightControlTitle, }) => {
-    const block = BEM.block('carousel');
+    const block = BEM.block('swiper');
     const controls = block.element('controls');
     const button = controls.element('button');
-    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), tabindex: -1, disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), tabindex: -1, disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };

package/dist/collection/{components/bal-carousel → utils/swiper}/controls/small-control.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, containerId, onNextClick, onPreviousClick, }) => {
-    const block = BEM.block('carousel');
+    const block = BEM.block('swiper');
     const controls = block.element('controls');
     const button = controls.element('button');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };

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

@@ -0,0 +1 @@
+export { SwiperUtil } from './swiper.util';

package/dist/collection/{components/bal-carousel/bal-carousel.i18n.js → utils/swiper/swiper.i18n.js}

@@ -1,4 +1,4 @@
-export const i18nControlLabel = {
+export const i18nSwiperControlLabel = {
     de: {
         left: 'vorherige',
         right: 'nächste',