import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Co4V4Zk-.js';

const spwSelectCss = () => `html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:var(--spw-ds-font-main)}body{margin:0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:block}.spw-select{position:relative}.spw-select__container{position:relative}.spw-select__icons{display:flex;align-items:center;position:absolute;top:50%;right:12px;gap:8px;pointer-events:none;transform:translateY(-50%);z-index:1}.spw-select--large .spw-select__icons{right:24px}.spw-select__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:auto;cursor:pointer;padding:2px;font-size:16px;transition:all 0.2s ease-in}.spw-select__clear:hover{color:var(--spw-ds-primary)}.spw-select__arrow{pointer-events:none;color:var(--spw-color-themes-grey-grey-900);font-size:16px}.spw-select__field-message{margin-bottom:8px;margin-top:-4px}.spw-select__trigger{width:100%;height:40px;border-radius:4px;border:1px solid var(--spw-color-themes-grey-grey-800);background-color:#fff;font-size:16px;color:var(--spw-color-themes-grey-grey-800);position:relative;padding:0;margin:0;appearance:none;padding:0 12px;padding-right:40px}.spw-select--is-clear .spw-select__trigger{padding-right:68px}.spw-select__trigger:hover{outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-select__trigger:focus-visible{outline:3px solid white;outline-offset:0;box-shadow:0 0 0 6px black}.spw-select__trigger::after{content:"\\f078";font-family:var(--spw-ds-font-icons-solid);font-weight:900;font-size:14px;color:var(--spw-color-themes-grey-grey-800);position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}.spw-select--is-error .spw-select__trigger{border-color:var(--spw-colors-states-error-error-300)}.spw-select--large .spw-select__trigger{height:60px;padding:0 24px;font-size:18px}.spw-select--disabled .spw-select__trigger{border-color:var(--spw-color-themes-grey-grey-400);background:var(--spw-color-themes-grey-grey-100);color:var(--spw-color-themes-grey-grey-500);cursor:not-allowed}.spw-select--disabled .spw-select__trigger::placeholder{color:var(--spw-color-themes-grey-grey-500)}.spw-select--disabled .spw-select__trigger:hover,.spw-select--disabled .spw-select__trigger:focus,.spw-select--disabled .spw-select__trigger:focus-visible{outline:none}`;

const SpwSelect = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.valueChanged = createEvent(this, "valueChanged", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
        /** Label associé au champ de sélection */
        this.label = '';
        /** Texte du placeholder à afficher lorsque rien n'est sélectionné */
        this.placeholder = 'Sélectionner une option';
        /** Indique si la sélection est obligatoire dans le formulaire */
        this.required = false;
        /** Taille du champ de sélection : 'large' ou 'medium' */
        this.size = 'medium';
        /** Message d'erreur à afficher sous le champ de sélection */
        this.error = '';
        /** Message d'indication (hint) à afficher sous le champ de sélection */
        this.hint = '';
        /** Message de succès à afficher sous le champ de sélection */
        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';
        /** Indique si le champ peut être effacé avec un bouton */
        this.isClear = false;
        this.defaultValue = null;
    }
    handleItemsChange() {
        if (this.selectElement) {
            this.syncDynamicOptions();
        }
    }
    handleValueChange(newValue) {
        if (this.internalValue !== newValue) {
            this.internalValue = newValue;
            if (this.selectElement) {
                this.selectElement.value = String(newValue !== null && newValue !== void 0 ? newValue : '');
            }
            this.internals.setFormValue(this.getFormValue());
        }
    }
    /** Réinitialise le champ de sélection */
    async resetSelect() {
        this.internalValue = '';
        this.value = '';
        if (this.selectElement) {
            this.selectElement.value = '';
        }
        this.internals.setFormValue('');
        this.valueChanged.emit('');
    }
    /** Définit la valeur du champ de sélection */
    async setValue(val) {
        this.internalValue = val;
        this.value = val;
        if (this.selectElement) {
            this.selectElement.value = String(val);
        }
        this.internals.setFormValue(this.getFormValue());
        this.valueChanged.emit(this.internalValue);
    }
    /** Récupère la valeur actuelle du champ de sélection */
    async getValue() {
        return this.internalValue;
    }
    componentWillLoad() {
        var _a;
        this.defaultValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.getInitialSelectedValue();
        this.internalValue = this.value || this.getInitialSelectedValue();
    }
    componentDidLoad() {
        this.internals.setFormValue(this.getFormValue());
        if (!this.items) {
            this.moveOptionsToLightDom();
        }
        else {
            this.syncDynamicOptions();
        }
    }
    formResetCallback() {
        var _a;
        this.setValue((_a = this.defaultValue) !== null && _a !== void 0 ? _a : '');
    }
    getFormValue() {
        return this.internalValue ? String(this.internalValue) : null;
    }
    getInitialSelectedValue() {
        if (this.items && this.items.length > 0) {
            return null;
        }
        const assignedNodes = Array.from(this.el.querySelectorAll('option'));
        for (const option of assignedNodes) {
            if (option.hasAttribute('selected')) {
                return option.getAttribute('value');
            }
        }
        return null;
    }
    handleSelectChange(event) {
        const select = event.target;
        this.internalValue = select.value;
        this.value = this.internalValue;
        this.internals.setFormValue(this.getFormValue());
        this.valueChanged.emit(this.internalValue);
    }
    moveOptionsToLightDom() {
        const slot = this.el.shadowRoot.querySelector('slot');
        if (slot) {
            const assignedNodes = slot.assignedNodes({ flatten: true });
            assignedNodes.forEach(node => {
                if (node.nodeName === 'OPTION' || node.nodeName === 'OPTGROUP') {
                    this.selectElement.appendChild(node);
                }
            });
        }
    }
    syncDynamicOptions() {
        while (this.selectElement.options.length > 1) {
            this.selectElement.remove(1);
        }
        if (this.items && this.items.length > 0) {
            this.items.forEach(item => {
                const option = document.createElement('option');
                const value = this.itemValue ? item[this.itemValue] : item;
                const label = this.itemLabel ? item[this.itemLabel] : item;
                const disabled = item.disabled || false;
                option.value = String(value);
                option.textContent = String(label);
                option.disabled = disabled;
                this.selectElement.appendChild(option);
            });
        }
        if (this.selectElement.value !== String(this.internalValue || '')) {
            this.selectElement.value = String(this.internalValue || '');
        }
    }
    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));
        }
    }
    renderSuccessMessage() {
        if (this.success) {
            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, this.success));
        }
    }
    renderWarningMessage() {
        if (this.warning) {
            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon }, this.warning));
        }
    }
    handleClear(event) {
        event.stopPropagation();
        this.resetSelect();
    }
    get elementClass() {
        return {
            'spw-select': true,
            [`spw-select--${this.size}`]: true,
            'spw-select--disabled': this.disabled,
            'spw-select--is-error': !!this.error,
            'spw-select--is-clear': this.isClear && !!this.internalValue,
        };
    }
    render() {
        return (h(Host, { key: '81b442a4a808d22e864b0ae86e596394ed2e4138' }, h("div", { key: 'ec9981cddfe018e48fd37e891826c2057d6b06b7', class: this.elementClass }, this.label && (h("spw-field-label", { key: 'ed31b2aea9498dd32a89b3bb67759cfa76620201', 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: '0515f6a86938f9df94e35a184501fe1cb1b911ad', class: "spw-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'dcea546070211670b8e1af0b6e97c1564f7e8bd0', class: "spw-select__container" }, h("select", { key: '44a6c19e9b485fb11ca13137f339ddf97e3fcd61', id: this.name, name: this.name, "aria-label": this.accAriaLabel || this.label || this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: '0126406f9e6b9046c86063eadc283278266f36d6', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("div", { key: '9743ab039baf9d35591681f3767bbee018257d56', class: "spw-select__icons" }, this.isClear && !!this.internalValue && (h("span", { key: '3779eea44d77795a42eb030dda1af776c5f02b9c', class: "spw-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: 'b22e5e2aa2c81eeb1f0c34fbeaadba4f9f8e4827', icon: "fa-xmark" }))), h("spw-icon", { key: 'd9631b9b8f57f3e9184fdca81de6e83fcf5cd343', class: "spw-select__arrow", icon: "fa-chevron-down" }))), !this.items && h("slot", { key: '35913f6a392f1f7ec0d2794c5253054df88ee421' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
    }
    static get formAssociated() { return true; }
    get el() { return getElement(this); }
    static get watchers() { return {
        "items": [{
                "handleItemsChange": 0
            }],
        "value": [{
                "handleValueChange": 0
            }]
    }; }
};
SpwSelect.style = spwSelectCss();

export { SpwSelect as spw_select };
