@baloise/ds-core 0.0.5-nightly.20240301

package/components/focus-visible.js

@@ -0,0 +1,72 @@
+const BAL_FOCUSED = 'bal-focused';
+const BAL_FOCUSABLE = 'bal-focusable';
+const FOCUS_KEYS = [
+    'Tab',
+    'ArrowDown',
+    'Space',
+    'Escape',
+    ' ',
+    'Shift',
+    'Enter',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'Home',
+    'End',
+];
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .bal-focusable:not([tabindex^="-"])';
+const startFocusVisible = (rootEl) => {
+    let currentFocus = [];
+    let keyboardMode = true;
+    const ref = rootEl ? rootEl.shadowRoot : document;
+    const root = rootEl ? rootEl : document.body;
+    const setFocus = (elements) => {
+        currentFocus.forEach(el => el.classList.remove(BAL_FOCUSED));
+        elements.forEach(el => el.classList.add(BAL_FOCUSED));
+        currentFocus = elements;
+    };
+    const pointerDown = () => {
+        keyboardMode = false;
+        setFocus([]);
+    };
+    const onKeydown = (ev) => {
+        keyboardMode = FOCUS_KEYS.includes(ev.key);
+        if (!keyboardMode) {
+            setFocus([]);
+        }
+    };
+    const onFocusin = (ev) => {
+        if (keyboardMode && ev.composedPath !== undefined) {
+            const toFocus = ev.composedPath().filter((el) => {
+                if (el.classList) {
+                    return el.classList.contains(BAL_FOCUSABLE);
+                }
+                return false;
+            });
+            setFocus(toFocus);
+        }
+    };
+    const onFocusout = () => {
+        if (ref.activeElement === root) {
+            setFocus([]);
+        }
+    };
+    ref.addEventListener('keydown', onKeydown);
+    ref.addEventListener('focusin', onFocusin);
+    ref.addEventListener('focusout', onFocusout);
+    ref.addEventListener('touchstart', pointerDown);
+    ref.addEventListener('mousedown', pointerDown);
+    const destroy = () => {
+        ref.removeEventListener('keydown', onKeydown);
+        ref.removeEventListener('focusin', onFocusin);
+        ref.removeEventListener('focusout', onFocusout);
+        ref.removeEventListener('touchstart', pointerDown);
+        ref.removeEventListener('mousedown', pointerDown);
+    };
+    return {
+        destroy,
+        setFocus,
+    };
+};
+
+export { FOCUS_KEYS as F, focusableQueryString as f, startFocusVisible as s };

package/components/focus.decorator.js

@@ -0,0 +1,86 @@
+import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
+import { b as balBrowser } from './browser.js';
+import { d as waitAfterIdleCallback, i as isDescendant, j as addEventListener, r as removeEventListener } from './helpers.js';
+
+class BalFocusListener extends ListenerAbstract {
+    constructor() {
+        super(...arguments);
+        this.onFocusin = (ev) => {
+            this.notify({ ev, isFocusIn: true, isFocusOut: false });
+        };
+        this.onFocusout = async (ev) => {
+            await waitAfterIdleCallback();
+            if (balBrowser.hasDocument && this.el) {
+                const target = document.activeElement;
+                if (target && !isDescendant(this.el, target)) {
+                    this.notify({ ev, isFocusIn: false, isFocusOut: true });
+                }
+            }
+        };
+    }
+    connect(el) {
+        super.connect(el);
+        if (this.el) {
+            addEventListener(this.el, 'focusin', this.onFocusin);
+            addEventListener(this.el, 'focusout', this.onFocusout);
+        }
+    }
+    disconnect() {
+        super.disconnect();
+        if (this.el) {
+            removeEventListener(this.el, 'focusin', this.onFocusin);
+            removeEventListener(this.el, 'focusout', this.onFocusout);
+        }
+    }
+}
+
+class BalFocusSubject extends SingleSubject {
+    constructor() {
+        super((observer, data) => {
+            if (data) {
+                if (data.isFocusIn) {
+                    if (observer.hasFocus === false) {
+                        observer.focusInListener(data.ev);
+                    }
+                    observer.hasFocus = true;
+                }
+                if (data.isFocusOut) {
+                    observer.focusOutListener(data.ev);
+                    observer.hasFocus = false;
+                }
+            }
+        });
+        this.listener = new BalFocusListener();
+    }
+    attach(observer) {
+        super.attach(observer);
+        this.listener.connect(observer.el);
+        this.listener.add(info => super.notify(info));
+    }
+    detach() {
+        super.detach();
+        this.listener.disconnect();
+    }
+}
+
+function ListenToFocus() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            if (!this._balFocusSubject) {
+                this._balFocusSubject = new BalFocusSubject();
+                this._balFocusSubject.attach(this);
+            }
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.disconnectedCallback = function () {
+            if (this._balFocusSubject) {
+                this._balFocusSubject.detach();
+                this._balFocusSubject = undefined;
+            }
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}
+
+export { ListenToFocus as L };

package/components/form-input.js

@@ -0,0 +1,77 @@
+import { d as waitAfterIdleCallback } from './helpers.js';
+
+const stopEventBubbling = (ev) => {
+    if (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+};
+const getInputTarget = (ev) => {
+    return ev.target;
+};
+const getNativeInputValue = (component) => {
+    var _a;
+    return ((_a = component.nativeInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+};
+const getUpcomingValue = (component, ev) => {
+    var _a, _b;
+    const value = ((_a = component.nativeInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+    const idx = (_b = ev.target) === null || _b === void 0 ? void 0 : _b.selectionStart;
+    return value.slice(0, idx) + ev.key + value.slice(idx + Math.abs(0));
+};
+const inputSetBlur = (component) => {
+    if (component.nativeInput) {
+        component.nativeInput.blur();
+    }
+};
+const inputListenOnClick = (component, ev) => {
+    if ((component.disabled || component.readonly) && ev.target && ev.target === component.el) {
+        stopEventBubbling(ev);
+    }
+};
+const inputSetFocus = async (component) => {
+    var _a;
+    await waitAfterIdleCallback();
+    (_a = component === null || component === void 0 ? void 0 : component.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+};
+const inputHandleHostClick = (component, ev) => {
+    if (component.disabled || component.readonly) {
+        stopEventBubbling(ev);
+    }
+};
+const inputHandleClick = (component, ev) => {
+    if (!component.disabled && !component.readonly && component.balClick) {
+        component.balClick.emit(ev);
+    }
+};
+const inputHandleFocus = (component, ev) => {
+    component.focused = true;
+    component.inputValue = component.value;
+    if (!component.disabled && component.balFocus) {
+        component.balFocus.emit(ev);
+    }
+};
+const inputHandleReset = (component, defaultValue = undefined, timer) => {
+    component.value = defaultValue;
+    component.inputValue = component.value;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+        if (component.nativeInput) {
+            component.nativeInput.value = component.value;
+        }
+    });
+};
+const inputHandleBlur = (component, ev) => {
+    component.focused = false;
+    if (!component.disabled && component.balBlur) {
+        component.balBlur.emit(ev);
+    }
+};
+const inputHandleChange = (component) => {
+    if (component.value !== component.inputValue) {
+        component.value = component.inputValue;
+        component.balChange.emit(component.value);
+    }
+};
+
+export { inputSetBlur as a, inputHandleFocus as b, inputHandleHostClick as c, inputListenOnClick as d, inputHandleBlur as e, inputHandleChange as f, getInputTarget as g, inputHandleClick as h, inputSetFocus as i, inputHandleReset as j, getNativeInputValue as k, getUpcomingValue as l, stopEventBubbling as s };

package/components/form.js

@@ -0,0 +1,21 @@
+const scrollToFirstInvalidField = (options) => {
+    const selector = options.selector || '.bal-field--invalid';
+    const invalidFieldNodes = options.formEl.querySelectorAll(selector);
+    const invalidFields = Array.from(invalidFieldNodes);
+    if (invalidFields.length > 0) {
+        const firstInvalidField = invalidFields[0];
+        if (firstInvalidField) {
+            const invalidField = firstInvalidField.closest('bal-field');
+            if (invalidField && invalidField.scrollIntoView) {
+                invalidField.scrollIntoView();
+            }
+        }
+    }
+};
+const defaultBalAriaForm = {
+    controlId: undefined,
+    labelId: undefined,
+    messageId: undefined,
+};
+
+export { defaultBalAriaForm as d, scrollToFirstInvalidField as s };

package/components/helpers.js

@@ -0,0 +1,245 @@
+import { b as balBrowser } from './browser.js';
+import { h as balIconClose, i as balIconInfoCircle, j as balIconPlus, k as balIconMinus, l as balIconEdit, m as balIconTrash, n as balIconNavGoLeft, p as balIconNavGoRight, q as balIconNavGoDown, r as balIconNavGoUp, s as balIconCaretUp, t as balIconCaretDown, v as balIconCaretLeft, w as balIconCaretRight, x as balIconCheck, y as balIconDate, z as balIconDocument, A as balIconUpload, B as balIconMenuBars, g as useBalConfig } from './config.utils.js';
+
+const rIC = (callback, timeout = 5000) => {
+    if (balBrowser.hasWindow && 'requestIdleCallback' in window) {
+        window.requestIdleCallback(callback, { timeout });
+    }
+    else {
+        setTimeout(callback, 32);
+    }
+};
+const wait = (ms = 0) => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(), ms);
+    });
+};
+const debounceEvent = (ev, wait) => {
+    const original = ev._original || ev;
+    return {
+        _original: ev,
+        emit: debounce(original.emit.bind(original), wait),
+    };
+};
+const debounce = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
+const hasTagName = (element, tag) => {
+    return element && element.tagName && element.tagName === tag.toUpperCase();
+};
+const isDescendant = (parent, child) => {
+    let node = child.parentNode;
+    while (node != null) {
+        if (node == parent) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};
+const hasParent = (parentTag, child) => {
+    let node = child.parentNode;
+    while (node != null) {
+        if (node.tagName === parentTag.toUpperCase()) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};
+const getAppRoot = (doc) => {
+    return doc.querySelector('bal-app') || doc.body;
+};
+/**
+ * Waits for a component to be ready for
+ * both custom element and non-custom element builds.
+ * If non-custom element build, el.componentOnReady
+ * will be used.
+ * For custom element builds, we wait a frame
+ * so that the inner contents of the component
+ * have a chance to render.
+ *
+ * Use this utility rather than calling
+ * el.componentOnReady yourself.
+ */
+const componentOnReady = (el, callback) => {
+    if (el.componentOnReady !== null && el.componentOnReady !== undefined) {
+        el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
+    }
+    else {
+        raf(() => callback(el));
+    }
+};
+/**
+ * Patched version of requestAnimationFrame that avoids ngzone
+ * Use only when you know ngzone should not run
+ */
+const raf = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
+const transitionEndAsync = (el, expectedDuration = 0) => {
+    return new Promise(resolve => {
+        transitionEnd(el, expectedDuration, resolve);
+    });
+};
+/**
+ * Allows developer to wait for a transition
+ * to finish and fallback to a timer if the
+ * transition is cancelled or otherwise
+ * never finishes. Also see transitionEndAsync
+ * which is an await-able version of this.
+ */
+const transitionEnd = (el, expectedDuration = 0, callback) => {
+    let unRegTrans;
+    let animationTimeout;
+    const opts = { passive: true };
+    const ANIMATION_FALLBACK_TIMEOUT = 500;
+    const unregister = () => {
+        if (unRegTrans) {
+            unRegTrans();
+        }
+    };
+    const onTransitionEnd = (ev) => {
+        if (ev === undefined || el === ev.target) {
+            unregister();
+            callback(ev);
+        }
+    };
+    if (el) {
+        el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+        el.addEventListener('transitionend', onTransitionEnd, opts);
+        animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
+        unRegTrans = () => {
+            if (animationTimeout) {
+                clearTimeout(animationTimeout);
+                animationTimeout = undefined;
+            }
+            el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+            el.removeEventListener('transitionend', onTransitionEnd, opts);
+        };
+    }
+    return unregister;
+};
+const addEventListener = (el, eventName, callback, opts) => {
+    if (balBrowser.hasWindow) {
+        const config = useBalConfig();
+        if (config) {
+            const ael = config._ael;
+            if (ael) {
+                return ael(el, eventName, callback, opts);
+            }
+            else if (config._ael) {
+                return config._ael(el, eventName, callback, opts);
+            }
+        }
+    }
+    return el.addEventListener(eventName, callback, opts);
+};
+const removeEventListener = (el, eventName, callback, opts) => {
+    if (balBrowser.hasWindow) {
+        const config = useBalConfig();
+        if (config) {
+            const rel = config._rel;
+            if (rel) {
+                return rel(el, eventName, callback, opts);
+            }
+            else if (config._rel) {
+                return config._rel(el, eventName, callback, opts);
+            }
+        }
+    }
+    return el.removeEventListener(eventName, callback, opts);
+};
+const shallowReady = (el) => {
+    if (el) {
+        return new Promise(resolve => componentOnReady(el, resolve));
+    }
+    return Promise.resolve();
+};
+const deepReady = async (el, full = false) => {
+    const element = el;
+    if (element) {
+        if (element.componentOnReady !== null && element.componentOnReady !== undefined) {
+            const stencilEl = await element.componentOnReady();
+            if (!full && stencilEl !== null && stencilEl !== undefined) {
+                return;
+            }
+        }
+        await Promise.all(Array.from(element.children).map(child => deepReady(child, full)));
+    }
+};
+const waitForComponent = async (el) => {
+    await deepReady(el, true);
+    await waitAfterFramePaint();
+    await waitAfterIdleCallback();
+};
+const isChildOfEventTarget = async (ev, el, callback) => {
+    if (ev && ev.target && el && el !== ev.target && isDescendant(ev.target, el)) {
+        callback();
+    }
+};
+const waitForDesignSystem = async (el, _config) => {
+    const config = Object.assign({ animated: false, icons: {
+            balIconClose,
+            balIconInfoCircle,
+            balIconPlus,
+            balIconMinus,
+            balIconEdit,
+            balIconTrash,
+            balIconNavGoLeft,
+            balIconNavGoRight,
+            balIconNavGoDown,
+            balIconNavGoUp,
+            balIconCaretUp,
+            balIconCaretDown,
+            balIconCaretLeft,
+            balIconCaretRight,
+            balIconCheck,
+            balIconDate,
+            balIconDocument,
+            balIconUpload,
+            balIconMenuBars,
+        } }, _config);
+    const element = el;
+    if (element !== null && element !== undefined) {
+        await deepReady(element, true);
+        const webComponents = Array.prototype.slice
+            .call(element.querySelectorAll('*'))
+            .filter(el => el.tagName.match(/^bal/i));
+        await Promise.all(webComponents.map(c => {
+            if (c.configChanged !== null && c.configChanged !== undefined) {
+                return c.configChanged(config);
+            }
+        }));
+    }
+    await waitAfterFramePaint();
+    await waitAfterIdleCallback();
+};
+const waitAfterFramePaint = () => {
+    return new Promise(resolve => raf(() => runHighPrioritizedTask(resolve)));
+};
+const waitAfterIdleCallback = () => {
+    return new Promise(resolve => rIC(() => runHighPrioritizedTask(resolve)));
+};
+const runHighPrioritizedTask = (callback) => {
+    if (balBrowser.hasWindow && 'MessageChannel' in window) {
+        const messageChannel = new window.MessageChannel();
+        messageChannel.port1.onmessage = callback;
+        messageChannel.port2.postMessage(undefined);
+    }
+    else {
+        setTimeout(callback, 32);
+    }
+};
+
+export { waitForDesignSystem as a, waitAfterFramePaint as b, componentOnReady as c, waitAfterIdleCallback as d, deepReady as e, wait as f, getAppRoot as g, debounce as h, isDescendant as i, addEventListener as j, rIC as k, raf as l, debounceEvent as m, hasTagName as n, hasParent as o, isChildOfEventTarget as p, removeEventListener as r, shallowReady as s, transitionEndAsync as t, waitForComponent as w };

package/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../dist/types/interfaces'