@baloise/ds-core 19.9.3-nightly.20260424 → 19.9.4

package/components/index.js

@@ -1,3 +1,4 @@
+import { setPlatformHelpers } from '@stencil/core/internal/client';
 export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 export { i as i18nBalClose } from './bal-close.i18n.js';
@@ -7,25 +8,177 @@ export { i as i18nBalLabel } from './bal-label.i18n.js';
 export { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
 export { n as newBalStepOption } from './bal-step.util.js';
 export { n as newBalTabOption } from './bal-tab.util.js';
-export { B as BalSnackbarController, a as BalToastController, b as balSnackbarController, c as balToastController, i as initialize, i as initializeBaloiseDesignSystem, s as setupConfig } from './initialize.js';
 import { b as balBrowser } from './browser.js';
+import { w as waitForComponent, g as getAppRoot, c as componentOnReady } from './helpers.js';
+export { d as deepReady, i as isDescendant, s as shallowReady, a as wait, b as waitAfterFramePaint, e as waitAfterIdleCallback, f as waitAfterLargestContentfulPaintCallback, h as waitForDesignSystem, j as waitOnLoadEventCallback } from './helpers.js';
+import { d as defaultConfig } from './config.default.js';
 import { b as balDevice } from './device.js';
 export { B as BalDevice } from './device.js';
 export { n as newBalOption } from './option.js';
 export { s as scrollToFirstInvalidField } from './form.js';
-import { g as getAppRoot, c as componentOnReady } from './helpers.js';
-export { d as deepReady, i as isDescendant, s as shallowReady, w as wait, a as waitAfterFramePaint, b as waitAfterIdleCallback, e as waitAfterLargestContentfulPaintCallback, f as waitForComponent, h as waitForDesignSystem, j as waitOnLoadEventCallback } from './helpers.js';
 export { I as INVALID_VALUE } from './mask-util.js';
 export { B as BalScrollHandler } from './scroll.js';
 import { g as getOverlays, a as getOverlay } from './overlays.js';
 import { B as BalWindowResizeListener, b as balBreakpoints } from './breakpoints.subject.js';
 export { c as BalBreakpointSubject, d as BalBreakpointsUtil, a as balBreakpointSubject } from './breakpoints.subject.js';
 export { a as attachToConfig, d as detachFromConfig, o as onBalConfigChange, u as updateBalAllowedLanguages, b as updateBalAnimated, c as updateBalIcons, e as updateBalLanguage, f as updateBalRegion, g as useBalConfig } from './config.utils.js';
-export { d as defaultConfig } from './config.default.js';
 export { B as BalDate } from './date.js';
 import { S as Subject } from './listener.js';
 export { B as BalSwipeSubject } from './swipe.subject.js';
 
+const BALOISE_ANIMATION_KEY = 'baloise-animated';
+
+class Config {
+    constructor() {
+        this._componentObservers = [];
+        this._observers = [];
+        this._config = defaultConfig;
+    }
+    get locale() {
+        return `${this._config.language}-${this._config.region}`;
+    }
+    get region() {
+        return this._config.region;
+    }
+    set region(region) {
+        if (region !== this._config.region) {
+            this._config.region = region;
+            this._notify();
+        }
+    }
+    get language() {
+        return this._config.language;
+    }
+    get brand() {
+        return this._config.brand;
+    }
+    set brand(brand) {
+        if (brand !== this._config.brand) {
+            this._config.brand = brand;
+            this._notify();
+        }
+    }
+    set language(language) {
+        if (language !== this._config.language) {
+            if (this._config.allowedLanguages.includes(language)) {
+                this._config.language = language;
+            }
+            else {
+                this._config.language = this._config.fallbackLanguage;
+            }
+            this._notify();
+        }
+    }
+    get allowedLanguages() {
+        return this._config.allowedLanguages;
+    }
+    set allowedLanguages(allowedLanguages) {
+        if (allowedLanguages !== this._config.allowedLanguages) {
+            this._config.allowedLanguages = allowedLanguages;
+            this._notify();
+        }
+    }
+    get icons() {
+        return this._config.icons;
+    }
+    set icons(icons) {
+        this._config.icons = Object.assign(Object.assign({}, this._config.icons), icons);
+        this._notify();
+    }
+    get logger() {
+        return this._config.logger;
+    }
+    set logger(logger) {
+        this._config.logger = Object.assign({}, logger);
+        this._notify();
+    }
+    get animated() {
+        return this._config.animated;
+    }
+    set animated(animated) {
+        this._config.animated = animated;
+        this._notify();
+    }
+    get httpFormSubmit() {
+        return this._config.httpFormSubmit;
+    }
+    set httpFormSubmit(httpFormSubmit) {
+        this._config.httpFormSubmit = httpFormSubmit;
+        this._notify();
+    }
+    attach(observer) {
+        const isExist = this._observers.includes(observer);
+        if (isExist) {
+            return console.log('Subject: Observer has been attached already.');
+        }
+        this._observers.push(observer);
+        observer.configChanged(this._config);
+    }
+    detach(observer) {
+        const observerIndex = this._observers.indexOf(observer);
+        if (observerIndex === -1) {
+            return console.log('Subject: Nonexistent observer.');
+        }
+        this._observers.splice(observerIndex, 1);
+    }
+    attachComponent(observer) {
+        const isExist = this._componentObservers.includes(observer);
+        if (isExist) {
+            return console.log('Subject: Observer has been attached already.');
+        }
+        this._componentObservers.push(observer);
+        observer.configChanged(this._config);
+    }
+    detachComponent(observer) {
+        const observerIndex = this._componentObservers.indexOf(observer);
+        if (observerIndex === -1) {
+            return console.log('Subject: Nonexistent observer.');
+        }
+        this._componentObservers.splice(observerIndex, 1);
+    }
+    toString() {
+        return JSON.stringify(this._config);
+    }
+    reset(config) {
+        this._config = Object.assign(Object.assign(Object.assign({}, this._config), config), { icons: Object.assign(Object.assign({}, this._config.icons), config.icons) });
+        this._notify(false);
+    }
+    _notify(all = true) {
+        for (const observer of this._componentObservers) {
+            observer.configChanged(this._config);
+        }
+        if (all) {
+            for (const observer of this._observers) {
+                observer.configChanged(this._config);
+            }
+        }
+    }
+}
+const config = /*@__PURE__*/ new Config();
+const configFromLocalStorage = (win) => {
+    try {
+        const animated = JSON.parse(win.localStorage.getItem(BALOISE_ANIMATION_KEY));
+        if (animated !== null) {
+            return {
+                animated,
+            };
+        }
+        return {};
+    }
+    catch (e) {
+        return {};
+    }
+};
+
+const setupConfig = (userConfig = {}, win = {}) => {
+    if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
+        win = window;
+    }
+    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
+    config.reset(Object.assign(Object.assign(Object.assign({}, configFromLocalStorage(win)), userConfig), { icons: Object.assign({}, userConfig.icons) }));
+    win.BaloiseDesignSystem.config = config;
+};
+
 const i18nBalFieldLabel = {
     de: {
         optional: ' (optional)',
@@ -79,6 +232,297 @@ const newBalSingleOptionValue = (valueAndLabel, disabled = false, data) => {
     return newBalOptionValue(valueAndLabel, valueAndLabel, disabled, data);
 };
 
+class BalNoticeController {
+    constructor(options) {
+        this.options = options;
+        this.container = null;
+        this.queue = [];
+        this.preQueue = [];
+        this.queueLimit = 5;
+    }
+    create(options) {
+        if (balBrowser.hasDocument) {
+            this.setupContainer(options);
+            const clone = this.findClone(options);
+            if (clone === undefined) {
+                const el = document.createElement(this.options.tag);
+                Object.assign(el, options);
+                el.addEventListener('balClose', ev => {
+                    this.removeFromQueue(ev.detail);
+                });
+                this.preQueue.push(el);
+                this.updateQueue();
+                return el;
+            }
+            return clone;
+        }
+    }
+    setQueue(queueLimit) {
+        this.queueLimit = queueLimit;
+    }
+    async dismissAll() {
+        var _a;
+        const elements = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.options.tag);
+        if (elements) {
+            const closingQueue = [];
+            for (let index = 0; index < elements.length; index++) {
+                const el = elements[index];
+                if (el.close) {
+                    closingQueue.push(el.close());
+                }
+            }
+            await Promise.all(closingQueue);
+        }
+    }
+    /**
+     * @deprecated use dismissAll instead
+     */
+    async clearAll() {
+        console.warn('[DEPRECATED] - use dismissAll() instead');
+        return this.dismissAll();
+    }
+    findClone(options) {
+        for (let index = 0; index < this.queue.length; index++) {
+            const el = this.queue[index];
+            if (el.message === options.message && el.color === options.color) {
+                return el;
+            }
+        }
+        return undefined;
+    }
+    setupContainer(options) {
+        if (balBrowser.hasDocument) {
+            const containerId = `${this.options.tag}-container`;
+            this.container = document.getElementById(containerId);
+            if (this.container)
+                return;
+            if (!this.container) {
+                this.container = document.createElement('bal-notices');
+                this.container.setAttribute('interface', this.options.tag.replace('bal-', ''));
+                this.container.setAttribute('animated', options.animated ? 'true' : 'false');
+                if (options.container !== undefined) {
+                    this.container.setAttribute('container', options.container === true ? '' : options.container);
+                }
+                this.container.id = containerId;
+            }
+            document.body.appendChild(this.container);
+        }
+    }
+    async updateQueue() {
+        var _a;
+        if (this.queue.length < this.queueLimit) {
+            const el = this.preQueue.shift();
+            if (el && this.container) {
+                await waitForComponent(this.container);
+                const innerEl = this.container.querySelector('.bal-notices__inner');
+                if (innerEl) {
+                    this.queue.push(el);
+                    innerEl.insertAdjacentElement('beforeend', el);
+                }
+            }
+        }
+        if (this.queue.length === 0) {
+            (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        }
+    }
+    removeFromQueue(toastId) {
+        this.queue = this.queue.filter(el => el.id !== toastId);
+        setTimeout(() => this.updateQueue(), 0);
+    }
+}
+
+class BalSnackbarController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-snackbar',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+const balSnackbarController = new BalSnackbarController();
+
+class BalToastController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-toast',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+const balToastController = new BalToastController();
+
+const tags = [
+    "bal-accordion",
+    "bal-accordion-details",
+    "bal-accordion-summary",
+    "bal-accordion-trigger",
+    "bal-app",
+    "bal-badge",
+    "bal-button",
+    "bal-button-group",
+    "bal-card",
+    "bal-card-actions",
+    "bal-card-button",
+    "bal-card-content",
+    "bal-card-subtitle",
+    "bal-card-title",
+    "bal-carousel",
+    "bal-carousel-item",
+    "bal-check",
+    "bal-checkbox",
+    "bal-checkbox-group",
+    "bal-close",
+    "bal-content",
+    "bal-data",
+    "bal-data-item",
+    "bal-data-label",
+    "bal-data-value",
+    "bal-date",
+    "bal-date-calendar",
+    "bal-date-calendar-cell",
+    "bal-divider",
+    "bal-dropdown",
+    "bal-field",
+    "bal-field-control",
+    "bal-field-hint",
+    "bal-field-label",
+    "bal-field-message",
+    "bal-file-upload",
+    "bal-footer",
+    "bal-form",
+    "bal-form-col",
+    "bal-form-grid",
+    "bal-heading",
+    "bal-hint",
+    "bal-hint-text",
+    "bal-hint-title",
+    "bal-icon",
+    "bal-input",
+    "bal-input-date",
+    "bal-input-group",
+    "bal-input-slider",
+    "bal-input-stepper",
+    "bal-label",
+    "bal-list",
+    "bal-list-item",
+    "bal-list-item-accordion-body",
+    "bal-list-item-accordion-head",
+    "bal-list-item-content",
+    "bal-list-item-icon",
+    "bal-list-item-subtitle",
+    "bal-list-item-title",
+    "bal-logo",
+    "bal-modal",
+    "bal-modal-body",
+    "bal-modal-header",
+    "bal-nav",
+    "bal-nav-link",
+    "bal-nav-link-grid",
+    "bal-nav-link-grid-col",
+    "bal-nav-link-group",
+    "bal-nav-menu-bar",
+    "bal-nav-menu-flyout",
+    "bal-nav-meta-bar",
+    "bal-navbar",
+    "bal-navbar-brand",
+    "bal-navbar-menu",
+    "bal-navbar-menu-end",
+    "bal-navbar-menu-start",
+    "bal-notices",
+    "bal-notification",
+    "bal-number-input",
+    "bal-option",
+    "bal-option-list",
+    "bal-pagination",
+    "bal-popover",
+    "bal-popover-content",
+    "bal-popup",
+    "bal-progress-bar",
+    "bal-radio",
+    "bal-radio-group",
+    "bal-radio-icon",
+    "bal-segment",
+    "bal-segment-item",
+    "bal-select",
+    "bal-select-option",
+    "bal-shape",
+    "bal-sheet",
+    "bal-snackbar",
+    "bal-spinner",
+    "bal-stack",
+    "bal-stage",
+    "bal-stage-back-link",
+    "bal-stage-body",
+    "bal-stage-foot",
+    "bal-stage-head",
+    "bal-stage-image",
+    "bal-step-item",
+    "bal-steps",
+    "bal-switch",
+    "bal-tab-item",
+    "bal-table",
+    "bal-tabs",
+    "bal-tag",
+    "bal-tag-group",
+    "bal-text",
+    "bal-textarea",
+    "bal-time-input",
+    "bal-toast",
+    "bal-tooltip"
+];
+
+// generated by .build/version.js
+const VERSION = '19.9.4';
+
+const initializeBaloiseDesignSystem = (userConfig = {}, platformConfig = undefined, win = {}) => {
+    if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
+        win = window;
+    }
+    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
+    if (platformConfig) {
+        setPlatformHelpers(platformConfig);
+    }
+    setupConfig(Object.assign(Object.assign({}, userConfig), platformConfig), win);
+    win.BaloiseDesignSystem.toastController = balToastController;
+    win.BaloiseDesignSystem.snackbarController = balSnackbarController;
+    win.BaloiseDesignSystem.initialize = () => setupConfig(win.BaloiseDesignSystem.config, win);
+    win.BaloiseDesignSystem.version = VERSION;
+    if (userConfig._generateHydrateForCustomElementsOutput) {
+        generateHydrateForCustomElementsOutput(tags);
+    }
+};
+/**
+ * This function generates the CSS needed for custom elements hydration and inserts it into the document head.
+ * The CSS rules include styles for slot fallback and the hydrated class.
+ *
+ * This is copied from the Stencil core library.
+ * src/runtime/bootstrap-lazy.ts
+ */
+const generateHydrateForCustomElementsOutput = (cmpTags = []) => {
+    const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
+    const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+    const win = typeof window !== 'undefined' ? window : {};
+    if (!win.document) {
+        console.warn('Stencil: No document found. Skipping bootstrapping lazy components.');
+        return;
+    }
+    const head = win.document.head;
+    const metaCharset = /* @__PURE__ */ head.querySelector('meta[charset]');
+    const dataStyles = /* @__PURE__ */ win.document.createElement('style');
+    if (cmpTags.length > 0) {
+        dataStyles.textContent += SLOT_FB_CSS;
+        dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
+        if (dataStyles.innerHTML.length) {
+            dataStyles.setAttribute('data-styles', '');
+            head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
+        }
+    }
+};
+
 class BalOrientationSubject extends Subject {
     constructor() {
         super(observer => observer.orientationListener(this.state));
@@ -176,4 +620,4 @@ const isPlatform = (winOrPlatform, platform) => {
 const NewBalOptionValue = newBalOptionValue;
 const NewBalSingleOptionValue = newBalSingleOptionValue;
 
-export { BalModalController, BalOrientationSubject, NewBalOptionValue, NewBalSingleOptionValue, balBreakpoints, balBrowser, balDevice, balModalController, balOrientationSubject, componentOnReady, getAppRoot, getPlatforms, hasTouchSupport, i18nBalFieldLabel, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue };
+export { BalModalController, BalOrientationSubject, BalSnackbarController, BalToastController, NewBalOptionValue, NewBalSingleOptionValue, balBreakpoints, balBrowser, balDevice, balModalController, balOrientationSubject, balSnackbarController, balToastController, componentOnReady, defaultConfig, getAppRoot, getPlatforms, hasTouchSupport, i18nBalFieldLabel, initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue, setupConfig, waitForComponent };

package/components/mutation.decorator.js

@@ -1,4 +1,4 @@
-import { d as deepReady, a as waitAfterFramePaint, q as debounce } from './helpers.js';
+import { d as deepReady, b as waitAfterFramePaint, l as debounce } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 
 class BalMutationListener extends ListenerAbstract {

package/components/overlays.js

@@ -1,5 +1,5 @@
 import { b as balBrowser } from './browser.js';
-import { o as addEventListener, p as removeEventListener } from './helpers.js';
+import { p as addEventListener, q as removeEventListener } from './helpers.js';
 
 /**
  * This query string selects elements that

package/components/resize.decorator.js

@@ -1,4 +1,4 @@
-import { q as debounce, n as rIC } from './helpers.js';
+import { l as debounce, m as rIC } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 import { b as balBrowser } from './browser.js';
 

package/components/swipe.subject.js

@@ -1,6 +1,6 @@
 import { b as balDevice } from './device.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
-import { l as rOnLoad } from './helpers.js';
+import { n as rOnLoad } from './helpers.js';
 
 class BalSwipeListener extends ListenerAbstract {
     async connect(el) {
@@ -8,12 +8,30 @@ class BalSwipeListener extends ListenerAbstract {
         await this.loadLib();
         if (this.PointerListenerLib) {
             this.pointerListener = new this.PointerListenerLib(el, { handleTouchEvents: false });
+            // contactjs calls setPointerCapture on the event target in its onPointerDown handler.
+            // When a pointerdown originates inside a shadow DOM component, the browser retargets
+            // the event so the target appears as the shadow host element (e.g. bal-date-calendar).
+            // This causes pointer capture to be set on the shadow host, which redirects pointerup
+            // away from the actual element inside the shadow DOM, preventing the click event from
+            // being dispatched on the intended target (e.g. bal-date-calendar-cell).
+            // Fix: release pointer capture from shadow host elements immediately after contactjs sets it.
+            this.shadowFixPointerDownListener = (ev) => {
+                const target = ev.target;
+                if (target && target !== el && target.shadowRoot) {
+                    target.releasePointerCapture(ev.pointerId);
+                }
+            };
+            el.addEventListener('pointerdown', this.shadowFixPointerDownListener);
             this.pointerListener.on('swipeleft', () => this.notify({ left: true, right: false }));
             this.pointerListener.on('swiperight', () => this.notify({ left: false, right: true }));
         }
     }
     disconnect() {
         var _a;
+        if (this.shadowFixPointerDownListener && this.el) {
+            this.el.removeEventListener('pointerdown', this.shadowFixPointerDownListener);
+            this.shadowFixPointerDownListener = undefined;
+        }
         super.disconnect();
         (_a = this.pointerListener) === null || _a === void 0 ? void 0 : _a.destroy();
     }

package/components/swiper.util.js

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { i as isDescendant, q as debounce, o as addEventListener, p as removeEventListener, r as raf } from './helpers.js';
+import { i as isDescendant, l as debounce, p as addEventListener, q as removeEventListener, r as raf } from './helpers.js';
 import { e as isTabKey } from './keyboard.helpers.js';
 
 const convert = (value) => parseInt(value.slice(0, -2), 10);

package/components/tokens.esm.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 07:48:46 GMT
+ * Generated on Sun, 26 Apr 2026 06:32:31 GMT
  */
 
 const balColorGreen3 = "#94e3d4";

package/components/visibility.decorator.js

@@ -1,4 +1,4 @@
-import { d as deepReady, a as waitAfterFramePaint, q as debounce } from './helpers.js';
+import { d as deepReady, b as waitAfterFramePaint, l as debounce } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 
 class BalVisibilityListener extends ListenerAbstract {