@baloise/ds-core 16.0.3-nightly.20240417 → 16.1.0

package/components/bal-field.js

@@ -28,6 +28,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-input-stepper',
             'bal-input-slider',
             'bal-file-upload',
+            'bal-dropdown',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -46,18 +47,26 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             }
             return this.isDirectChild(parent);
         };
+        this.isVisible = (el) => {
+            if (!el) {
+                return false;
+            }
+            return el.ariaHidden !== 'true';
+        };
         this.findDirectChild = (selectors) => {
             const element = this.el.querySelector(selectors);
             const isDirectChild = this.isDirectChild(element);
             if (isDirectChild) {
-                return element;
+                if (this.isVisible(element)) {
+                    return element;
+                }
             }
             return undefined;
         };
         this.findDirectChildren = (selectors) => {
             return selectors
                 .map(selector => {
-                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild);
+                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild).filter(this.isVisible);
             })
                 .flat();
         };
@@ -106,6 +115,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-field-control bal-input',
             'bal-field-control bal-select',
             'bal-field-control bal-input-date',
+            'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
             'bal-field-control bal-checkbox-group',

package/components/bal-footer.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { o as loadFooterLinks, q as loadSocialMediaLinks, L as Language } from './index.esm.js';
+import { u as loadFooterLinks, v as loadSocialMediaLinks, L as Language } from './index.esm.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { k as rIC } from './helpers.js';

package/components/bal-option-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalOptionList extends Components.BalOptionList, HTMLElement {}
+export const BalOptionList: {
+    prototype: BalOptionList;
+    new (): BalOptionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-option-list.js

@@ -0,0 +1,459 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { l as lodash_isnil } from './index2.js';
+import { i as inheritAttributes } from './attributes.js';
+import { B as BEM } from './bem.js';
+import { b as waitAfterFramePaint, l as raf } from './helpers.js';
+import { L as Logger } from './log.js';
+import { s as startsWith, i as includes } from './utils.js';
+import { d as defaultBalAriaForm } from './form.js';
+
+const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
+const BalOptionListStyle0 = balOptionListCss;
+
+const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inputId = `bal-option-list-${balOptionListIds++}`;
+        this.inheritAttributes = {};
+        this.ariaForm = defaultBalAriaForm;
+        this.multiple = false;
+        this.disabled = false;
+        this.required = false;
+        this.focusIndex = -1;
+        this.labelledby = undefined;
+        this.filter = 'includes';
+        this.contentHeight = 262;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    contentHeightChanged(value) {
+        if (value === undefined) {
+            this.el.style.removeProperty('--bal-option-list-max-height');
+        }
+        else {
+            this.el.style.setProperty('--bal-option-list-max-height', `${value}px`);
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        this.contentHeightChanged(this.contentHeight);
+    }
+    componentWillRender() {
+        this.inheritAttributes = inheritAttributes(this.el, ['aria-multiselectable', 'aria-labelledby']);
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter(ev) {
+        const options = this.options;
+        const indexToFocus = this.getOptionIndex(options, ev.detail.value);
+        if (indexToFocus !== undefined) {
+            this.updateFocus(options, indexToFocus);
+        }
+    }
+    listenToOptionChange({ detail }) {
+        if (!this.multiple) {
+            this.options.filter(option => option.value !== detail.value).forEach(option => (option.selected = false));
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Focus the first visible option in the list
+     * @returns focusIndex
+     */
+    async focusFirst() {
+        const options = this.options;
+        const indexToFocus = this.getFirstOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollTopPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the last visible option in the list
+     * @returns focusIndex
+     */
+    async focusLast() {
+        const options = this.options;
+        const indexToFocus = this.getLastOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollBottomPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the next visible option in the list
+     * @returns focusIndex
+     */
+    async focusNext() {
+        const options = this.options;
+        const indexToFocus = this.getNextOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollBottomPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the previous visible option in the list
+     * @returns focusIndex
+     */
+    async focusPrevious() {
+        const options = this.options;
+        const indexToFocus = this.getPreviousOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollTopPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the option with the label that starts with the search property
+     * @returns focusIndex
+     */
+    async focusByLabel(search, config) {
+        const options = this.options;
+        const indexToFocus = this.getOptionIndexByLabel(options, search);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollTopPosition(option);
+        await waitAfterFramePaint();
+        if (config.select) {
+            await option.select();
+        }
+        return indexToFocus;
+    }
+    /**
+     * Filter the options by the given filter property and hides options
+     * @returns focusIndex
+     */
+    async filterByContent(search) {
+        const options = this.allOptions;
+        this.filterOptions(options, search);
+        await waitAfterFramePaint();
+        return this.focusFirst();
+    }
+    /**
+     * Shows or hides all options
+     */
+    async resetHidden(hidden = false) {
+        this.options.forEach(option => (option.hidden = hidden));
+        await waitAfterFramePaint();
+        this.resetFocus();
+    }
+    /**
+     * Selects or deselects all options
+     */
+    async resetSelected(selected = false) {
+        this.options.forEach(option => (option.selected = selected));
+        await waitAfterFramePaint();
+    }
+    /**
+     * Updates options
+     */
+    async updateSelected(values) {
+        this.options.forEach(option => (option.selected = values.includes(option.value)));
+        await waitAfterFramePaint();
+    }
+    /**
+     * Resets the focus index to pristine and scrolls to the top of the list
+     */
+    async resetFocus() {
+        const options = this.options;
+        const indexToFocus = -1;
+        this.updateFocus(options, indexToFocus);
+        this.scrollTo(0);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Returns a list of option values
+     */
+    async getSelectedValues() {
+        const options = this.options;
+        return options.filter(option => option.selected).map(option => option.value);
+    }
+    /**
+     * Returns a list of option labels
+     */
+    async getSelectedOptions(values) {
+        const options = this.options;
+        if (values && values.length > 0) {
+            return options.filter(option => values.includes(option.value)).map(option => option);
+        }
+        return options.filter(option => option.selected).map(option => option);
+    }
+    /**
+     * Returns a list of options
+     */
+    async getValues() {
+        return this.options.map(option => option.value);
+    }
+    /**
+     * Returns a list of options
+     */
+    async getLabels() {
+        return this.options.map(option => option.label);
+    }
+    /**
+     * Returns a list of accessible options
+     */
+    async getOptions() {
+        return this.options.filter(o => !o.disabled || !o.hidden);
+    }
+    /**
+     * Selects the option with the current focus
+     */
+    async selectByFocus() {
+        const options = this.options;
+        const option = options[this.focusIndex];
+        if (option) {
+            if (this.multiple) {
+                option.select(!option.selected);
+            }
+            else {
+                option.select(true);
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get options() {
+        return Array.from(this.el.querySelectorAll('bal-option')).filter(o => !o.hidden);
+    }
+    get allOptions() {
+        return Array.from(this.el.querySelectorAll('bal-option'));
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    filterOptions(options, search) {
+        const filteredOptions = [];
+        const filter = this.filter === 'includes' ? includes : startsWith;
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            const content = option.textContent || '';
+            if (filter(content, search)) {
+                filteredOptions.push(option);
+                option.hidden = false;
+            }
+            else {
+                option.hidden = true;
+            }
+        }
+        return filteredOptions;
+    }
+    isOptionVisible(option) {
+        const visibleHeight = this.el.clientHeight;
+        const topPosition = this.el.scrollTop;
+        const bottomPosition = topPosition + visibleHeight;
+        const isVisible = topPosition <= option.offsetTop && option.offsetTop + option.clientHeight <= bottomPosition;
+        return isVisible;
+    }
+    updateScrollTopPosition(option) {
+        if (option) {
+            const isVisible = this.isOptionVisible(option);
+            if (!isVisible) {
+                this.scrollTo(this.getScrollTopForTopPosition(option));
+            }
+        }
+    }
+    updateScrollBottomPosition(option) {
+        if (option) {
+            const isVisible = this.isOptionVisible(option);
+            if (!isVisible) {
+                this.scrollTo(this.getScrollTopForBottomPosition(option));
+            }
+        }
+    }
+    getScrollTopForTopPosition(option) {
+        const topPosition = option.offsetTop;
+        const scrollTop = topPosition;
+        if (scrollTop < 0) {
+            return 0;
+        }
+        return scrollTop;
+    }
+    getScrollTopForBottomPosition(option) {
+        const visibleHeight = this.el.clientHeight;
+        const bottomPosition = option.offsetTop + option.clientHeight;
+        const scrollTop = bottomPosition - visibleHeight;
+        if (scrollTop < 0) {
+            return 0;
+        }
+        return scrollTop;
+    }
+    async scrollTo(scrollTop) {
+        if (scrollTop !== undefined && scrollTop !== null) {
+            if (this.focusRaf !== undefined) {
+                cancelAnimationFrame(this.focusRaf);
+            }
+            this.focusRaf = raf(async () => {
+                this.el.scrollTop = scrollTop;
+            });
+        }
+    }
+    updateFocus(options, indexToFocus) {
+        this.focusIndex = indexToFocus;
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            option.focused = index === indexToFocus;
+        }
+    }
+    getOptionIndex(options, value) {
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (option.value === value) {
+                return index;
+            }
+        }
+        return undefined;
+    }
+    getFirstOptionIndex(options) {
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (!option.disabled) {
+                return index;
+            }
+        }
+        return this.focusIndex;
+    }
+    getNextOptionIndex(options, index = this.focusIndex) {
+        if (index < 0) {
+            return this.getFirstOptionIndex(options);
+        }
+        const lastIndex = this.getLength(options);
+        let newIndex = index;
+        if (index < lastIndex) {
+            newIndex = index + 1;
+            if (options[newIndex].disabled) {
+                return this.getNextOptionIndex(options, newIndex);
+            }
+        }
+        return newIndex;
+    }
+    getPreviousOptionIndex(options, index = this.focusIndex) {
+        const firstIndex = this.getFirstOptionIndex(options);
+        if (index <= firstIndex) {
+            return firstIndex;
+        }
+        let newIndex = index;
+        newIndex = index - 1;
+        if (options[newIndex].disabled) {
+            return this.getPreviousOptionIndex(options, newIndex);
+        }
+        return newIndex;
+    }
+    getLastOptionIndex(options) {
+        for (let index = options.length - 1; index >= 0; index--) {
+            const option = options[index];
+            if (!option.disabled) {
+                return index;
+            }
+        }
+        return this.focusIndex;
+    }
+    getOptionIndexByLabel(options, label) {
+        if (label === undefined || label === '') {
+            return this.focusIndex;
+        }
+        const option = options.find(o => startsWith(o.label || '', label));
+        if (!lodash_isnil(option) && option.id) {
+            return options.indexOf(option);
+        }
+        return this.focusIndex;
+    }
+    getLength(options) {
+        const indexes = options.map((option, index) => (option.disabled ? 0 : index));
+        const length = Math.max(...indexes);
+        return length;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option-list');
+        const labelledby = this.labelledby || this.ariaForm.labelId;
+        return (h(Host, { class: Object.assign({}, block.class()), id: this.inputId, tabIndex: -1 }, h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", null))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "contentHeight": ["contentHeightChanged"]
+    }; }
+    static get style() { return BalOptionListStyle0; }
+}, [4, "bal-option-list", {
+        "multiple": [4],
+        "disabled": [4],
+        "required": [4],
+        "focusIndex": [1026, "focus-index"],
+        "labelledby": [1],
+        "filter": [1],
+        "contentHeight": [2, "content-height"],
+        "ariaForm": [32],
+        "focusFirst": [64],
+        "focusLast": [64],
+        "focusNext": [64],
+        "focusPrevious": [64],
+        "focusByLabel": [64],
+        "filterByContent": [64],
+        "resetHidden": [64],
+        "resetSelected": [64],
+        "updateSelected": [64],
+        "resetFocus": [64],
+        "getSelectedValues": [64],
+        "getSelectedOptions": [64],
+        "getValues": [64],
+        "getLabels": [64],
+        "getOptions": [64],
+        "selectByFocus": [64],
+        "setAriaForm": [64]
+    }, [[1, "balOptionFocus", "listenToMouseEnter"], [0, "balOptionChange", "listenToOptionChange"]], {
+        "contentHeight": ["contentHeightChanged"]
+    }]);
+__decorate([
+    Logger('bal-option-list'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], OptionList.prototype, "createLogger", null);
+let balOptionListIds = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-option-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-option-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, OptionList);
+            }
+            break;
+    } });
+}
+
+const BalOptionList = OptionList;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalOptionList, defineCustomElement };

package/components/{bal-doc-app.d.ts → bal-option.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../dist/types/components";
 
-interface BalDocApp extends Components.BalDocApp, HTMLElement {}
-export const BalDocApp: {
-    prototype: BalDocApp;
-    new (): BalDocApp;
+interface BalOption extends Components.BalOption, HTMLElement {}
+export const BalOption: {
+    prototype: BalOption;
+    new (): BalOption;
 };
 /**
  * Used to define this component and all nested components recursively.