@baloise/ds-core 19.8.3 → 19.8.4

package/components/bal-option-list.js

@@ -1,505 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as isNil } from './index2.js';
-import { a as ariaBooleanToString } from './aria.js';
-import { i as inheritAttributes } from './attributes.js';
-import { B as BEM } from './bem.js';
-import { d as defaultBalAriaForm } from './form.js';
-import { b as waitAfterFramePaint, r as raf } from './helpers.js';
-import { L as Logger } from './log.js';
-import { i as includes, s as startsWith } from './utils.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 OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.inputId = `bal-option-list-${balOptionListIds++}`;
-        this.inheritAttributes = {};
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true` the list supports multiple selections
-         */
-        this.multiple = false;
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = false;
-        /**
-         * Defines the focused option with his index value
-         */
-        this.focusIndex = -1;
-        /**
-         * Defines the filter logic of the list
-         */
-        this.filter = 'includes';
-        /**
-         * Defines the max height of the list element
-         */
-        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 selected visible option in the list, if no option is selected it selects the first one
-     */
-    async focusSelected() {
-        const options = this.options;
-        const indexToFocus = this.getSelectedOptionIndex(options);
-        if (indexToFocus > 0) {
-            this.updateFocus(options, indexToFocus);
-            await waitAfterFramePaint();
-            return indexToFocus;
-        }
-        else {
-            return await this.focusFirst();
-        }
-    }
-    /**
-     * 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;
-    }
-    getSelectedOptionIndex(options) {
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            if (option.selected && !option.hidden) {
-                return index;
-            }
-        }
-        return this.focusIndex;
-    }
-    getFirstOptionIndex(options) {
-        for (let index = 0; index < options.length; index++) {
-            const option = options[index];
-            if (!option.disabled && !option.hidden) {
-                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 (!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, { key: '5b3158027e628a55ea8555e5eb6593cc9d81c7e2', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '679ffd4a00889cc9f7a2f886695f547a0c5f9fd7', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '514c3009d4e75d62e69ffb60f832bbf70644a19d' }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "contentHeight": ["contentHeightChanged"]
-    }; }
-    static get style() { return balOptionListCss; }
-}, [260, "bal-option-list", {
-        "multiple": [4],
-        "disabled": [4],
-        "required": [4],
-        "focusIndex": [1026, "focus-index"],
-        "labelledby": [1],
-        "filter": [1],
-        "contentHeight": [2, "content-height"],
-        "ariaForm": [32],
-        "focusSelected": [64],
-        "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;
-    } });
-}
+import { O as OptionList, d as defineCustomElement$1 } from './bal-option-list2.js';
 
 const BalOptionList = OptionList;
 const defineCustomElement = defineCustomElement$1;