@baloise/ds-core 17.2.4-nightly.20250114 → 17.2.5

package/components/index.js

@@ -1,3 +1,4 @@
+import { setPlatformHelpers } from '@stencil/core/internal/client';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 export { i as i18nBalDate } from './bal-date.i18n.js';
@@ -5,7 +6,10 @@ export { i as i18nBalClose } from './bal-close.i18n.js';
 export { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
 export { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';
 export { i as i18nBalLabel } from './bal-label.i18n.js';
-export { a as BalSnackbarController, B as BalToastController, c as balSnackbarController, b as balToastController, i as initialize, i as initializeBaloiseDesignSystem, s as setupConfig } from './initialize.js';
+import { b as balBrowser } from './browser.js';
+export { b as balBrowser } from './browser.js';
+import { d as defaultConfig } from './config.default.js';
+export { d as defaultConfig } from './config.default.js';
 export { n as newBalOption } from './option.js';
 export { n as newBalStepOption } from './bal-step.util.js';
 export { n as newBalTabOption } from './bal-tab.util.js';
@@ -13,8 +17,6 @@ import { g as getAppRoot, c as componentOnReady } from './helpers.js';
 export { c as componentOnReady, h as deepReady, g as getAppRoot, j as isDescendant, s as shallowReady, i as wait, b as waitAfterFramePaint, d as waitAfterIdleCallback, e as waitAfterLargestContentfulPaintCallback, w as waitForComponent, a as waitForDesignSystem, f as waitOnLoadEventCallback } from './helpers.js';
 export { s as scrollToFirstInvalidField } from './form.js';
 export { B as BalScrollHandler } from './scroll.js';
-import { b as balBrowser } from './browser.js';
-export { b as balBrowser } from './browser.js';
 import { b as balDevice } from './device.js';
 export { B as BalDevice, b as balDevice } from './device.js';
 export { I as INVALID_VALUE } from './mask-util.js';
@@ -22,11 +24,175 @@ 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, b as balBreakpoints } 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';
 import { S as Subject } from './listener.js';
 export { B as BalSwipeSubject } from './swipe.subject.js';
 export { B as BalDate } from './date.js';
 
+const BALOISE_SESSION_KEY = 'baloise-persist-config';
+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;
+    }
+    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);
+            }
+        }
+        if (balBrowser.hasWindow) {
+            saveConfig(window, this._config);
+        }
+    }
+}
+const config = /*@__PURE__*/ new Config();
+const configFromSession = (win) => {
+    try {
+        const configStr = win.sessionStorage.getItem(BALOISE_SESSION_KEY);
+        return configStr !== null ? JSON.parse(configStr) : {};
+    }
+    catch (e) {
+        return {};
+    }
+};
+const configFromLocalStorage = (win) => {
+    try {
+        const animated = JSON.parse(win.localStorage.getItem(BALOISE_ANIMATION_KEY));
+        if (animated !== null) {
+            return {
+                animated,
+            };
+        }
+        return {};
+    }
+    catch (e) {
+        return {};
+    }
+};
+const saveConfig = (win, c) => {
+    try {
+        win.sessionStorage.setItem(BALOISE_SESSION_KEY, JSON.stringify(c));
+    }
+    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(Object.assign({}, configFromSession(win)), configFromLocalStorage(win)), userConfig), { icons: Object.assign(Object.assign({}, configFromSession(win).icons), userConfig.icons) }));
+    win.BaloiseDesignSystem.config = config;
+};
+
 const i18nBalFieldLabel = {
     de: {
         optional: ' (optional)',
@@ -60,6 +226,139 @@ const i18nBalFieldLabel = {
     },
 };
 
+class BalNoticeController {
+    constructor(options) {
+        this.options = options;
+        this.container = null;
+        this.queue = [];
+        this.preQueue = [];
+        this.queueLimit = 5;
+    }
+    create(options) {
+        if (balBrowser.hasDocument) {
+            this.setupContainer();
+            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() {
+        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.id = containerId;
+            }
+            document.body.appendChild(this.container);
+        }
+    }
+    updateQueue() {
+        var _a;
+        if (this.queue.length < this.queueLimit) {
+            const el = this.preQueue.shift();
+            if (el && this.container) {
+                this.queue.push(el);
+                this.container.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 BalToastController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-toast',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+const balToastController = new BalToastController();
+
+class BalSnackbarController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-snackbar',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+const balSnackbarController = new BalSnackbarController();
+
+// generated by .build/version.js
+const VERSION = '17.2.5';
+
+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;
+};
+
 const newBalCheckboxOption = (option) => {
     return Object.assign(Object.assign({ interface: 'checkbox', labelHidden: false, flat: false, disabled: false, readonly: false, required: false, nonSubmit: false, invalid: false, checked: false }, option), { label: '', html: option.label });
 };
@@ -177,4 +476,4 @@ const isPlatform = (winOrPlatform, platform) => {
 const NewBalOptionValue = newBalOptionValue;
 const NewBalSingleOptionValue = newBalSingleOptionValue;
 
-export { BalModalController, BalOrientationSubject, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, getPlatforms, hasTouchSupport, i18nBalFieldLabel, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue };
+export { BalModalController, BalOrientationSubject, BalSnackbarController, BalToastController, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, balSnackbarController, balToastController, getPlatforms, hasTouchSupport, i18nBalFieldLabel, initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue, setupConfig };

package/components/keyboard.helpers.js

@@ -65,4 +65,4 @@ function isEndKey(event) {
     return event.key === 'End';
 }
 
-export { isSpaceKey as a, isTabKey as b, isArrowDownKey as c, isArrowUpKey as d, isEscapeKey as e, isArrowLeftKey as f, isArrowRightKey as g, isHomeKey as h, isEnterKey as i, isEndKey as j, isBackspaceKey as k };
+export { isSpaceKey as a, isTabKey as b, isArrowDownKey as c, isArrowUpKey as d, isEscapeKey as e, isBackspaceKey as f, isArrowLeftKey as g, isArrowRightKey as h, isEnterKey as i, isHomeKey as j, isEndKey as k };

package/components/resize.decorator.js

@@ -1,11 +1,11 @@
+import { k as debounce, p as rIC } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 import { b as balBrowser } from './browser.js';
-import { k as debounce, p as rIC } from './helpers.js';
 
 class BalResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
-        this.debouncedNotify = debounce((info) => this.notify(info), 10);
+        this.debouncedNotify = debounce((info) => this.notify(info), 42);
     }
     connect(el) {
         var _a;
@@ -32,10 +32,10 @@ class BalResizeListener extends ListenerAbstract {
                         const widthChanged = this.lastWidth !== entry.contentRect.width;
                         const heightChanged = this.lastHeight !== entry.contentRect.height;
                         if (widthChanged || heightChanged) {
-                            rIC(() => this.debouncedNotify({
+                            this.debouncedNotify({
                                 width: widthChanged,
                                 height: heightChanged,
-                            }));
+                            });
                             this.lastWidth = entry.contentRect.width;
                             this.lastHeight = entry.contentRect.height;
                         }
@@ -56,7 +56,7 @@ class BalResizeListener extends ListenerAbstract {
 class BalResizeSubject extends SingleSubject {
     constructor() {
         super((observer, data) => {
-            observer.resizeListener(data);
+            rIC(() => observer.resizeListener(data));
         });
         this.listener = new BalResizeListener();
     }

package/components/swiper.util.js

@@ -114,7 +114,7 @@ const DotControl = ({ value, items, containerId, onControlChange }) => {
         }
         onControlChange(items[selectedValue]);
     };
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) },
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('dots').class()) },
         h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
 };
 
@@ -224,23 +224,6 @@ class SwiperUtil {
         addEventListener(window, 'touchstart', this.pointerDown);
         addEventListener(window, 'mousedown', this.pointerDown);
     }
-    componentDidLoad() {
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    this.notifyChange();
-                }
-            });
-        }, {
-            root: null, // Use the viewport as the container
-            threshold: 0.5, // Trigger when 50% of the element is visible
-        });
-        // Target the element you want to observe
-        const targetElement = this.component.el;
-        if (targetElement) {
-            observer.observe(targetElement);
-        }
-    }
     disconnectedCallback() {
         removeEventListener(window, 'keydown', this.listenToKeyDown);
         removeEventListener(this.component.el, 'focusin', this.updateFocus);

package/components/tokens.esm.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Jan 2025 06:13:22 GMT
+ * Generated on Tue, 14 Jan 2025 09:08:56 GMT
  */
 const balColorGreen3 = "#94e3d4";
 const balColorGreen6 = "#1b5951";

package/components/visibility.decorator.js

@@ -0,0 +1,88 @@
+import { h as deepReady, b as waitAfterFramePaint, k as debounce } from './helpers.js';
+import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
+
+class BalVisibilityListener extends ListenerAbstract {
+    constructor() {
+        super(...arguments);
+        this.waitAfterFramePrint = false;
+        this.intersectionObserver = undefined;
+        this.intersectionCallback = (records) => {
+            const isIntersecting = records.some(record => record.isIntersecting);
+            if (isIntersecting) {
+                this.notify();
+            }
+        };
+    }
+    async connect(el) {
+        super.connect(el);
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        if (this.waitAfterFramePrint) {
+            await deepReady(el);
+            await waitAfterFramePaint();
+        }
+        this.destroyMutationObserver();
+        this.intersectionObserver = new IntersectionObserver(this.intersectionCallback, {
+            root: null, // Use the viewport as the container
+            threshold: 0.5, // Trigger when 50% of the element is visible
+        });
+        this.intersectionObserver.observe(el);
+    }
+    disconnect() {
+        super.disconnect();
+        this.destroyMutationObserver();
+    }
+    destroyMutationObserver() {
+        if (this.intersectionObserver !== undefined) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = undefined;
+        }
+    }
+}
+
+class BalVisibilitySubject extends SingleSubject {
+    constructor() {
+        super(observer => {
+            observer.visibilityListener();
+        });
+        this.debouncedNotify = debounce(() => this.notify(), 50);
+        this.listener = new BalVisibilityListener();
+    }
+    attach(observer) {
+        var _a, _b;
+        super.attach(observer);
+        (_a = this.listener) === null || _a === void 0 ? void 0 : _a.connect(observer.el);
+        (_b = this.listener) === null || _b === void 0 ? void 0 : _b.add(() => this.debouncedNotify());
+    }
+    detach() {
+        var _a;
+        super.detach();
+        (_a = this.listener) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+}
+
+function ListenToVisibility() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, componentDidLoad, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            if (!this._balVisibilitySubject) {
+                this._balVisibilitySubject = new BalVisibilitySubject();
+            }
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.componentDidLoad = function () {
+            this._balVisibilitySubject.attach(this);
+            return componentDidLoad && componentDidLoad.call(this);
+        };
+        target.disconnectedCallback = function () {
+            if (this._balVisibilitySubject) {
+                this._balVisibilitySubject.detach();
+                this._balVisibilitySubject = undefined;
+            }
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}
+
+export { ListenToVisibility as L };