/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
import { tylIconArrowDropDown, tylIconCheckBoxOutlineBlank, tylIconCheckBox } from '@tylertech/tyler-icons/standard';
import { SelectAdapter } from './select-adapter';
import { SelectFoundation } from './select-foundation';
import { SELECT_CONSTANTS } from './select-constants';
import { OptionComponent } from '../option';
import { ListComponent, ListItemComponent } from '../../list';
import { OptionGroupComponent } from '../option-group';
import { IconComponent, IconRegistry } from '../../icon';
import { BaseSelectComponent, BASE_SELECT_CONSTANTS } from '../core';
import { CircularProgressComponent } from '../../circular-progress';
import { ScaffoldComponent } from '../../scaffold';
import { ToolbarComponent } from '../../toolbar';
import { IconButtonComponent } from '../../icon-button';
import { PopoverComponent } from '../../popover';
import { BASE_FIELD_CONSTANTS, FieldComponent, FIELD_CONSTANTS } from '../../field';
import { WithBaseField } from '../../field/base/with-base-field';
const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><label id=\"select-label\" aria-hidden=\"true\" part=\"label\"></label><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text-start\" name=\"support-text-start\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text-start\" name=\"helper-text\"></slot></forge-field></template>';
const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge-field{--_select-placeholder-color:var(--forge-select-placeholder-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_select-dense-font-size:var(--forge-select-dense-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875))}.selected-text-container{display:grid;-webkit-box-align:center;align-items:center;cursor:pointer}.selected-text,::slotted([slot=value]){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selected-text:empty::before{content:attr(placeholder);color:var(--_select-placeholder-color);font-size:.875rem}:host([disabled]) .selected-text-container{cursor:not-allowed}forge-field{display:contents}forge-field:is([dense],[density=extra-small]) .selected-text{font-size:var(--_select-dense-font-size)}';
const BaseClass = WithBaseField((BaseSelectComponent));
/**
 * @tag forge-select
 *
 * @property {string} label - The label text.
 * @property {string} placeholder - The placeholder text.
 * @property {FieldLabelPosition} labelPosition - The position of the label relative to the input area.
 * @property {FieldLabelAlignment} labelAlignment - The alignment of the label relative to the input area.
 * @property {boolean} floatLabel - Whether an inset positioned label is floated to the top of the container.
 * @property {boolean} invalid - Whether the field is in an invalid state.
 * @property {boolean} required - Whether the field is required.
 * @property {boolean} optional - Whether the field is optional.
 * @property {boolean} disabled - Whether the field is disabled.
 * @property {FieldVariant} variant - The variant of the field.
 * @property {FieldTheme} theme - The theme of the field.
 * @property {FieldShape} shape - The border radius of the field's corners.
 * @property {FieldDensity} density - The density of the field.
 * @property {boolean} dense - Whether the field is at the "extra-small" density level.
 * @property {FieldSupportTextInset} supportTextInset - Whether the field's support text is inset from either side.
 */
let SelectComponent = class SelectComponent extends BaseClass {
    static get observedAttributes() {
        return [
            ...Object.values(BASE_FIELD_CONSTANTS.observedAttributes),
            ...Object.values(SELECT_CONSTANTS.observedAttributes),
            ...Object.values(BASE_SELECT_CONSTANTS.observedAttributes)
        ];
    }
    constructor() {
        var _a;
        super();
        IconRegistry.define([tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
        attachShadowTemplate(this, template, styles);
        // Needed by WithBaseField mixin to proxy state to the field component
        const fieldEl = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FIELD_CONSTANTS.elementName);
        this.initializeFieldInstance(fieldEl);
        this._foundation = new SelectFoundation(new SelectAdapter(this));
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case SELECT_CONSTANTS.observedAttributes.OPEN:
                this.open = coerceBoolean(newValue);
                return;
            case SELECT_CONSTANTS.observedAttributes.LABEL:
                this.label = newValue;
                return;
            case SELECT_CONSTANTS.observedAttributes.PLACEHOLDER:
                this.placeholder = newValue;
                return;
        }
        super.attributeChangedCallback(name, oldValue, newValue);
    }
    get floatLabel() {
        return super.floatLabel;
    }
    set floatLabel(value) {
        this._foundation.syncFloatingLabelState({ force: value });
    }
    get density() {
        return super.density;
    }
    set density(value) {
        super.density = value;
        this._foundation.syncFloatingLabelState();
    }
    get dense() {
        return super.dense;
    }
    set dense(value) {
        super.dense = value;
        this._foundation.syncFloatingLabelState();
    }
    get disabled() {
        return super.disabled;
    }
    set disabled(value) {
        super.disabled = value;
        this._foundation.setDisabled(value);
    }
    get labelPosition() {
        return super.labelPosition;
    }
    set labelPosition(value) {
        super.labelPosition = value;
        this._foundation.syncFloatingLabelState();
    }
};
__decorate([
    FoundationProperty()
], SelectComponent.prototype, "label", void 0);
__decorate([
    FoundationProperty()
], SelectComponent.prototype, "placeholder", void 0);
SelectComponent = __decorate([
    CustomElement({
        name: SELECT_CONSTANTS.elementName,
        dependencies: [
            FieldComponent,
            OptionComponent,
            OptionGroupComponent,
            PopoverComponent,
            ListComponent,
            ListItemComponent,
            CircularProgressComponent,
            IconComponent,
            ScaffoldComponent,
            ToolbarComponent,
            IconButtonComponent
        ]
    })
], SelectComponent);
export { SelectComponent };
