import { h } from "@stencil/core";
export class SpwCustomSelect {
    constructor() {
        this.parentScrollContainer = null;
        this.isOpen = false;
        this.parsedOptions = [];
        this.focusedOptionIndex = null;
        this.searchText = '';
        this.hasSlottedFooter = false;
        this.dropdownDirection = 'down';
        this.hasSelectedValue = false;
        this.dropdownPosition = { top: 0, left: 0, width: 0 };
        /** Valeur actuelle sélectionnée dans le composant, peut être une chaîne, un nombre ou un tableau */
        this.value = [];
        /** Label associé au champ de sélection personnalisé */
        this.label = '';
        /** Placeholder à afficher lorsque aucune option n'est sélectionnée */
        this.placeholder = 'Sélectionnez une option';
        /** Placeholder à afficher dans l'input de recherche si actif */
        this.searchPlaceholder = 'Entrez votre recherche';
        /** Texte à afficher si pas de résultats de recherche */
        this.noResultsText = 'Aucun résultat trouvé';
        /** Indique si la sélection est obligatoire dans le formulaire */
        this.required = false;
        /** Taille du select, peut être "large" ou "medium" */
        this.size = 'medium';
        /** Permet la sélection multiple si vrai */
        this.multiple = false;
        /** Active la fonction de recherche dans la liste des items */
        this.isSearch = false;
        /** Message d'erreur à afficher sous le champ */
        this.error = '';
        /** Message d'indication (hint) à afficher sous le champ */
        this.hint = '';
        /** Message de succès à afficher sous le champ */
        this.success = '';
        /** Message de warning à afficher sous le champ */
        this.warning = '';
        /** Affiche une icône d'erreur si vrai */
        this.showErrorIcon = true;
        /** Affiche une icône d'indication si vrai */
        this.showHintIcon = true;
        /** Affiche une icône de succès si vrai */
        this.showSuccessIcon = true;
        /** Affiche une icône de warning si vrai */
        this.showWarningIcon = true;
        /** Positionnement du tooltip */
        this.tooltipDirection = 'top';
        /** Curseur du tooltip */
        this.tooltipCursor = 'help';
        /** Utilise un positionnement fixed pour le dropdown si nécessité de sortir du contexte (utile dans une modal avec overflow hidden) */
        this.fixedDropdown = false;
        /** Indique si le champ peut être effacé avec un bouton */
        this.isClear = false;
        /** Direction d'ouverture du dropdown */
        this.direction = 'auto';
        /** Permet à l'utilisateur d'ajouter une option si elle n'existe pas dans la liste (nécessite isSearch) */
        this.allowCreate = false;
        this.handleOtherSelectOpened = (event) => {
            if (event.detail.instance !== this.host && this.isOpen) {
                this.closeDropdown();
            }
        };
        this.handleClickOutside = (event) => {
            var _a, _b;
            if (this.isOpen) {
                const path = event.composedPath();
                const target = path[0];
                const isInsideHost = this.host.contains(target);
                const searchField = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.spw-custom-select__search-input');
                const isInsideSearchField = searchField === null || searchField === void 0 ? void 0 : searchField.contains(target);
                // Empêcher la fermeture si le clic vient du slot footer (light DOM slotté)
                const footerSlot = this.hostElement.querySelector('[slot="footer"]');
                const isInsideFooterSlot = footerSlot ? path.includes(footerSlot) : false;
                if (!isInsideHost && !isInsideSearchField && !isInsideFooterSlot) {
                    if (this.multiple) {
                        const optionsContainer = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.spw-custom-select__options');
                        if (optionsContainer && optionsContainer.contains(target)) {
                            return;
                        }
                    }
                    this.closeDropdown();
                }
            }
        };
        this.updateDropdownPosition = () => {
            if (!this.selectContainer)
                return;
            const rect = this.selectContainer.getBoundingClientRect();
            const viewportHeight = window.innerHeight;
            if (this.direction === 'top') {
                this.dropdownDirection = 'up';
            }
            else if (this.direction === 'bottom') {
                this.dropdownDirection = 'down';
            }
            else {
                // auto
                if (rect.bottom + 200 > viewportHeight && rect.top > 200) {
                    this.dropdownDirection = 'up';
                }
                else {
                    this.dropdownDirection = 'down';
                }
            }
            this.dropdownPosition = {
                top: rect.bottom,
                left: rect.left,
                width: rect.width,
            };
        };
    }
    componentWillLoad() {
        if (this.multiple) {
            if (typeof this.value === 'string') {
                try {
                    this.internalValue = JSON.parse(this.value);
                }
                catch (e) {
                    this.internalValue = [];
                }
            }
            else if (Array.isArray(this.value)) {
                this.internalValue = this.value;
            }
            else {
                this.internalValue = [];
            }
        }
        else {
            this.internalValue = this.value;
        }
        this.defaultValue = this.internalValue;
        if (this.items) {
            this.parseOptions(this.items);
        }
        this.updateSelectedOption();
    }
    /** Méthode publique pour mettre le focus sur le champ de sélection. */
    async setFocus() {
        var _a, _b;
        const searchInput = (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.spw-custom-select__search-input');
        if (searchInput) {
            searchInput.focus();
        }
        else {
            (_b = this.selectContainer) === null || _b === void 0 ? void 0 : _b.focus();
        }
    }
    /** Réinitialise le champ de sélection */
    async resetSelect() {
        if (this.multiple) {
            this.internalValue = [];
            this.value = [];
        }
        else {
            this.internalValue = '';
            this.value = '';
        }
        this.searchText = '';
        this.focusedOptionIndex = null;
        this.internals.setFormValue(this.getFormValue());
        this.valueChanged.emit(this.internalValue);
        this.updateSelectedOption();
    }
    /** Définit la valeur du champ de sélection */
    async setValue(val) {
        if (this.multiple) {
            this.internalValue = Array.isArray(val) ? val : [val];
            this.value = this.internalValue;
        }
        else {
            this.internalValue = val;
            this.value = val;
        }
        this.internals.setFormValue(this.getFormValue());
        this.valueChanged.emit(this.internalValue);
        this.updateSelectedOption();
    }
    /** Récupère la valeur actuelle du champ de sélection */
    async getValue() {
        return this.internalValue;
    }
    formResetCallback() {
        this.setValue(this.defaultValue);
    }
    componentDidLoad() {
        this.internals.setFormValue(this.getFormValue());
        const footerSlot = this.hostElement.querySelector('[slot="footer"]');
        this.hasSlottedFooter = !!footerSlot;
    }
    connectedCallback() {
        document.addEventListener('click', this.handleClickOutside, true);
        document.addEventListener('spw-custom-select-opened', this.handleOtherSelectOpened);
        window.addEventListener('scroll', this.updateDropdownPosition, true);
        window.addEventListener('resize', this.updateDropdownPosition);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleClickOutside, true);
        document.removeEventListener('spw-custom-select-opened', this.handleOtherSelectOpened);
        window.removeEventListener('scroll', this.updateDropdownPosition, true);
        window.removeEventListener('resize', this.updateDropdownPosition);
        this.cleanupParentScrollListener();
        this.isOpen = false;
    }
    findParentComponent() {
        if (!this.fixedDropdownParent)
            return null;
        let current = this.hostElement;
        while (current) {
            if (current instanceof HTMLElement && current.tagName.toLowerCase() === this.fixedDropdownParent.toLowerCase()) {
                return current;
            }
            if (current.parentElement) {
                current = current.parentElement;
            }
            else {
                const rootNode = current.getRootNode();
                if (rootNode instanceof ShadowRoot) {
                    current = rootNode.host;
                }
                else {
                    break;
                }
            }
        }
        return null;
    }
    findScrollContainerInShadowRoot(parent) {
        const shadowRoot = parent.shadowRoot;
        if (!shadowRoot)
            return null;
        const elements = shadowRoot.querySelectorAll('*');
        let deepestScrollContainer = null;
        let maxDepth = -1;
        for (const el of Array.from(elements)) {
            const htmlEl = el;
            const style = window.getComputedStyle(htmlEl);
            const hasOverflow = style.overflow === 'auto' || style.overflow === 'scroll' || style.overflowY === 'auto' || style.overflowY === 'scroll';
            if (hasOverflow) {
                let depth = 0;
                let node = el;
                while (node && node !== shadowRoot) {
                    depth++;
                    node = node.parentNode;
                }
                if (depth > maxDepth) {
                    maxDepth = depth;
                    deepestScrollContainer = htmlEl;
                }
            }
        }
        return deepestScrollContainer;
    }
    ensureParentScrollListener() {
        if (!this.fixedDropdownParent || !this.fixedDropdown)
            return;
        if (this.parentScrollContainer)
            return;
        const parentComponent = this.findParentComponent();
        if (parentComponent) {
            this.parentScrollContainer = this.findScrollContainerInShadowRoot(parentComponent);
            if (this.parentScrollContainer) {
                this.parentScrollContainer.addEventListener('scroll', this.updateDropdownPosition);
            }
        }
    }
    cleanupParentScrollListener() {
        if (this.parentScrollContainer) {
            this.parentScrollContainer.removeEventListener('scroll', this.updateDropdownPosition);
            this.parentScrollContainer = null;
        }
    }
    parseOptions(newValue) {
        try {
            if (Array.isArray(newValue)) {
                this.parsedOptions = newValue.map(option => ({
                    value: option.value,
                    label: option.label,
                    disabled: option.disabled || false,
                }));
            }
            else {
                this.parsedOptions = [];
            }
            this.updateSelectedOption();
        }
        catch (e) {
            this.parsedOptions = [];
        }
    }
    valueChangedHandler(newValue) {
        if (this.multiple) {
            this.internalValue = Array.isArray(newValue) ? newValue : [newValue];
        }
        else {
            this.internalValue = newValue;
        }
        this.updateSelectedOption();
        this.internals.setFormValue(this.getFormValue());
        this.valueChanged.emit(this.internalValue);
    }
    updateSelectedOption() {
        this.internals.setFormValue(this.getFormValue());
        if (!this.multiple && this.internalValue !== undefined) {
            this.focusedOptionIndex = this.parsedOptions.findIndex(option => String(option.value) === String(this.internalValue));
        }
        else if (this.multiple && Array.isArray(this.internalValue)) {
            this.internalValue = this.internalValue
                .filter(val => this.parsedOptions.some(option => String(option.value) === String(val)))
                .sort((a, b) => this.parsedOptions.findIndex(option => String(option.value) === String(a)) - this.parsedOptions.findIndex(option => String(option.value) === String(b)));
        }
    }
    internalValueChanged() {
        this.hasSelectedValue = Array.isArray(this.internalValue) ? this.internalValue.length > 0 : Boolean(this.internalValue);
    }
    getFormValue() {
        if (this.multiple) {
            return Array.isArray(this.internalValue) && this.internalValue.length > 0 ? this.internalValue.map(v => String(v)).join(',') : null;
        }
        return this.internalValue ? String(this.internalValue) : null;
    }
    toggleDropdown(event) {
        if (!this.disabled) {
            if (event) {
                const target = event.composedPath()[0];
                if (target.classList.contains('spw-custom-select__search-input')) {
                    return;
                }
                event.stopPropagation();
            }
            this.determineDropdownDirection();
            const wasOpen = this.isOpen;
            this.isOpen = !this.isOpen;
            if (this.isOpen && !wasOpen) {
                this.ensureParentScrollListener();
                this.notifyOtherSelects();
            }
            if (!this.isOpen) {
                this.focusedOptionIndex = null;
            }
        }
    }
    notifyOtherSelects() {
        const event = new CustomEvent('spw-custom-select-opened', {
            detail: { instance: this.host },
            bubbles: true,
            composed: true,
        });
        document.dispatchEvent(event);
    }
    determineDropdownDirection() {
        this.updateDropdownPosition();
    }
    openDropdownWithKeyboard() {
        this.determineDropdownDirection();
        this.isOpen = true;
        this.focusedOptionIndex = 0;
        this.ensureParentScrollListener();
        this.notifyOtherSelects();
    }
    closeDropdown() {
        this.isOpen = false;
        this.focusedOptionIndex = null;
        this.searchText = '';
    }
    slugify(str) {
        return this.normalizeString(str)
            .replace(/\s+/g, '-')
            .replace(/[^a-z0-9-]/g, '');
    }
    addCreatedOption(label) {
        const trimmed = label.trim();
        if (!trimmed)
            return;
        const value = this.slugify(trimmed);
        const newOption = { label: trimmed, value, created: true };
        this.parsedOptions = [...this.parsedOptions, newOption];
        this.optionCreated.emit(newOption);
        this.selectOption(value);
        this.searchText = '';
    }
    removeCreatedOption(option, event) {
        event.stopPropagation();
        // Désélectionne si l'option était sélectionnée
        if (this.multiple) {
            const idx = this.internalValue.findIndex(val => String(val) === String(option.value));
            if (idx > -1) {
                this.internalValue = [...this.internalValue.slice(0, idx), ...this.internalValue.slice(idx + 1)];
                this.value = this.internalValue;
                this.internals.setFormValue(this.getFormValue());
                this.valueChanged.emit(this.internalValue);
            }
        }
        else if (String(this.internalValue) === String(option.value)) {
            this.internalValue = '';
            this.value = '';
            this.internals.setFormValue(this.getFormValue());
            this.valueChanged.emit(this.internalValue);
        }
        this.parsedOptions = this.parsedOptions.filter(o => String(o.value) !== String(option.value));
        this.optionRemoved.emit(option);
    }
    handleClear(event) {
        event.stopPropagation();
        this.resetSelect();
    }
    selectOption(optionValue, event) {
        if (event) {
            event.stopPropagation();
        }
        const option = this.parsedOptions.find(opt => String(opt.value) === String(optionValue));
        if (option === null || option === void 0 ? void 0 : option.disabled) {
            return;
        }
        if (this.multiple) {
            const index = this.internalValue.findIndex(val => String(val) === String(optionValue));
            if (index > -1) {
                this.internalValue = [...this.internalValue.slice(0, index), ...this.internalValue.slice(index + 1)];
            }
            else {
                this.internalValue = [...this.internalValue, optionValue];
            }
            this.internalValue = this.internalValue.sort((a, b) => this.parsedOptions.findIndex(option => String(option.value) === String(a)) - this.parsedOptions.findIndex(option => String(option.value) === String(b)));
        }
        else {
            this.internalValue = optionValue;
            this.closeDropdown();
        }
        this.value = this.internalValue;
        this.internals.setFormValue(this.getFormValue());
        this.valueChanged.emit(this.internalValue);
        this.updateSelectedOption();
    }
    handleOptionKeyDown(event, optionValue) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            this.selectOption(optionValue);
        }
    }
    handleKeyDown(event) {
        var _a, _b;
        if (event.target.classList.contains('spw-custom-select__search-input')) {
            return;
        }
        switch (event.key) {
            case ' ':
                event.preventDefault();
                if (!this.isOpen) {
                    this.openDropdownWithKeyboard();
                }
                break;
            case 'ArrowDown':
                event.preventDefault();
                if (this.isOpen) {
                    let nextIndex = this.focusedOptionIndex === null ? 0 : (this.focusedOptionIndex + 1) % this.parsedOptions.length;
                    while (((_a = this.parsedOptions[nextIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && nextIndex !== this.focusedOptionIndex) {
                        nextIndex = (nextIndex + 1) % this.parsedOptions.length;
                    }
                    this.focusedOptionIndex = nextIndex;
                }
                else {
                    this.openDropdownWithKeyboard();
                }
                break;
            case 'ArrowUp':
                event.preventDefault();
                if (this.isOpen) {
                    let prevIndex = this.focusedOptionIndex === null ? this.parsedOptions.length - 1 : (this.focusedOptionIndex - 1 + this.parsedOptions.length) % this.parsedOptions.length;
                    while (((_b = this.parsedOptions[prevIndex]) === null || _b === void 0 ? void 0 : _b.disabled) && prevIndex !== this.focusedOptionIndex) {
                        prevIndex = (prevIndex - 1 + this.parsedOptions.length) % this.parsedOptions.length;
                    }
                    this.focusedOptionIndex = prevIndex;
                }
                break;
            case 'Enter':
                event.preventDefault();
                if (this.isOpen && this.focusedOptionIndex !== null) {
                    this.selectOption(this.parsedOptions[this.focusedOptionIndex].value);
                }
                break;
            case 'Escape':
                if (this.isOpen) {
                    this.closeDropdown();
                }
                break;
        }
    }
    renderErrorMessage() {
        if (this.error) {
            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon }, this.error));
        }
    }
    renderHintMessage() {
        if (this.hint) {
            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon }, this.hint));
        }
    }
    renderWarningMessage() {
        if (this.warning) {
            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon }, this.warning));
        }
    }
    renderSuccessMessage() {
        if (this.success) {
            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, this.success));
        }
    }
    get elementClass() {
        const showCreate = this.showCreateButton();
        return {
            'spw-custom-select': true,
            [`spw-custom-select--${this.size}`]: true,
            [`spw-custom-select--${this.dropdownDirection}`]: true,
            'spw-custom-select--is-error': !!this.error,
            'spw-custom-select--disabled': this.disabled,
            'spw-custom-select--is-opened': this.isOpen,
            'spw-custom-select--has-value': this.hasSelectedValue,
            'spw-custom-select--no-value': !this.hasSelectedValue,
            'spw-custom-select--is-searchable': this.isSearch,
            'spw-custom-select--not-searchable': !this.isSearch,
            'spw-custom-select--is-clear': this.isClear && (this.hasSelectedValue || !!this.searchText),
            'spw-custom-select--show-create': showCreate,
        };
    }
    normalizeString(str) {
        return str
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .toLowerCase();
    }
    getSelectedLabels() {
        if (this.multiple) {
            return Array.isArray(this.internalValue) && this.internalValue.length > 0
                ? this.internalValue
                    .map(val => { var _a; return (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 : _a.label; })
                    .filter(Boolean)
                    .join(', ')
                : null;
        }
        else {
            const selectedOption = this.parsedOptions.find(option => String(option.value) === String(this.internalValue));
            return selectedOption ? selectedOption.label : null;
        }
    }
    getFilteredOptions() {
        const normalizedSearchText = this.normalizeString(this.searchText);
        return this.parsedOptions.filter(option => this.normalizeString(option.label).includes(normalizedSearchText));
    }
    handleSearchInput(event) {
        const input = event.target;
        this.searchText = input.value;
        this.focusedOptionIndex = 0;
        if (!this.isOpen) {
            this.isOpen = true;
            this.ensureParentScrollListener();
            this.notifyOtherSelects();
        }
    }
    isSearchVisible() {
        if (!this.isSearch)
            return false;
        if (!this.hasSelectedValue && !this.isOpen)
            return true;
        if (this.isSearch && this.isOpen)
            return true;
        return this.isOpen;
    }
    showPlaceholder() {
        if (this.isSearch)
            return false;
        if (this.hasSelectedValue)
            return false;
        return true;
    }
    showCreateButton() {
        if (!this.allowCreate || !this.isSearch || !this.searchText.trim())
            return false;
        const normalized = this.normalizeString(this.searchText.trim());
        return !this.parsedOptions.some(o => this.normalizeString(o.label) === normalized);
    }
    render() {
        const filteredOptions = this.getFilteredOptions();
        const showPlaceholder = this.showPlaceholder();
        const showCreate = this.showCreateButton();
        return (h("div", { key: '4bb22979651b6946dd66fc9844f205e59d0a5411', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: '4d9c26597da16ec05bc8aee0c2a03413ea17ff50', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '85594d2693007a09d2d1b70b9f5bc61056548ee2', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '53fe8200e2e8ec025c9148bb76a4bd7418068513', class: "spw-custom-select__wrapper" }, h("div", { key: '79b757cffef9f53eb738d2e11aee592e63211841', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'c502d3c270203b548990cfab7d45394557314334', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '9134c7f87988d3f0efb6c8095646bb6a1ca8ebd0', class: "spw-custom-select__search" }, h("input", { key: '0a5b873ac75d71f480e1209184fa0e63552632b9', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }), showCreate && this.isOpen && this.hasSelectedValue && (h("button", { key: '7ecf48c56ddb8a7918a38b37b0dbfb47994fc0af', class: "spw-custom-select__create-btn spw-custom-select__create-btn--big", type: "button", onMouseDown: (event) => {
                event.preventDefault();
                event.stopPropagation();
                this.addCreatedOption(this.searchText);
            } }, h("spw-icon", { key: '078c09832bcce6f476a83be55bc54e4cd19223bc', icon: "fa-plus" }))))), showPlaceholder && h("span", { key: '29e59d519f39c3dcafe60a169b2a01adee8904f7' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '205e9ebc3bf531b76fc0abdbb760c214a08b6623', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
            var _a;
            return (h("span", { class: "spw-custom-select__selected-item" }, (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 :
                _a.label, h("spw-icon", { icon: "fa-times", class: "spw-custom-select__deselect-icon", onClick: event => this.selectOption(val, event) })));
        }))), !this.multiple && h("span", { key: '67eb1e59a69443c63cfe030421a45dd9ed98d626' }, this.getSelectedLabels()))), h("div", { key: 'd36ae8e7dbcbdf5d3895482bf94ce352ccb2deb2', class: "spw-custom-select__icons" }, showCreate && !(this.isOpen && this.hasSelectedValue) && (h("button", { key: 'd5ab27383e5915b3a6a23e2a4c233e37b56bdcda', class: "spw-custom-select__create-btn", type: "button", onMouseDown: (event) => {
                event.preventDefault();
                event.stopPropagation();
                this.addCreatedOption(this.searchText);
            } }, h("spw-icon", { key: '00e486f257d3576fe5a481320685c0f73ac76b43', icon: "fa-plus" }))), this.isClear && (this.hasSelectedValue || !!this.searchText) && (h("span", { key: '522cc58133eebfc86d8f64ab549905f4d7dc85ea', class: "spw-custom-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: '4afc256de08bae62efde4d0903a2fa2de4438d89', icon: "fa-xmark" }))), h("div", { key: 'ae0fb99288bad447c52288df66afdcf042c139d8', class: "spw-custom-select__arrow" }, h("spw-icon", { key: '2166910463c05b09b845eab799fbb13b63bcc06f', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' }))), this.isOpen && (h("div", { key: '2331976d5867174852a1394987bf6bdf8545a3f2', class: {
                'spw-custom-select__options': true,
                [`spw-custom-select__options--${this.dropdownDirection}`]: true,
                'spw-custom-select__options--fixed': this.fixedDropdown,
            }, style: this.fixedDropdown
                ? {
                    position: 'fixed',
                    top: `${this.dropdownPosition.top}px`,
                    left: `${this.dropdownPosition.left}px`,
                    width: `${this.dropdownPosition.width}px`,
                }
                : {} }, h("div", { key: '43dd9a1b026ff6aac3a4d309e4f4e950156566ef', class: "spw-custom-select__options-list" }, !!filteredOptions.length && (h("ul", { key: 'dc42399871b8b4286a440a9c5da7c618301ca330' }, filteredOptions.map((option, index) => (h("li", { class: {
                'spw-custom-select__option': true,
                'spw-custom-select__option--selected': this.multiple
                    ? this.internalValue.some(val => String(val) === String(option.value))
                    : option.value === this.internalValue,
                'spw-custom-select__option--focused': index === this.focusedOptionIndex,
                'spw-custom-select__option--disabled': option.disabled,
                'spw-custom-select__option--created': !!option.created,
            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-custom-select__checkbox", checked: this.internalValue.some(val => String(val) === String(option.value)), disabled: option.disabled })), option.label, option.created && (h("spw-icon", { class: "spw-custom-select__option-remove", icon: "fa-trash", onClick: (event) => this.removeCreatedOption(option, event) }))))))), !filteredOptions.length && h("p", { key: '16b8fc9d36f71937588d8f57ddf593380766a5a8', class: "spw-custom-select__no-results" }, this.noResultsText)), this.hasSlottedFooter && (h("div", { key: 'c273c08ab20c4d80b26045fba0bc8abca5564851', class: "spw-custom-select__options-footer" }, h("slot", { key: 'f54f6b94a36cc064f8820a6892cfb02b05e039b1', name: "footer" })))))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
    }
    static get is() { return "spw-custom-select"; }
    static get encapsulation() { return "shadow"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-custom-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-custom-select.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "any",
                "mutable": true,
                "complexType": {
                    "original": "(string | number)[] | string | number",
                    "resolved": "(string | number)[] | number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Valeur actuelle s\u00E9lectionn\u00E9e dans le composant, peut \u00EAtre une cha\u00EEne, un nombre ou un tableau"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value",
                "defaultValue": "[]"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label associ\u00E9 au champ de s\u00E9lection personnalis\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "''"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder \u00E0 afficher lorsque aucune option n'est s\u00E9lectionn\u00E9e"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "'S\u00E9lectionnez une option'"
            },
            "searchPlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder \u00E0 afficher dans l'input de recherche si actif"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "search-placeholder",
                "defaultValue": "'Entrez votre recherche'"
            },
            "noResultsText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Texte \u00E0 afficher si pas de r\u00E9sultats de recherche"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-results-text",
                "defaultValue": "'Aucun r\u00E9sultat trouv\u00E9'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indique si le champ est d\u00E9sactiv\u00E9 et donc non interactif"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Nom de l'\u00E9l\u00E9ment dans les formulaires, utilis\u00E9 pour associer la valeur"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indique si la s\u00E9lection est obligatoire dans le formulaire"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "SelectItem[]",
                    "resolved": "SelectItem[]",
                    "references": {
                        "SelectItem": {
                            "location": "local",
                            "path": "/Users/pectonite/Desktop/SPW/spw-design-system/packages/spw-stencil-library/src/components/spw-custom-select/spw-custom-select.tsx",
                            "id": "src/components/spw-custom-select/spw-custom-select.tsx::SelectItem"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Liste d'items dynamiques pour g\u00E9n\u00E9rer les options (array d'objets avec label + value)"
                },
                "getter": false,
                "setter": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'medium'",
                    "resolved": "\"large\" | \"medium\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Taille du select, peut \u00EAtre \"large\" ou \"medium\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'medium'"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Permet la s\u00E9lection multiple si vrai"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple",
                "defaultValue": "false"
            },
            "isSearch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Active la fonction de recherche dans la liste des items"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-search",
                "defaultValue": "false"
            },
            "assistiveText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte d'assistance \u00E0 afficher sous le label"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "assistive-text"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message d'erreur \u00E0 afficher sous le champ"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "''"
            },
            "hint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message d'indication (hint) \u00E0 afficher sous le champ"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hint",
                "defaultValue": "''"
            },
            "success": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message de succ\u00E8s \u00E0 afficher sous le champ"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "success",
                "defaultValue": "''"
            },
            "warning": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message de warning \u00E0 afficher sous le champ"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "warning",
                "defaultValue": "''"
            },
            "showErrorIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Affiche une ic\u00F4ne d'erreur si vrai"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-error-icon",
                "defaultValue": "true"
            },
            "showHintIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Affiche une ic\u00F4ne d'indication si vrai"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-hint-icon",
                "defaultValue": "true"
            },
            "showSuccessIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Affiche une ic\u00F4ne de succ\u00E8s si vrai"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-success-icon",
                "defaultValue": "true"
            },
            "showWarningIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Affiche une ic\u00F4ne de warning si vrai"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-warning-icon",
                "defaultValue": "true"
            },
            "tooltipTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Titre du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-title"
            },
            "tooltipText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-text"
            },
            "tooltipMaxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Largeur maximale du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-max-width"
            },
            "tooltipDirection": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'left' | 'right'",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Positionnement du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-direction",
                "defaultValue": "'top'"
            },
            "tooltipCursor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'pointer' | 'default' | 'help' | 'disabled'",
                    "resolved": "\"default\" | \"disabled\" | \"help\" | \"pointer\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Curseur du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-cursor",
                "defaultValue": "'help'"
            },
            "fixedDropdown": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Utilise un positionnement fixed pour le dropdown si n\u00E9cessit\u00E9 de sortir du contexte (utile dans une modal avec overflow hidden)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fixed-dropdown",
                "defaultValue": "false"
            },
            "fixedDropdownParent": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Tag name du composant parent contenant le scroll (ex: 'spw-modal'). Le composant remontera les parents pour trouver ce composant et \u00E9couter son scroll interne."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fixed-dropdown-parent"
            },
            "isClear": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Indique si le champ peut \u00EAtre effac\u00E9 avec un bouton"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-clear",
                "defaultValue": "false"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'auto'",
                    "resolved": "\"auto\" | \"bottom\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Direction d'ouverture du dropdown"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "direction",
                "defaultValue": "'auto'"
            },
            "allowCreate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet \u00E0 l'utilisateur d'ajouter une option si elle n'existe pas dans la liste (n\u00E9cessite isSearch)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "allow-create",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "internalValue": {},
            "isOpen": {},
            "parsedOptions": {},
            "focusedOptionIndex": {},
            "searchText": {},
            "hasSlottedFooter": {},
            "dropdownDirection": {},
            "hasSelectedValue": {},
            "dropdownPosition": {}
        };
    }
    static get events() {
        return [{
                "method": "valueChanged",
                "name": "valueChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque la valeur s\u00E9lectionn\u00E9e change"
                },
                "complexType": {
                    "original": "(string | number)[] | string | number",
                    "resolved": "(string | number)[] | number | string",
                    "references": {}
                }
            }, {
                "method": "optionCreated",
                "name": "optionCreated",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lorsqu'une nouvelle option est cr\u00E9\u00E9e via le champ de recherche"
                },
                "complexType": {
                    "original": "SelectItem",
                    "resolved": "SelectItem",
                    "references": {
                        "SelectItem": {
                            "location": "local",
                            "path": "/Users/pectonite/Desktop/SPW/spw-design-system/packages/spw-stencil-library/src/components/spw-custom-select/spw-custom-select.tsx",
                            "id": "src/components/spw-custom-select/spw-custom-select.tsx::SelectItem"
                        }
                    }
                }
            }, {
                "method": "optionRemoved",
                "name": "optionRemoved",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lorsqu'une option cr\u00E9\u00E9e est supprim\u00E9e"
                },
                "complexType": {
                    "original": "SelectItem",
                    "resolved": "SelectItem",
                    "references": {
                        "SelectItem": {
                            "location": "local",
                            "path": "/Users/pectonite/Desktop/SPW/spw-design-system/packages/spw-stencil-library/src/components/spw-custom-select/spw-custom-select.tsx",
                            "id": "src/components/spw-custom-select/spw-custom-select.tsx::SelectItem"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLInputElement": {
                            "location": "global",
                            "id": "global::HTMLInputElement"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "M\u00E9thode publique pour mettre le focus sur le champ de s\u00E9lection.",
                    "tags": []
                }
            },
            "resetSelect": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "R\u00E9initialise le champ de s\u00E9lection",
                    "tags": []
                }
            },
            "setValue": {
                "complexType": {
                    "signature": "(val: (string | number)[] | string | number) => Promise<void>",
                    "parameters": [{
                            "name": "val",
                            "type": "string | number | (string | number)[]",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "D\u00E9finit la valeur du champ de s\u00E9lection",
                    "tags": []
                }
            },
            "getValue": {
                "complexType": {
                    "signature": "() => Promise<(string | number)[] | string | number>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<string | number | (string | number)[]>"
                },
                "docs": {
                    "text": "R\u00E9cup\u00E8re la valeur actuelle du champ de s\u00E9lection",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "items",
                "methodName": "parseOptions"
            }, {
                "propName": "value",
                "methodName": "valueChangedHandler"
            }, {
                "propName": "internalValue",
                "methodName": "internalValueChanged"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
