import { r as registerInstance, c as createEvent, h, H as Host } from './index-b1696fed.js';
import { m as messageId, P as PdsLabel } from './pds-label-62469596.js';

const pdsSelectCss = ":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300);--color-background-disabled:var(--pine-color-grey-100);--color-background-error:var(--pine-color-red-050);--color-border-active:var(--pine-color-grey-400);--color-border-default:var(--pine-color-grey-300);--color-border-disabled:var(--pine-color-grey-200);--color-border-error:var(--pine-color-red-600);--color-border-hover:var(--pine-color-grey-500);--color-text-disabled:var(--pine-color-grey-600);--color-text-error:var(--pine-color-red-600);--font-size-helper-message:var(--pine-font-size-085);--font-size-select-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-select-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-select-field:var(--pine-line-height-150);--spacing-error-message:var(--pine-spacing-050);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);--spacing-select-field-padding-inline:var(--pine-spacing-150);--spacing-select-field-icon-allowance:var(--pine-spacing-450)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);grid-area:label;line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-select-field);font-weight:var(--font-weight-select-field);grid-area:field;line-height:var(--line-height-select-field);padding:var(--spacing-field-padding-block) var(--spacing-select-field-padding-inline);padding-right:var(--spacing-select-field-icon-allowance);position:relative}select:hover{border-color:var(--color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--color-border-active);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}select:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--color-background-error);border-color:var(--color-border-error)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}:host(.is-invalid) select{background-color:var(--color-background-error);border-color:var(--color-border-error)}:host(.is-invalid) select:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-select__error-message,.pds-select__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--color-text-error);display:-ms-flexbox;display:flex;gap:var(--spacing-error-message)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:2.5rem;pointer-events:none;position:relative;z-index:1}";
const PdsSelectStyle0 = pdsSelectCss;

const PdsSelect = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pdsSelectChange = createEvent(this, "pdsSelectChange", 7);
        /**
         * Emits an event on input change.
        */
        this.onSelectUpdate = (e) => {
            const target = e.target;
            const values = Array.from(target.options)
                .filter((option) => (option.selected))
                .map((option) => (option.value));
            if (values.length === 1 && !this.multiple) {
                this.value = values[0];
            }
            else {
                this.value = values;
            }
            this.pdsSelectChange.emit(e);
        };
        /**
         * Handles the change event for the slot element.
         * This method is triggered when the slot content changes.
         * It updates the inner HTML of the select element by cloning and appending
         * the assigned <option> elements from the slot.
         */
        this.handleSlotChange = () => {
            const slot = this.slotContainer.querySelector('slot');
            this.selectEl.innerHTML = '';
            const assignedElements = slot.assignedElements({ flatten: true });
            assignedElements.forEach((item) => {
                if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
                    const clonedItem = item.cloneNode(true);
                    if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
                        clonedItem.selected = true;
                    }
                    this.selectEl.appendChild(clonedItem);
                }
            });
            this.updateSelectedOption();
        };
        this.autocomplete = undefined;
        this.componentId = undefined;
        this.disabled = false;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.invalid = undefined;
        this.label = undefined;
        this.multiple = false;
        this.name = undefined;
        this.required = false;
        this.value = undefined;
    }
    /**
     * Handles the change in the value of the select component.
     * This method is called whenever the value of the select component changes.
     * It updates the selected option accordingly.
     */
    valueChanged() {
        this.updateSelectedOption();
    }
    componentWillLoad() {
        this.updateSelectedOption();
    }
    /**
     * Updates the selected option in the select element based on the current value.
     *
     * This method iterates through all the options of the select element and sets the
     * 'selected' attribute on the option that matches the current value. If an option
     * does not match the current value, the 'selected' attribute is removed.
     *
     * @private
     * @returns {void}
     */
    updateSelectedOption() {
        if (this.selectEl) {
            const options = this.selectEl.options;
            // Update the selected attribute for all options.
            Array.from(options).map((option) => {
                if (Array.isArray(this.value)) {
                    option.selected = this.value.includes(option.value);
                }
                else {
                    option.selected = this.value === option.value;
                }
            });
        }
    }
    getHelperMessage() {
        return this.helperMessage && (h("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
    }
    getErrorMessage() {
        return this.errorMessage && (h("p", { class: "pds-select__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { name: "danger", size: "small" }), this.errorMessage));
    }
    renderMessages() {
        if (!this.helperMessage && !this.errorMessage)
            return null;
        return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
    }
    classNames() {
        const classNames = [];
        if (this.invalid) {
            classNames.push('is-invalid');
        }
        if (this.disabled) {
            classNames.push('is-disabled');
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: 'f0baf957ee67ee9171a41fc4171e548b94d5c22c', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '88ef7c54afc654133d613c91c4bb3fbfe4a944b3', class: "pds-select" }, h(PdsLabel, { key: '7723f468412f6567e0d4fd236807e1ba2fdea16a', htmlFor: this.componentId, text: this.label }), h("select", { key: '1bdb1e22360972aa6cb77902d1288abfcc9dbf07', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'ddbac1f772b335688d7eb219a7ea3a9ab4a3192a', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'aa6093fd8833fdf4860dd8127c32f95405679a11', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'de8dc37035701942d8b2bcf56b40edf2f6de20df', class: "pds-select__select-icon", name: "enlarge" }))));
    }
    static get watchers() { return {
        "value": ["valueChanged"]
    }; }
};
PdsSelect.style = PdsSelectStyle0;

export { PdsSelect as pds_select };

//# sourceMappingURL=pds-select.entry.js.map