@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/components/dso-autosuggest.js

@@ -1,585 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, transformTag } from '@stencil/core/internal/client';
-import { d as debounce } from './index2.js';
-import { i as i18n } from './i18n.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './progress-indicator.js';
-import { d as defineCustomElement$2 } from './scrollable.js';
-import { v as v4 } from './v4.js';
-
-function escapeStringRegexp(string) {
-	if (typeof string !== 'string') {
-		throw new TypeError('Expected a string');
-	}
-
-	// Escape characters with special meaning either inside or outside character sets.
-	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
-	return string
-		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
-		.replace(/-/g, '\\x2d');
-}
-
-const translations = {
-    en: {
-        "dso-autosuggest": {
-            notFound: "{{inputValue}} was not found.",
-        },
-    },
-    nl: {
-        "dso-autosuggest": {
-            notFound: "{{inputValue}} is niet gevonden.",
-        },
-    },
-};
-
-const autosuggestCss = () => `.sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--_dso-autosuggest-max-block-size);min-block-size:50px;overflow-y:auto;position:absolute;z-index:200}.listbox.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}.listbox.sc-dso-autosuggest{padding-block:8px;padding-inline:0}.listbox.sc-dso-autosuggest .group.sc-dso-autosuggest:not(:first-child) .group-label.sc-dso-autosuggest{border-block-start:1px solid #b2b2b2;padding-block-start:12px}.listbox.sc-dso-autosuggest .group-label.sc-dso-autosuggest{color:#275937;font-weight:700;padding-block:4px;margin-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active{background-color:#275937}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .type.sc-dso-autosuggest,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .extra.sc-dso-autosuggest{color:#fff}.option[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#d7e7ce}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}`;
-
-const maxSuggestionsViewable = 10;
-const listboxPaddingBlock = 8;
-const listboxBorderWidth = 1;
-const Option = ({ id, mouseEnter, mouseLeave, click, selected, suggestion, ref, markedSuggestion }) => (h("div", { class: "option", role: "option", id: id, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onClick: click, "aria-selected": selected, "aria-label": suggestion.value, ref: ref }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, markedSuggestion.value), markedSuggestion.type ? h("span", { class: "type" }, markedSuggestion.type) : undefined), markedSuggestion.extras &&
-    markedSuggestion.extras.map((markedChunk) => (h("div", { class: "suggestion-row" }, markedChunk.map((extra) => (h("span", { class: "extra" }, extra))))))));
-function isGrouped(suggestions) {
-    return (!!suggestions &&
-        suggestions.length > 0 &&
-        suggestions.every((suggestion) => suggestion !== undefined &&
-            "groupLabel" in suggestion &&
-            suggestion.groupLabel !== undefined &&
-            "suggestions" in suggestion &&
-            suggestion.suggestions.length > 0));
-}
-function isFlat(suggestions) {
-    return (!!suggestions &&
-        suggestions.length > 0 &&
-        suggestions.every((suggestion) => suggestion !== undefined && "value" in suggestion && suggestion.value !== undefined));
-}
-const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsoSelect = createEvent(this, "dsoSelect", 7);
-        this.dsoChange = createEvent(this, "dsoChange", 7);
-        this.dsoSearch = createEvent(this, "dsoSearch", 7);
-        /**
-         * The suggestions for the value of the slotted input element.
-         *
-         * This can be an array of type Suggestion or an Array of type SuggestionGroup.
-         *
-         * A suggestionGroup must have a `groupLabel` and `suggestions`.
-         *
-         * A suggestion must have a `value` and can have a `type`, an `item` or `extras`.
-         *
-         * The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to
-         * create the suggestion. `extras` is an array of additional strings to further specify the suggestion.
-         *
-         * The value should be null when no suggestions have been fetched.
-         */
-        this.suggestions = null;
-        /**
-         * Shows progress indicator when fetching results.
-         */
-        this.loading = false;
-        /**
-         * To override progress indicator's default loading label.
-         */
-        this.loadingLabel = "Een moment geduld.";
-        this.showSuggestions = false;
-        this.notFound = false;
-        this.showLoading = false;
-        // ListboxItems are used for the calculation of the listboxContainerMaxBlockSize
-        this.listboxItems = [];
-        this.listboxId = v4();
-        this.inputId = v4();
-        this.labelId = v4();
-        this.resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));
-        this.debouncedEmitValue = debounce((value) => {
-            this.dsoChange.emit(value);
-            this.debouncedShowLoading();
-        }, 200);
-        this.debouncedShowLoading = debounce(() => {
-            if (this.inputValue) {
-                this.showLoading = true;
-            }
-        }, this.loadingDelayed);
-        this.inputValue = "";
-        this.onInput = (event) => {
-            if (!(event.target instanceof HTMLInputElement)) {
-                return;
-                // throw new Error("event.target is not instanceof HTMLInputElement"); #2293
-            }
-            this.showLoading = !this.loadingDelayed;
-            this.inputValue = event.target.value;
-            this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : "");
-        };
-        this.onFocusIn = () => {
-            if (this.suggestions && this.suggestions.length > 1) {
-                this.openSuggestions();
-            }
-        };
-        this.text = i18n(() => this.host, translations);
-        this.onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);
-        this.onScrollend = () => this.setListboxContainerMaxBlockSize();
-        this.onKeyDown = (event) => {
-            if (event.defaultPrevented || this.loading) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowDown":
-                    if (!this.showSuggestions) {
-                        this.openSuggestions("first");
-                    }
-                    else {
-                        this.selectNextSuggestion();
-                    }
-                    break;
-                case "ArrowUp":
-                    if (!this.showSuggestions) {
-                        this.openSuggestions("last");
-                    }
-                    else {
-                        this.selectPreviousSuggestion();
-                    }
-                    break;
-                case "Tab":
-                    this.closeSuggestions();
-                    return;
-                case "Escape":
-                    this.closeSuggestions();
-                    break;
-                case "Enter":
-                    this.pickSelectedValue();
-                    break;
-                default:
-                    return;
-            }
-            event.preventDefault();
-        };
-    }
-    suggestionsWatcher() {
-        this.resetSelectedSuggestion();
-        if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
-            this.openSuggestions();
-        }
-        else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
-            this.closeSuggestions();
-        }
-    }
-    onDocumentClick(event) {
-        if ((this.showSuggestions || this.notFound) &&
-            this.listbox &&
-            event.target instanceof Node &&
-            !this.listbox.contains(event.target) &&
-            this.input !== event.target) {
-            this.closeSuggestions();
-        }
-    }
-    componentDidRender() {
-        this.setListboxContainerMaxBlockSize();
-    }
-    connectedCallback() {
-        const input = this.host.querySelector('input[type="text"]');
-        if (!(input instanceof HTMLInputElement)) {
-            return;
-            // throw new ReferenceError("Mandatory text input not found"); #2293
-        }
-        this.input = input;
-        if (input.id) {
-            this.inputId = input.id;
-        }
-        else {
-            input.id = this.inputId;
-        }
-        if (!this.input.labels || this.input.labels.length < 1) {
-            return;
-            // throw new ReferenceError("Mandatory label for text input not found"); #2293
-        }
-        const label = this.input.labels[0];
-        if (label === null || label === void 0 ? void 0 : label.id) {
-            this.labelId = label.id;
-        }
-        else if (label) {
-            label.id = this.labelId;
-        }
-        this.input.setAttribute("role", "combobox");
-        this.input.setAttribute("aria-haspopup", "listbox");
-        this.input.setAttribute("aria-expanded", "false");
-        this.input.setAttribute("autocomplete", "off");
-        this.input.setAttribute("aria-autocomplete", "list");
-        this.input.setAttribute("aria-activedescendant", "");
-        this.input.addEventListener("input", this.onInput);
-        this.input.addEventListener("keydown", this.onKeyDown);
-        this.input.addEventListener("focusin", this.onFocusIn);
-        window.addEventListener("resize", this.onWindowResize);
-        document.addEventListener("scrollend", this.onScrollend);
-        this.resizeObserver.observe(this.host);
-    }
-    disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput);
-        (_b = this.input) === null || _b === void 0 ? void 0 : _b.removeEventListener("keydown", this.onKeyDown);
-        (_c = this.input) === null || _c === void 0 ? void 0 : _c.removeEventListener("focusin", this.onFocusIn);
-        window.removeEventListener("resize", this.onWindowResize);
-        document.removeEventListener("scrollend", this.onScrollend);
-        this.resizeObserver.disconnect();
-    }
-    setListboxContainerMaxBlockSize() {
-        var _a;
-        if (!this.listboxContainer || !this.showSuggestions) {
-            return;
-        }
-        if (this.showSuggestions) {
-            let blockSizeViewableListItems = 0;
-            let listboxContainerMaxBlockSize = 0;
-            // The total number of list items to reserve vertical space for.
-            const total = this.listboxItems.length ? Math.min(this.listboxItems.length, maxSuggestionsViewable) : 0;
-            for (let i = 0; i < total; i++) {
-                blockSizeViewableListItems =
-                    blockSizeViewableListItems + (((_a = this.listboxItems[i]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0);
-            }
-            const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;
-            const listboxMaxBlockSize = blockSizeViewableListItems + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;
-            if (availableBlockSize < listboxMaxBlockSize || availableBlockSize <= blockSizeViewableListItems) {
-                listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;
-            }
-            else {
-                listboxContainerMaxBlockSize = listboxMaxBlockSize;
-            }
-            this.listboxContainer.style.setProperty("--_dso-autosuggest-max-block-size", `${listboxContainerMaxBlockSize}px`);
-        }
-    }
-    showInputValueNotFound(text) {
-        var _a, _b;
-        return this.processAutosuggestMarkItems(this.markTerms((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value.split(" ").filter((t) => t)) !== null && _b !== void 0 ? _b : [], text));
-    }
-    handleMark(suggestion, text, type, extraIndex) {
-        var _a, _b;
-        if (this.mark && type) {
-            return this.processAutosuggestMarkItems(this.mark(suggestion, text, type, extraIndex));
-        }
-        return this.processAutosuggestMarkItems(this.markTerms((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value.split(" ").filter((t) => t)) !== null && _b !== void 0 ? _b : [], text));
-    }
-    markTerms(terms, suggestionValue) {
-        if (!suggestionValue || !terms || terms.length === 0 || terms[0] === undefined) {
-            return [""];
-        }
-        const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, "gi");
-        return suggestionValue.split(termRegex).reduce((total, valuePart) => {
-            if (!valuePart) {
-                total.push(valuePart);
-            }
-            else if (termRegex.test(valuePart)) {
-                total.push({ mark: valuePart });
-            }
-            else if (terms.length === 1) {
-                total.push(valuePart);
-            }
-            else {
-                total.push(...this.markTerms(terms.slice(1), valuePart));
-            }
-            return total;
-        }, []);
-    }
-    processAutosuggestMarkItems(items) {
-        if (items.length === 0) {
-            return [""];
-        }
-        return items.map((item) => {
-            if (typeof item === "object") {
-                return h("mark", null, item.mark);
-            }
-            return item;
-        });
-    }
-    selectSuggestion(suggestion, group) {
-        this.selectedSuggestion = suggestion;
-        this.selectedSuggestionGroup = group;
-        this.setAriaActiveDescendant();
-    }
-    selectFirstSuggestion() {
-        if (!this.suggestions) {
-            return;
-        }
-        if (isGrouped(this.suggestions) && this.selectedSuggestionGroup) {
-            this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];
-        }
-        else {
-            if (isFlat(this.suggestions)) {
-                this.selectedSuggestion = this.suggestions[0];
-            }
-        }
-        this.setAriaActiveDescendant(true);
-    }
-    selectLastSuggestion() {
-        if (!this.suggestions) {
-            return;
-        }
-        if (isGrouped(this.suggestions) && this.selectedSuggestionGroup) {
-            this.selectedSuggestion =
-                this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];
-        }
-        else {
-            if (isFlat(this.suggestions)) {
-                this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
-            }
-        }
-        this.setAriaActiveDescendant(true);
-    }
-    selectNextSuggestion() {
-        var _a;
-        if (!this.suggestions) {
-            return;
-        }
-        if (isGrouped(this.suggestions)) {
-            this.selectNextGroupedSuggestion();
-        }
-        else {
-            const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
-            this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
-        }
-        this.setAriaActiveDescendant(true);
-    }
-    selectNextGroupedSuggestion() {
-        var _a;
-        if (!this.suggestions) {
-            return;
-        }
-        if (this.selectedSuggestionGroup) {
-            const indexInGroup = this.selectedSuggestion
-                ? this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion)
-                : -1;
-            if (indexInGroup === this.selectedSuggestionGroup.suggestions.length - 1) {
-                // Move to first suggestion in next or first group
-                const groupIndex = this.suggestionGroups.indexOf(this.selectedSuggestionGroup);
-                this.selectedSuggestionGroup = (_a = this.suggestionGroups[groupIndex + 1]) !== null && _a !== void 0 ? _a : this.suggestionGroups[0];
-                this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];
-            }
-            else {
-                // Within this group
-                this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[indexInGroup + 1];
-            }
-        }
-        else {
-            this.selectedSuggestionGroup = this.suggestionGroups[0];
-            this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];
-        }
-    }
-    selectPreviousSuggestion() {
-        var _a;
-        if (!this.suggestions) {
-            return;
-        }
-        if (isGrouped(this.suggestions)) {
-            this.selectPreviousGroupedSuggestion();
-        }
-        else {
-            const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
-            this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
-        }
-        this.setAriaActiveDescendant(true);
-    }
-    selectPreviousGroupedSuggestion() {
-        var _a;
-        if (!this.suggestions) {
-            return;
-        }
-        if (this.selectedSuggestionGroup) {
-            const indexInGroup = this.selectedSuggestion
-                ? this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion)
-                : -1;
-            if (indexInGroup === 0) {
-                // Move to last suggestion in previous or last group
-                const groupIndex = this.suggestionGroups.indexOf(this.selectedSuggestionGroup);
-                this.selectedSuggestionGroup =
-                    (_a = this.suggestionGroups[groupIndex - 1]) !== null && _a !== void 0 ? _a : this.suggestionGroups[this.suggestions.length - 1];
-                this.selectedSuggestion =
-                    this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];
-            }
-            else {
-                // Within this group
-                this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[indexInGroup - 1];
-            }
-        }
-        else {
-            this.selectedSuggestionGroup = this.suggestionGroups[this.suggestions.length - 1];
-            this.selectedSuggestion =
-                this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];
-        }
-    }
-    get suggestionGroups() {
-        return isGrouped(this.suggestions) ? this.suggestions : [];
-    }
-    setAriaActiveDescendant(scroll = false) {
-        var _a, _b;
-        if (this.selectedSuggestion) {
-            const id = this.selectedSuggestionGroup
-                ? this.listboxGroupedItemId(this.selectedSuggestionGroup, this.selectedSuggestion)
-                : this.listboxItemId(this.selectedSuggestion);
-            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", id);
-            if (scroll) {
-                (_b = document.getElementById(id)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: "nearest" });
-            }
-        }
-    }
-    resetSelectedSuggestion() {
-        var _a;
-        this.showLoading = !this.loadingDelayed;
-        this.notFound = false;
-        this.selectedSuggestion = undefined;
-        this.selectedSuggestionGroup = undefined;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
-    }
-    openSuggestions(selectSuggestion) {
-        var _a, _b, _c, _d;
-        this.showSuggestions = (_a = (this.suggestions && this.suggestions.length > 0)) !== null && _a !== void 0 ? _a : false;
-        this.notFound = (_c = (this.suggestions && ((_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.length) === 0)) !== null && _c !== void 0 ? _c : false;
-        (_d = this.input) === null || _d === void 0 ? void 0 : _d.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
-        if (this.showSuggestions && selectSuggestion === "first") {
-            this.selectFirstSuggestion();
-        }
-        else if (this.showSuggestions && selectSuggestion === "last") {
-            this.selectLastSuggestion();
-        }
-    }
-    closeSuggestions() {
-        var _a;
-        this.showSuggestions = false;
-        this.notFound = false;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "false");
-        this.selectFirstSuggestion();
-    }
-    pickSelectedValue() {
-        var _a;
-        if (this.selectedSuggestion && this.showSuggestions) {
-            this.dsoSelect.emit(this.selectedSuggestion);
-        }
-        else {
-            this.dsoSearch.emit((_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
-        }
-        this.closeSuggestions();
-    }
-    listboxItemId(suggestion) {
-        if (!this.suggestions) {
-            return "";
-        }
-        return `${this.inputId}-${isFlat(this.suggestions) && this.suggestions.indexOf(suggestion) + 1}`;
-    }
-    listboxGroupedItemId(suggestionGroup, suggestion) {
-        if (!this.suggestions) {
-            return "";
-        }
-        return `${this.inputId}-${this.suggestionGroups.indexOf(suggestionGroup) + 1}-${suggestionGroup.suggestions.indexOf(suggestion) + 1}`;
-    }
-    getMarkedChunkedExtras(extras, suggestion) {
-        const chunkedExtras = extras.reduce((resultArray, extra, index) => {
-            var _a;
-            const chunkIndex = Math.floor(index / 2);
-            if (!resultArray[chunkIndex]) {
-                resultArray[chunkIndex] = [];
-            }
-            (_a = resultArray[chunkIndex]) === null || _a === void 0 ? void 0 : _a.push(extra);
-            return resultArray;
-        }, []);
-        return chunkedExtras.map((chunk, index) => chunk.map((c, i) => this.handleMark(suggestion, c, "extra", index * 2 + i)));
-    }
-    getMarkedSuggestions(suggestion) {
-        return {
-            value: this.handleMark(suggestion, suggestion.value, "value"),
-            type: suggestion.type ? this.handleMark(suggestion, suggestion.type, "type") : undefined,
-            extras: suggestion.extras ? this.getMarkedChunkedExtras(suggestion.extras, suggestion) : undefined,
-        };
-    }
-    getAutosuggestStatus() {
-        if (this.notFound) {
-            return `"${this.inputValue}" is niet gevonden.`;
-        }
-        let totalSuggestions = 0;
-        if (isFlat(this.suggestions)) {
-            totalSuggestions = this.suggestions.length;
-        }
-        else if (isGrouped(this.suggestions)) {
-            totalSuggestions = this.suggestions.reduce((count, group) => count + group.suggestions.length, 0);
-        }
-        return `${totalSuggestions} resultaten gevonden.`;
-    }
-    render() {
-        this.listboxItems = [];
-        const showListbox = this.showSuggestions || this.notFound;
-        const grouped = isGrouped(this.suggestions);
-        const flat = isFlat(this.suggestions);
-        if (showListbox && this.input) {
-            this.input.setAttribute("aria-controls", this.listboxId);
-        }
-        else if (this.input) {
-            this.input.removeAttribute("aria-controls");
-        }
-        return (h(Fragment, null, h("slot", { key: '08888b7a48deb495aef359e3e71ee657694edfa8' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
-            this.showSuggestions &&
-            this.suggestions &&
-            this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: () => this.pickSelectedValue(), selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||
-            (grouped &&
-                this.showSuggestions &&
-                this.suggestions &&
-                this.suggestions.map((suggestionGroup) => {
-                    const groupLabelId = v4();
-                    return (h("div", { role: "group", class: "group", "aria-labelledby": groupLabelId }, h("div", { class: "group-label", role: "presentation", id: groupLabelId, ref: (element) => element && this.listboxItems.push(element) }, suggestionGroup.groupLabel), suggestionGroup.suggestions.map((suggestion) => (h(Option, { id: this.listboxGroupedItemId(suggestionGroup, suggestion), mouseEnter: () => this.selectSuggestion(suggestion, suggestionGroup), mouseLeave: () => this.resetSelectedSuggestion(), click: () => this.pickSelectedValue(), selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))));
-                })) ||
-            (this.notFound && (h("div", { class: "option" }, h("span", { class: "value" }, this.notFoundLabel ||
-                this.showInputValueNotFound(this.text("notFound", { inputValue: this.inputValue })))))))), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.getAutosuggestStatus()))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "suggestions": ["suggestionsWatcher"]
-    }; }
-    static get style() { return autosuggestCss(); }
-}, [262, "dso-autosuggest", {
-        "suggestions": [16],
-        "loading": [4],
-        "loadingLabel": [1, "loading-label"],
-        "loadingDelayed": [2, "loading-delayed"],
-        "notFoundLabel": [1, "not-found-label"],
-        "mark": [16],
-        "showSuggestions": [32],
-        "selectedSuggestion": [32],
-        "selectedSuggestionGroup": [32],
-        "notFound": [32],
-        "showLoading": [32]
-    }, [[4, "click", "onDocumentClick"]], {
-        "suggestions": ["suggestionsWatcher"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-autosuggest", "dso-icon", "dso-progress-indicator", "dso-scrollable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-autosuggest":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Autosuggest);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-progress-indicator":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoAutosuggest = Autosuggest;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoAutosuggest, defineCustomElement };
-//# sourceMappingURL=dso-autosuggest.js.map
-
-//# sourceMappingURL=dso-autosuggest.js.map
+import{proxyCustomElement as s,HTMLElement as t,createEvent as i,h as e,Fragment as o,transformTag as h}from"@stencil/core/internal/client";import{d as n}from"./index2.js";import{i as a}from"./i18n.js";import{d as r}from"./icon.js";import{d as u}from"./progress-indicator.js";import{d as c}from"./scrollable.js";import{v as g}from"./v4.js";const l={en:{"dso-autosuggest":{notFound:"{{inputValue}} was not found."}},nl:{"dso-autosuggest":{notFound:"{{inputValue}} is niet gevonden."}}},d=({id:s,mouseEnter:t,mouseLeave:i,click:o,selected:h,suggestion:n,ref:a,markedSuggestion:r})=>e("div",{class:"option",role:"option",id:s,onMouseEnter:t,onMouseLeave:i,onClick:o,"aria-selected":h,"aria-label":n.value,ref:a},e("div",{class:"suggestion-row"},e("span",{class:"value"},r.value),r.type?e("span",{class:"type"},r.type):void 0),r.extras&&r.extras.map((s=>e("div",{class:"suggestion-row"},s.map((s=>e("span",{class:"extra"},s)))))));function p(s){return!!s&&s.length>0&&s.every((s=>void 0!==s&&"groupLabel"in s&&void 0!==s.groupLabel&&"suggestions"in s&&s.suggestions.length>0))}function b(s){return!!s&&s.length>0&&s.every((s=>void 0!==s&&"value"in s&&void 0!==s.value))}const f=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.dsoSelect=i(this,"dsoSelect",7),this.dsoChange=i(this,"dsoChange",7),this.dsoSearch=i(this,"dsoSearch",7),this.suggestions=null,this.loading=!1,this.loadingLabel="Een moment geduld.",this.showSuggestions=!1,this.notFound=!1,this.showLoading=!1,this.listboxItems=[],this.listboxId=g(),this.inputId=g(),this.labelId=g(),this.resizeObserver=new ResizeObserver(n((()=>this.setListboxContainerMaxBlockSize()),150)),this.debouncedEmitValue=n((s=>{this.dsoChange.emit(s),this.debouncedShowLoading()}),200),this.debouncedShowLoading=n((()=>{this.inputValue&&(this.showLoading=!0)}),this.loadingDelayed),this.inputValue="",this.onInput=s=>{s.target instanceof HTMLInputElement&&(this.showLoading=!this.loadingDelayed,this.inputValue=s.target.value,this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:""))},this.onFocusIn=()=>{this.suggestions&&this.suggestions.length>1&&this.openSuggestions()},this.text=a((()=>this.host),l),this.onWindowResize=n((()=>this.setListboxContainerMaxBlockSize()),150),this.onScrollend=()=>this.setListboxContainerMaxBlockSize(),this.onKeyDown=s=>{if(!s.defaultPrevented&&!this.loading){switch(s.key){case"ArrowDown":this.showSuggestions?this.selectNextSuggestion():this.openSuggestions("first");break;case"ArrowUp":this.showSuggestions?this.selectPreviousSuggestion():this.openSuggestions("last");break;case"Tab":return void this.closeSuggestions();case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()}}}suggestionsWatcher(){this.resetSelectedSuggestion(),this.showSuggestions&&this.notFound||!this.inputValue?!this.showSuggestions&&!this.notFound||this.inputValue||this.closeSuggestions():this.openSuggestions()}onDocumentClick(s){(this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target&&this.closeSuggestions()}componentDidRender(){this.setListboxContainerMaxBlockSize()}connectedCallback(){const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement))return;if(this.input=s,s.id?this.inputId=s.id:s.id=this.inputId,!this.input.labels||this.input.labels.length<1)return;const t=this.input.labels[0];t?.id?this.labelId=t.id:t&&(t.id=this.labelId),this.input.setAttribute("role","combobox"),this.input.setAttribute("aria-haspopup","listbox"),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("aria-autocomplete","list"),this.input.setAttribute("aria-activedescendant",""),this.input.addEventListener("input",this.onInput),this.input.addEventListener("keydown",this.onKeyDown),this.input.addEventListener("focusin",this.onFocusIn),window.addEventListener("resize",this.onWindowResize),document.addEventListener("scrollend",this.onScrollend),this.resizeObserver.observe(this.host)}disconnectedCallback(){this.input?.removeEventListener("input",this.onInput),this.input?.removeEventListener("keydown",this.onKeyDown),this.input?.removeEventListener("focusin",this.onFocusIn),window.removeEventListener("resize",this.onWindowResize),document.removeEventListener("scrollend",this.onScrollend),this.resizeObserver.disconnect()}setListboxContainerMaxBlockSize(){if(this.listboxContainer&&this.showSuggestions&&this.showSuggestions){let s=0,t=0;const i=this.listboxItems.length?Math.min(this.listboxItems.length,10):0;for(let t=0;t<i;t++)s+=this.listboxItems[t]?.getBoundingClientRect().height||0;const e=window.innerHeight-this.host.getBoundingClientRect().bottom,o=s+16+2;t=e<o||e<=s?e-16:o,this.listboxContainer.style.setProperty("--_dso-autosuggest-max-block-size",t+"px")}}showInputValueNotFound(s){return this.processAutosuggestMarkItems(this.markTerms(this.input?.value.split(" ").filter((s=>s))??[],s))}handleMark(s,t,i,e){return this.processAutosuggestMarkItems(this.mark&&i?this.mark(s,t,i,e):this.markTerms(this.input?.value.split(" ").filter((s=>s))??[],t))}markTerms(s,t){if(!t||!s||0===s.length||void 0===s[0])return[""];const i=RegExp(`(${function(s){if("string"!=typeof s)throw new TypeError("Expected a string");return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}(s[0])})`,"gi");return t.split(i).reduce(((t,e)=>(e?i.test(e)?t.push({mark:e}):1===s.length?t.push(e):t.push(...this.markTerms(s.slice(1),e)):t.push(e),t)),[])}processAutosuggestMarkItems(s){return 0===s.length?[""]:s.map((s=>"object"==typeof s?e("mark",null,s.mark):s))}selectSuggestion(s,t){this.selectedSuggestion=s,this.selectedSuggestionGroup=t,this.setAriaActiveDescendant()}selectFirstSuggestion(){this.suggestions&&(p(this.suggestions)&&this.selectedSuggestionGroup?this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]:b(this.suggestions)&&(this.selectedSuggestion=this.suggestions[0]),this.setAriaActiveDescendant(!0))}selectLastSuggestion(){this.suggestions&&(p(this.suggestions)&&this.selectedSuggestionGroup?this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]:b(this.suggestions)&&(this.selectedSuggestion=this.suggestions[this.suggestions.length-1]),this.setAriaActiveDescendant(!0))}selectNextSuggestion(){if(this.suggestions){if(p(this.suggestions))this.selectNextGroupedSuggestion();else{const s=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=this.suggestions[s+1]??this.suggestions[0]}this.setAriaActiveDescendant(!0)}}selectNextGroupedSuggestion(){if(this.suggestions)if(this.selectedSuggestionGroup){const s=this.selectedSuggestion?this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion):-1;if(s===this.selectedSuggestionGroup.suggestions.length-1){const s=this.suggestionGroups.indexOf(this.selectedSuggestionGroup);this.selectedSuggestionGroup=this.suggestionGroups[s+1]??this.suggestionGroups[0],this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}else this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[s+1]}else this.selectedSuggestionGroup=this.suggestionGroups[0],this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}selectPreviousSuggestion(){if(this.suggestions){if(p(this.suggestions))this.selectPreviousGroupedSuggestion();else{const s=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=this.suggestions[s-1]??this.suggestions[this.suggestions.length-1]}this.setAriaActiveDescendant(!0)}}selectPreviousGroupedSuggestion(){if(this.suggestions)if(this.selectedSuggestionGroup){const s=this.selectedSuggestion?this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion):-1;if(0===s){const s=this.suggestionGroups.indexOf(this.selectedSuggestionGroup);this.selectedSuggestionGroup=this.suggestionGroups[s-1]??this.suggestionGroups[this.suggestions.length-1],this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}else this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[s-1]}else this.selectedSuggestionGroup=this.suggestionGroups[this.suggestions.length-1],this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}get suggestionGroups(){return p(this.suggestions)?this.suggestions:[]}setAriaActiveDescendant(s=!1){if(this.selectedSuggestion){const t=this.selectedSuggestionGroup?this.listboxGroupedItemId(this.selectedSuggestionGroup,this.selectedSuggestion):this.listboxItemId(this.selectedSuggestion);this.input?.setAttribute("aria-activedescendant",t),s&&document.getElementById(t)?.scrollIntoView({block:"nearest"})}}resetSelectedSuggestion(){this.showLoading=!this.loadingDelayed,this.notFound=!1,this.selectedSuggestion=void 0,this.selectedSuggestionGroup=void 0,this.input?.setAttribute("aria-activedescendant","")}openSuggestions(s){this.showSuggestions=(this.suggestions&&this.suggestions.length>0)??!1,this.notFound=(this.suggestions&&0===this.suggestions?.length)??!1,this.input?.setAttribute("aria-expanded",""+(this.showSuggestions||this.notFound)),this.showSuggestions&&"first"===s?this.selectFirstSuggestion():this.showSuggestions&&"last"===s&&this.selectLastSuggestion()}closeSuggestions(){this.showSuggestions=!1,this.notFound=!1,this.input?.setAttribute("aria-expanded","false"),this.selectFirstSuggestion()}pickSelectedValue(){this.selectedSuggestion&&this.showSuggestions?this.dsoSelect.emit(this.selectedSuggestion):this.dsoSearch.emit(this.input?.value),this.closeSuggestions()}listboxItemId(s){return this.suggestions?`${this.inputId}-${b(this.suggestions)&&this.suggestions.indexOf(s)+1}`:""}listboxGroupedItemId(s,t){return this.suggestions?`${this.inputId}-${this.suggestionGroups.indexOf(s)+1}-${s.suggestions.indexOf(t)+1}`:""}getMarkedChunkedExtras(s,t){return s.reduce(((s,t,i)=>{const e=Math.floor(i/2);return s[e]||(s[e]=[]),s[e]?.push(t),s}),[]).map(((s,i)=>s.map(((s,e)=>this.handleMark(t,s,"extra",2*i+e)))))}getMarkedSuggestions(s){return{value:this.handleMark(s,s.value,"value"),type:s.type?this.handleMark(s,s.type,"type"):void 0,extras:s.extras?this.getMarkedChunkedExtras(s.extras,s):void 0}}getAutosuggestStatus(){if(this.notFound)return`"${this.inputValue}" is niet gevonden.`;let s=0;return b(this.suggestions)?s=this.suggestions.length:p(this.suggestions)&&(s=this.suggestions.reduce(((s,t)=>s+t.suggestions.length),0)),s+" resultaten gevonden."}render(){this.listboxItems=[];const s=this.showSuggestions||this.notFound,t=p(this.suggestions),i=b(this.suggestions);return s&&this.input?this.input.setAttribute("aria-controls",this.listboxId):this.input&&this.input.removeAttribute("aria-controls"),e(o,null,e("slot",{key:"08888b7a48deb495aef359e3e71ee657694edfa8"}),this.loading&&this.showLoading?e("div",{class:"autosuggest-progress-box"},e("dso-progress-indicator",{label:this.loadingLabel})):s&&e(o,null,e("dso-scrollable",{class:"listbox-container",ref:s=>this.listboxContainer=s},e("div",{class:"listbox",role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s,tabindex:"0"},i&&this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>e(d,{id:this.listboxItemId(s),mouseEnter:()=>this.selectSuggestion(s),mouseLeave:()=>this.resetSelectedSuggestion(),click:()=>this.pickSelectedValue(),selected:""+(s===this.selectedSuggestion),suggestion:s,ref:s=>s&&this.listboxItems.push(s),markedSuggestion:this.getMarkedSuggestions(s)})))||t&&this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>{const t=g();return e("div",{role:"group",class:"group","aria-labelledby":t},e("div",{class:"group-label",role:"presentation",id:t,ref:s=>s&&this.listboxItems.push(s)},s.groupLabel),s.suggestions.map((t=>e(d,{id:this.listboxGroupedItemId(s,t),mouseEnter:()=>this.selectSuggestion(t,s),mouseLeave:()=>this.resetSelectedSuggestion(),click:()=>this.pickSelectedValue(),selected:""+(t===this.selectedSuggestion),suggestion:t,ref:s=>s&&this.listboxItems.push(s),markedSuggestion:this.getMarkedSuggestions(t)}))))}))||this.notFound&&e("div",{class:"option"},e("span",{class:"value"},this.notFoundLabel||this.showInputValueNotFound(this.text("notFound",{inputValue:this.inputValue})))))),e("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.getAutosuggestStatus())))}get host(){return this}static get watchers(){return{suggestions:[{suggestionsWatcher:0}]}}static get style(){return".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--_dso-autosuggest-max-block-size);min-block-size:50px;overflow-y:auto;position:absolute;z-index:200}.listbox.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}.listbox.sc-dso-autosuggest{padding-block:8px;padding-inline:0}.listbox.sc-dso-autosuggest .group.sc-dso-autosuggest:not(:first-child) .group-label.sc-dso-autosuggest{border-block-start:1px solid #b2b2b2;padding-block-start:12px}.listbox.sc-dso-autosuggest .group-label.sc-dso-autosuggest{color:#275937;font-weight:700;padding-block:4px;margin-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active{background-color:#275937}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .type.sc-dso-autosuggest,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .extra.sc-dso-autosuggest{color:#fff}.option[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#d7e7ce}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}"}},[262,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],mark:[16],showSuggestions:[32],selectedSuggestion:[32],selectedSuggestionGroup:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]],{suggestions:[{suggestionsWatcher:0}]}]),x=f,m=function(){"undefined"!=typeof customElements&&["dso-autosuggest","dso-icon","dso-progress-indicator","dso-scrollable"].forEach((s=>{switch(s){case"dso-autosuggest":customElements.get(h(s))||customElements.define(h(s),f);break;case"dso-icon":customElements.get(h(s))||r();break;case"dso-progress-indicator":customElements.get(h(s))||u();break;case"dso-scrollable":customElements.get(h(s))||c()}}))};export{x as DsoAutosuggest,m as defineCustomElement}

package/dist/components/dso-badge.js

@@ -1,9 +1 @@
-import { B as Badge, d as defineCustomElement$1 } from './badge.js';
-
-const DsoBadge = Badge;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoBadge, defineCustomElement };
-//# sourceMappingURL=dso-badge.js.map
-
-//# sourceMappingURL=dso-badge.js.map
+import{B as o,d as s}from"./badge.js";const a=o,r=s;export{a as DsoBadge,r as defineCustomElement}