'use strict';

var index = require('./index-BEF5cZxd.js');
var form = require('./form-GgXzZZ-E.js');
var template = require('./template-Cj6PcLmR.js');
var props = require('./props-CPENhBnM.js');
var string_utils = require('./string.utils-BG4pUfEi.js');
var array_utils = require('./array.utils-DOh1gCQS.js');
var stencil_utils = require('./stencil.utils-8sCYbm34.js');
var attribute = require('./attribute-CH1-zDDl.js');
var accessibility = require('./accessibility-BQJmIVWV.js');
require('./sizes-D5zsw2g5.js');
require('./utils-NnC78QR3.js');
require('./constants-DcKnOyW4.js');
require('./colors-DgrrxjsX.js');
require('./constants-CFAhiwqu.js');
require('./constants-357ehBFU.js');
require('./gov.log-C5EH15b_.js');
require('./helpers.types-vap8QfRH.js');

const GovFormSelect = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.govFocus = index.createEvent(this, "gov-focus");
        this.govBlur = index.createEvent(this, "gov-blur");
        this.govChange = index.createEvent(this, "gov-change");
        /**
         * Select’s size.
         */
        this.size = 'm';
        /**
         * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
         * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
         */
        this.required = false;
        /**
         * Makes the select component disabled.
         * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.
         */
        this.disabled = false;
        this.optionsState = [];
        this.inheritedAttributes = {};
        this.h = template.govHost(this.host);
        this.f = form.govForm(this.h);
        this.selectId = string_utils.createID('GovSelect');
    }
    validateSize(newValue) {
        props.validateProp(form.FormSelectSizes, newValue, form.FormSelectClass.root);
    }
    watchOptions(newValue) {
        this.optionsState = array_utils.propsValueToArray(newValue);
    }
    watchControlAttrs() {
        this.passControlAttrs();
    }
    watchValue() {
        this.markSelectedValue();
    }
    passControlAttrs() {
        this.f.passAttrToControl('size', this.size);
        this.f.passAttrToControl('invalid', template.toBoolAttr(this.invalid));
        this.f.passAttrToControl('success', template.toBoolAttr(this.success));
        this.f.passAttrToControl('disabled', template.toBoolAttr(this.disabled));
        this.f.passAttrToControl('type', 'select');
    }
    componentDidLoad() {
        this.attributeObserver = new attribute.AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(attribute.ariaAttributes);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    componentWillLoad() {
        this.validateSize(this.size);
        this.markSelectedValue();
        this.optionsState = array_utils.propsValueToArray(this.options);
        this.inheritedAttributes = accessibility.inheritAriaAttributes(this.host);
    }
    async componentDidRender() {
        this.passControlAttrs();
        this.f.passAttrToLabel('required', String(this.required));
        stencil_utils.tick(() => this.markSelectedValue());
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    markSelectedValue() {
        this.host.querySelectorAll('option').forEach((option) => {
            if (option.value === this.value) {
                option.setAttribute('selected', 'selected');
            }
            else {
                option.removeAttribute('selected');
            }
        });
    }
    render() {
        return (index.h(index.Host, { key: '784373d222b67be86b39d3ed61bfdf81d9648a36', class: form.FormSelectClass.root, size: this.size }, this.h.hasSlot('prefix') && index.h("slot", { key: '23b99e07df8d0d135c93bdd8c14556de4b4a5433', name: "prefix" }), index.h("span", { key: 'f4c931f58a53db5cc2f8379b2dc6b688bbe84bc8', class: "element" }, index.h("select", Object.assign({ key: 'e259f55116a12a7b821fac43db61b9ed35457c17', id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el) }, this.inheritedAttributes, { "aria-disabled": template.toBoolAttrIfDefined(this.disabled), "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid) }), index.h("slot", { key: '223133e692d0c7a4c2c9c4706aee2d447f37c37b' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
            var _a;
            return (index.h("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value));
        })), this.success && index.h("gov-icon", { key: '97ceacc7ec59f13a9d994dc6df3b58201b5f68ae', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && index.h("gov-icon", { key: 'bd9f33ef6da150e5a3f4a5711d41282fe35df49f', class: "validation-icon", name: "exclamation-lg", type: "components" }), index.h("gov-icon", { key: 'c5ca08441cb8f425a4e310e402d6f208c8a75e15', class: "arrow-icon", name: "chevron-down", type: "components" })), this.h.hasSlot('sufix') && index.h("slot", { key: 'af16a1bd05ed5d665888cea9a811eee2c0fe5749', name: "sufix" })));
    }
    onFocusHandler(e) {
        this.focused = true;
        this.govFocus.emit({
            component: form.FormSelectClass.root,
            originalEvent: e,
            value: this.value,
        });
    }
    onBlurHandler(e) {
        this.focused = false;
        this.govBlur.emit({
            component: form.FormSelectClass.root,
            originalEvent: e,
            value: this.value,
        });
    }
    onChangeHandler(e) {
        this.value = e.target.value;
        e.stopPropagation();
        this.govChange.emit({
            component: form.FormSelectClass.root,
            originalEvent: e,
            value: this.value,
        });
    }
    /**
     * Returns the current state of the component
     */
    async setFocus(options) {
        return this.selectRef.focus(options);
    }
    /**
     * Returns an instance of the native html select element
     */
    async getRef() {
        return this.selectRef;
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "size": ["validateSize", "watchControlAttrs"],
        "options": ["watchOptions"],
        "disabled": ["watchControlAttrs"],
        "invalid": ["watchControlAttrs"],
        "success": ["watchControlAttrs"],
        "value": ["watchValue"]
    }; }
};

exports.gov_form_select = GovFormSelect;
//# sourceMappingURL=gov-form-select.entry.cjs.js.map

//# sourceMappingURL=gov-form-select.cjs.entry.js.map