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

package/components/initialize.js

@@ -0,0 +1,303 @@
+import { setPlatformHelpers } from '@stencil/core/internal/client';
+import { b as balBrowser } from './browser.js';
+import { d as defaultConfig } from './config.default.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;
+};
+
+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.2-nightly.20250109';
+
+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;
+};
+
+export { BalToastController as B, BalSnackbarController as a, balToastController as b, balSnackbarController as c, initializeBaloiseDesignSystem as i, setupConfig as s };

package/components/keyboard.helpers.js

@@ -1,3 +1,9 @@
+/**
+ * Returns `true` if the keyboard event was triggered by the `Enter` key
+ */
+function isTabKey(event) {
+    return event.key === 'Tab';
+}
 /**
  * Returns `true` if the keyboard event was triggered by the `Enter` key
  */
@@ -59,4 +65,4 @@ function isEndKey(event) {
     return event.key === 'End';
 }
 
-export { isSpaceKey as a, isArrowDownKey as b, isArrowUpKey as c, isEscapeKey as d, isBackspaceKey as e, isArrowLeftKey as f, isArrowRightKey as g, isHomeKey as h, isEnterKey as i, isEndKey as j };
+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 };

package/components/mutation.decorator.js

@@ -1,4 +1,4 @@
-import { f as deepReady, b as waitAfterFramePaint, j as debounce } from './helpers.js';
+import { h as deepReady, b as waitAfterFramePaint, k as debounce } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 
 class BalMutationListener extends ListenerAbstract {
@@ -14,21 +14,24 @@ 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/components/overlays.js

@@ -1,5 +1,5 @@
 import { b as balBrowser } from './browser.js';
-import { k as addEventListener, r as removeEventListener } from './helpers.js';
+import { l as addEventListener, r as removeEventListener } from './helpers.js';
 
 let lastId = 0;
 const BACKDROP = 'backdrop';

package/components/resize.decorator.js

@@ -1,11 +1,11 @@
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 import { b as balBrowser } from './browser.js';
-import { j as debounce } from './helpers.js';
+import { k as debounce, p as rIC } from './helpers.js';
 
 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;
@@ -23,7 +23,23 @@ 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;
+                        }
+                    }
                 });
             }
         });
@@ -39,8 +55,8 @@ class BalResizeListener extends ListenerAbstract {
 
 class BalResizeSubject extends SingleSubject {
     constructor() {
-        super((observer, _data) => {
-            observer.resizeListener({});
+        super((observer, data) => {
+            observer.resizeListener(data);
         });
         this.listener = new BalResizeListener();
     }

package/components/string.js

@@ -0,0 +1,12 @@
+const toKebabCase = (string) => {
+    if (typeof string === 'string') {
+        return string
+            .replace(/([a-z])([0-9])/g, '$1-$2')
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/[\s_]+/g, '-')
+            .toLowerCase();
+    }
+    return '';
+};
+
+export { toKebabCase as t };

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 rLCP } from './helpers.js';
+import { m as rOnLoad } from './helpers.js';
 
 class BalSwipeListener extends ListenerAbstract {
     async connect(el) {
@@ -19,7 +19,7 @@ class BalSwipeListener extends ListenerAbstract {
     }
     async loadLib() {
         return new Promise((resolve, reject) => {
-            rLCP(async () => {
+            rOnLoad(async () => {
                 import(/* @vite-ignore */ './contact.js')
                     .then(module => {
                     this.PointerListenerLib = module.PointerListener;