@dso-toolkit/core 73.2.0 → 73.3.0

package/dist/bundle/dso-attachments-counter.js.map

@@ -0,0 +1 @@
+{"file":"dso-attachments-counter.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/bundle/dso-autosuggest.d.ts

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

package/dist/bundle/dso-autosuggest.js

@@ -0,0 +1,588 @@
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
+import { d as debounce } from './p-BxvZeNWe.js';
+import { i as i18n } from './p-B_kXuEcW.js';
+import { d as defineCustomElement$4 } from './p-D2nuXSd0.js';
+import { d as defineCustomElement$3 } from './p-0JGmXD8O.js';
+import { d as defineCustomElement$2 } from './p-DGWbWwct.js';
+import { v as v4 } from './p-BF0_OXTe.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 H {
+    constructor() {
+        super();
+        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.";
+        /**
+         * Whether the previous suggestions will be presented when the input gets focus again.
+         */
+        this.suggestOnFocus = false;
+        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.suggestOnFocus) {
+                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: '75db3245d7e2a85722c0a408bfa8c2d117000a4a' }), 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; }
+}, [6, "dso-autosuggest", {
+        "suggestions": [16],
+        "loading": [4],
+        "loadingLabel": [1, "loading-label"],
+        "loadingDelayed": [2, "loading-delayed"],
+        "notFoundLabel": [1, "not-found-label"],
+        "suggestOnFocus": [4, "suggest-on-focus"],
+        "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(tagName)) {
+                customElements.define(tagName, Autosuggest);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-progress-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-scrollable":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoAutosuggest = Autosuggest;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAutosuggest, defineCustomElement };
+//# sourceMappingURL=dso-autosuggest.js.map
+
+//# sourceMappingURL=dso-autosuggest.js.map