@arbetsformedlingen/yrkesvaljaren 2.0.5

package/dist/collection/components/core-selector/core-selector.js

@@ -0,0 +1,761 @@
+// src/components/core-selector/core-selector.tsx
+import { h } from "@stencil/core";
+import { reconcileActiveIndex, shouldShowManualInput } from "@taxonomy/core/selector-navigation";
+import { AfIcon, AfLabel, AfTag, AfValidationMessage } from "../design-compat";
+export class CoreSelector {
+    historyRequestTimer;
+    disconnectedCallback() {
+        clearTimeout(this.historyRequestTimer);
+        this.historyRequestTimer = undefined;
+    }
+    static nextId = 0;
+    hostElement;
+    state;
+    config = {
+        disabled: false,
+        placeholder: 'Sök...',
+        minLength: 1,
+        maxResults: 10,
+        enableMultiple: false,
+        showSearchIcon: true,
+        requireSelection: true,
+        size: 'medium'
+    };
+    label = '';
+    labelDescription;
+    componentId = `cs-${CoreSelector.nextId++}`;
+    size = 'medium';
+    csInput;
+    csSelect;
+    csClear;
+    csRemoveItem;
+    csBlur;
+    csEditSelection;
+    csFocus;
+    csLoadMore;
+    csClearHistory;
+    csRequestHistory;
+    afFocused = false;
+    activeIndex = -1;
+    isFocusedInternal = false;
+    isNavigatingWithKeyboard = false;
+    async setFocus() {
+        if (this.inputRef) {
+            this.inputRef.focus();
+            const len = this.inputRef.value.length;
+            this.inputRef.setSelectionRange(len, len);
+        }
+        else {
+            this.shouldFocusAfterRender = true;
+        }
+    }
+    inputRef;
+    listRef;
+    shouldFocusAfterRender = false;
+    handleKeyDown = (event) => {
+        if (this.config.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (!this.state)
+            return;
+        if (event.target.tagName === 'BUTTON')
+            return;
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Enter' && event.key !== 'Escape') {
+            this.isNavigatingWithKeyboard = false;
+        }
+        if (this.state.status === 'itemSelected') {
+            if (event.key !== 'Tab' && event.key !== 'Shift' && !event.ctrlKey && !event.metaKey) {
+                this.csEditSelection.emit();
+                return;
+            }
+        }
+        if (this.state.status !== 'searching' && this.state.status !== 'multiSelect')
+            return;
+        const suggestions = this.state.suggestions;
+        const showManualInput = shouldShowManualInput(this.state, this.config.requireSelection);
+        const totalOptions = suggestions.length + (showManualInput ? 1 : 0);
+        switch (event.key) {
+            case 'ArrowDown':
+                if (totalOptions > 0) {
+                    event.preventDefault();
+                    this.isNavigatingWithKeyboard = true;
+                    if (this.activeIndex < totalOptions - 1) {
+                        this.activeIndex = this.activeIndex + 1;
+                        this.scrollToActive();
+                    }
+                    if (this.activeIndex >= suggestions.length - 3) {
+                        this.csLoadMore.emit();
+                    }
+                }
+                else {
+                    this.csFocus.emit();
+                }
+                break;
+            case 'ArrowUp':
+                if (totalOptions > 0) {
+                    event.preventDefault();
+                    this.isNavigatingWithKeyboard = true;
+                    if (this.activeIndex > 0) {
+                        this.activeIndex = this.activeIndex - 1;
+                        this.scrollToActive();
+                    }
+                    else if (this.activeIndex === 0 || this.activeIndex === -1) {
+                        // Wrap around to the last option (which might be manual input)
+                        this.activeIndex = totalOptions - 1;
+                        this.scrollToActive();
+                    }
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                // Only handle Space if we have an active suggestion (keyboard navigation)
+                // If index is -1, let the space go through to the input field
+                if (event.key === ' ' && this.activeIndex === -1) {
+                    return;
+                }
+                if (this.activeIndex >= 0 && this.activeIndex < suggestions.length) {
+                    event.preventDefault();
+                    const item = suggestions[this.activeIndex];
+                    this.shouldFocusAfterRender = true;
+                    if (item.isSelected) {
+                        this.csRemoveItem.emit(item);
+                    }
+                    else {
+                        this.csSelect.emit(item);
+                    }
+                }
+                else if (showManualInput && this.activeIndex === suggestions.length && this.isNavigatingWithKeyboard) {
+                    event.preventDefault();
+                    this.handleManualSelect();
+                }
+                else if (event.key === 'Enter') {
+                    // If Enter is pressed but no item is active,
+                    // we prevent default to avoid accidental form submission
+                    // and ensure the dropdown stays open if manual input is available.
+                    if (showManualInput || suggestions.length > 0) {
+                        event.preventDefault();
+                        this.isNavigatingWithKeyboard = true;
+                    }
+                }
+                break;
+            case 'Escape':
+                this.activeIndex = -1;
+                this.csClear.emit();
+                break;
+        }
+    };
+    onWrapperFocusIn = () => {
+        if (this.config.disabled)
+            return;
+        if (!this.state || !this.isFocusedInternal) {
+            if (this.state) {
+                this.isFocusedInternal = true;
+                this.activeIndex = -1;
+                this.csFocus.emit();
+                if (this.state.inputValue.trim() === '') {
+                    this.csRequestHistory.emit();
+                }
+            }
+        }
+    };
+    onWrapperFocusOut = () => {
+        if (this.shouldFocusAfterRender)
+            return;
+        // Use requestAnimationFrame to wait for the next frame where focus
+        // will have settled on the new element.
+        requestAnimationFrame(() => {
+            const root = this.hostElement.shadowRoot;
+            const activeElement = root?.activeElement || document.activeElement;
+            // Check if the currently focused element is inside the component or its shadow DOM
+            const isInside = (activeElement && this.hostElement.contains(activeElement)) ||
+                (root && root.contains(activeElement));
+            if (!isInside) {
+                this.isFocusedInternal = false;
+                this.activeIndex = -1;
+                this.csBlur.emit();
+            }
+        });
+    };
+    handleAfFocusedChange(newValue) {
+        this.isFocusedInternal = newValue;
+        if (newValue) {
+            this.shouldFocusAfterRender = true;
+        }
+    }
+    handleConfigChange(newConfig) {
+        if (newConfig.disabled) {
+            this.isFocusedInternal = false;
+            this.activeIndex = -1;
+            this.shouldFocusAfterRender = false;
+        }
+    }
+    handleStateChange(newState, oldState) {
+        const result = reconcileActiveIndex({
+            activeIndex: this.activeIndex,
+            newState,
+            oldState,
+            requireSelection: this.config.requireSelection,
+        });
+        this.activeIndex = result.activeIndex;
+        if (result.shouldRestoreFocus) {
+            this.shouldFocusAfterRender = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.shouldFocusAfterRender) {
+            this.performFocusRestoration();
+        }
+    }
+    performFocusRestoration(retryCount = 0) {
+        if (this.config.disabled) {
+            this.shouldFocusAfterRender = false;
+            return;
+        }
+        if (this.inputRef) {
+            this.isFocusedInternal = true; // Ensure UI thinks it's focused to show suggestions
+            this.inputRef.focus();
+            const currentActive = this.hostElement.shadowRoot?.activeElement;
+            if (currentActive === this.inputRef || retryCount > 20) {
+                const len = this.inputRef.value.length;
+                this.inputRef.setSelectionRange(len, len);
+                this.shouldFocusAfterRender = false;
+            }
+            else {
+                requestAnimationFrame(() => this.performFocusRestoration(retryCount + 1));
+            }
+        }
+    }
+    handleScroll(event) {
+        if (!this.config.enableInfiniteScroll)
+            return;
+        const target = event.target;
+        const threshold = 50;
+        const remaining = target.scrollHeight - (target.scrollTop + target.clientHeight);
+        if (remaining < threshold) {
+            this.csLoadMore.emit();
+        }
+    }
+    scrollToActive() {
+        if (!this.listRef || !this.state)
+            return;
+        const optionId = this.activeIndex === this.state.suggestions.length
+            ? `${this.componentId}-list-option-manual-input`
+            : `${this.componentId}-list-option-${this.activeIndex}`;
+        const activeElement = this.listRef.querySelector(`#${optionId}`);
+        activeElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    handleManualSelect() {
+        const item = { id: '', label: this.state.inputValue.trim(), metadata: { type: 'ManualInput' } };
+        this.shouldFocusAfterRender = true;
+        this.csSelect.emit(item);
+        if (this.config.enableMultiple && this.state?.inputValue?.trim() === '') {
+            this.csRequestHistory.emit();
+        }
+    }
+    render() {
+        if (!this.state)
+            return null;
+        const isSelected = this.state.status === 'itemSelected';
+        return (h("div", { class: { 'core-selector-wrapper': true, 'is-disabled': !!this.config.disabled }, "aria-disabled": this.config.disabled ? 'true' : 'false', onKeyDown: (e) => this.handleKeyDown(e), onMouseMove: () => { this.isNavigatingWithKeyboard = false; }, onFocusin: this.onWrapperFocusIn, onFocusout: this.onWrapperFocusOut }, this.label && (h(AfLabel, { label: this.label, forId: `${this.componentId}-input`, description: this.labelDescription })), this.labelDescription && (h("div", { id: `${this.componentId}-description`, class: "visually-hidden" }, this.labelDescription)), this.state && this.state.status === 'loading' && h("div", { class: "loading-indicator" }, "Laddar..."), this.state && this.state.status === 'error' && h("div", { class: "error-message" }, this.state.message), this.state && ['searching', 'itemSelected', 'multiSelect'].includes(this.state.status) && (h("div", { class: "combobox-container" }, this.renderSearchContainer(), this.isFocusedInternal && !isSelected && this.renderSuggestionsList())), this.state && this.state.validation !== 'idle' && this.state.status !== 'itemSelected' && (h(AfValidationMessage, { id: `${this.componentId}-validation-message`, variant: this.state.validation === 'error' ? 'error' : 'success', role: this.state.validation === 'error' ? 'alert' : undefined, class: "selector-validation-message" }, this.state.message))));
+    }
+    renderSearchContainer() {
+        const isSelected = this.state.status === 'itemSelected';
+        const displayValue = isSelected ? (this.state.selectedItem?.label || '') : this.state.inputValue;
+        const isMulti = this.state.status === 'multiSelect';
+        const hasInput = displayValue.length > 0;
+        const hasTags = isMulti && this.state.selectedItems.length > 0;
+        const hasSuggestions = this.state && (this.state.suggestions.length > 0 || shouldShowManualInput(this.state, this.config.requireSelection));
+        const activeDescendantId = (this.activeIndex >= 0 && this.isNavigatingWithKeyboard)
+            ? (this.activeIndex === this.state.suggestions.length
+                ? `${this.componentId}-list-option-manual-input`
+                : `${this.componentId}-list-option-${this.activeIndex}`)
+            : undefined;
+        const descriptionId = `${this.componentId}-description`;
+        const validationMessageId = `${this.componentId}-validation-message`;
+        const hasDescription = !!this.labelDescription;
+        const hasError = this.state && this.state.validation === 'error' && this.state.message;
+        const describedByList = [];
+        if (hasDescription && displayValue.length === 0)
+            describedByList.push(descriptionId);
+        if (hasError)
+            describedByList.push(validationMessageId);
+        const ariaDescribedBy = describedByList.length > 0 ? describedByList.join(' ') : undefined;
+        return (h("div", { class: {
+                'search-container': true,
+                'is-inactive-selected': isSelected,
+                'multi-search-container': isMulti,
+                'has-tags': hasTags,
+                'has-validation-error': this.state?.validation === 'error',
+                'has-positive-validation': !isSelected && this.state?.validation === 'success',
+            }, onClick: () => {
+                if (this.config.disabled)
+                    return;
+                if (isSelected) {
+                    this.csEditSelection.emit();
+                }
+                else if (this.state.inputValue.trim() === '') {
+                    this.csRequestHistory.emit();
+                }
+            } }, isMulti && this.state.selectedItems.length > 0 && (h("div", { class: "selected-tags-wrapper" }, this.state.selectedItems.map((item) => (h(AfTag, { key: item.id, text: item.label, breakWords: true, onRemove: () => {
+                this.shouldFocusAfterRender = true;
+                this.csRemoveItem.emit(item);
+            } }))))), h("div", { class: "input-controls-wrapper" }, h(AfIcon, { name: "search", class: {
+                'search-icon-container': true,
+                'selector-search-icon': true,
+                'is-hidden': !this.config.showSearchIcon || hasInput || hasTags,
+            } }), h("div", { class: { 'input-area': true, 'has-value': !this.config.showSearchIcon || hasInput || hasTags } }, isSelected && (h("span", { class: "selected-text-in-box" }, displayValue)), h("input", { class: {
+                'selector-input-field': true,
+                'visually-hidden-selected': isSelected
+            }, ref: (el) => this.inputRef = el, id: `${this.componentId}-input`, type: "text", placeholder: this.config.placeholder, value: displayValue, onInput: (e) => {
+                if (this.config.disabled)
+                    return;
+                this.isNavigatingWithKeyboard = false;
+                this.csInput.emit(e.target.value);
+            }, autocomplete: "off", role: "combobox", "aria-label": this.label, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": !isSelected && hasSuggestions && this.isNavigatingWithKeyboard ? 'true' : 'false', "aria-controls": !isSelected && hasSuggestions && this.isNavigatingWithKeyboard ? `${this.componentId}-listbox` : undefined, "aria-activedescendant": activeDescendantId, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": ariaDescribedBy, readOnly: isSelected, disabled: !!this.config.disabled })), h("button", { type: "button", class: { 'clear-button': true, 'is-visible': hasInput || isSelected }, tabIndex: hasInput || isSelected ? 0 : -1, disabled: !!this.config.disabled, "aria-label": "Rensa inmatad text", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                if (this.config.disabled)
+                    return;
+                this.csInput.emit('');
+                this.shouldFocusAfterRender = true;
+                this.csClear.emit();
+                this.csRequestHistory.emit();
+            } }, h(AfIcon, { name: "x" })))));
+    }
+    renderSuggestionsList() {
+        if (this.state.status === 'itemSelected')
+            return null;
+        const hasSearchInput = Boolean(this.state.inputValue && this.state.inputValue.trim().length > 0);
+        const showManualInput = shouldShowManualInput(this.state, this.config.requireSelection);
+        const hasSuggestions = Boolean(this.state.suggestions && this.state.suggestions.length > 0);
+        const noResults = hasSearchInput && !hasSuggestions && !showManualInput;
+        if (!hasSuggestions && !showManualInput && !noResults) {
+            return null;
+        }
+        const listHeader = this.state.listHeader || this.config.listHeader;
+        const showHistoryHeader = this.state.showHistoryHeader || (this.state.isHistoryView && this.config.showHistoryHeader);
+        return (h("div", { class: "suggestions-box-container" }, h("div", { class: "suggestions-box", ref: (el) => (this.listRef = el), onScroll: (e) => this.handleScroll(e) }, (listHeader || showHistoryHeader) && (h("div", { class: "list-header-container" }, h("slot", { name: "suggestions-overlay" }), listHeader && (h("div", { class: "list-header" }, h("span", null, listHeader))), showHistoryHeader && (h("div", { class: "list-header history-header" }, h("span", null, "Din privata historik"), " - ", h("button", { type: "button", class: "history-clear-link", "aria-label": "Rensa historik", disabled: !!this.config.disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                if (!this.config.disabled)
+                    this.csClearHistory.emit();
+            } }, "Rensa"))))), !listHeader && !showHistoryHeader && h("slot", { name: "suggestions-overlay" }), h("div", { id: `${this.componentId}-listbox`, role: "listbox" }, noResults && (h("div", { class: "suggestion-item no-results" }, "Inga resultat matchade din s\u00F6kning")), !noResults && this.state.suggestions.map((item, index) => (h("div", { key: item.id || index, role: "option", id: `${this.componentId}-list-option-${index}`, "aria-selected": !!item.isSelected, "aria-current": index === this.activeIndex ? 'true' : 'false', class: {
+                'suggestion-item': true,
+                'active-suggestion': index === this.activeIndex,
+                'is-selected': !!item.isSelected,
+                'is-keyboard-focus': index === this.activeIndex && this.isNavigatingWithKeyboard
+            }, onMouseDown: (e) => {
+                e.preventDefault();
+                if (this.config.disabled)
+                    return;
+                this.shouldFocusAfterRender = true;
+                if (item.isSelected) {
+                    this.csRemoveItem.emit(item);
+                }
+                else {
+                    this.csSelect.emit(item);
+                }
+                if (this.config.enableMultiple) {
+                    // Trigger history refresh if we are in multi-mode
+                    clearTimeout(this.historyRequestTimer);
+                    this.historyRequestTimer = setTimeout(() => {
+                        this.csRequestHistory.emit();
+                        this.historyRequestTimer = undefined;
+                    }, 50);
+                }
+            }, onMouseEnter: () => {
+                if (this.config.disabled)
+                    return;
+                if (!item.isSelected) {
+                    this.activeIndex = index;
+                    this.isNavigatingWithKeyboard = false;
+                }
+            } }, h(AfIcon, { name: "check", class: "selection-indicator-icon" }), item.displaySegments ? (h("span", null, item.displaySegments.map((segment, segmentIndex) => (h("span", { key: segmentIndex, class: {
+                'match-highlight': !!segment.isMatch,
+                'metadata-dimmed': !!segment.isMetadata
+            } }, segment.text))))) : (h("span", null, item.label))))), !noResults && shouldShowManualInput(this.state, this.config.requireSelection) && (h("div", { role: "option", id: `${this.componentId}-list-option-manual-input`, class: {
+                'suggestion-item': true,
+                'active-suggestion': this.activeIndex === this.state.suggestions.length,
+                'is-keyboard-focus': this.activeIndex === this.state.suggestions.length && this.isNavigatingWithKeyboard
+            }, onMouseDown: (e) => {
+                e.preventDefault();
+                if (!this.config.disabled)
+                    this.handleManualSelect();
+            }, onMouseEnter: () => {
+                if (this.config.disabled)
+                    return;
+                this.activeIndex = this.state.suggestions.length;
+                this.isNavigatingWithKeyboard = false;
+            } }, h("span", null, "Anv\u00E4nd \"", h("strong", null, this.state.inputValue.trim()), "\"")))))));
+    }
+    static get is() { return "core-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["core-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["core-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectorState",
+                    "resolved": "SelectorState",
+                    "references": {
+                        "SelectorState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/core-selector/types.ts::SelectorState",
+                            "referenceLocation": "SelectorState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectorConfig",
+                    "resolved": "SelectorConfig",
+                    "references": {
+                        "SelectorConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/core-selector/types.ts::SelectorConfig",
+                            "referenceLocation": "SelectorConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n        disabled: false,\n        placeholder: 'S\u00F6k...',\n        minLength: 1,\n        maxResults: 10,\n        enableMultiple: false,\n        showSearchIcon: true,\n        requireSelection: true,\n        size: 'medium'\n    }"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "labelDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-description"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id",
+                "defaultValue": "`cs-${CoreSelector.nextId++}`"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cs-size",
+                "defaultValue": "'medium'"
+            },
+            "afFocused": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "af-focused",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeIndex": {},
+            "isFocusedInternal": {},
+            "isNavigatingWithKeyboard": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "csInput",
+                "name": "csInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "csSelect",
+                "name": "csSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GenericItem",
+                    "resolved": "GenericItem<unknown>",
+                    "references": {
+                        "GenericItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/core-selector/types.ts::GenericItem",
+                            "referenceLocation": "GenericItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "csClear",
+                "name": "csClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "csRemoveItem",
+                "name": "csRemoveItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GenericItem",
+                    "resolved": "GenericItem<unknown>",
+                    "references": {
+                        "GenericItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/core-selector/types.ts::GenericItem",
+                            "referenceLocation": "GenericItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "csBlur",
+                "name": "csBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "csEditSelection",
+                "name": "csEditSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "csFocus",
+                "name": "csFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "csLoadMore",
+                "name": "csLoadMore",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "csClearHistory",
+                "name": "csClearHistory",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "csRequestHistory",
+                "name": "csRequestHistory",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "afFocused",
+                "methodName": "handleAfFocusedChange"
+            }, {
+                "propName": "config",
+                "methodName": "handleConfigChange"
+            }, {
+                "propName": "state",
+                "methodName": "handleStateChange"
+            }];
+    }
+}