import { Host, h } from "@stencil/core";
export class CpslSelect {
    constructor() {
        this.inputId = `cpsl-select-${inputIds++}`;
        this.onBlur = (ev) => {
            this.hasFocus = false;
            this.popoverEl.closePopover();
            this.cpslBlur.emit(ev);
        };
        this.onFocus = (ev) => {
            this.hasFocus = true;
            this.cpslFocus.emit(ev);
        };
        this.handleEnterPress = (ev) => {
            if (ev.key === 'Enter') {
                ev.preventDefault();
                this.el.dispatchEvent(new MouseEvent('mousedown'));
            }
        };
        this.selectItem = () => {
            var _a;
            const items = Array.from(this.el.querySelectorAll('cpsl-select-item'));
            items.forEach(item => {
                var _a;
                if (typeof this.selectedValue === 'string') {
                    if (item.value === this.selectedValue) {
                        item.setAttribute('selected', 'true');
                    }
                    else {
                        item.setAttribute('selected', 'false');
                    }
                }
                else {
                    if ((_a = this.selectedValue) === null || _a === void 0 ? void 0 : _a.includes(item.value)) {
                        item.setAttribute('selected', 'true');
                    }
                    else {
                        item.setAttribute('selected', 'false');
                    }
                }
            });
            this.hasSelectedItem = typeof this.selectedValue === 'string' ? !!this.selectedValue : !!((_a = this.selectedValue) === null || _a === void 0 ? void 0 : _a.length);
        };
        this.handleClickOutside = (event) => {
            if (this.hasFocus && !this.el.contains(event.target)) {
                this.hasFocus = false;
                typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
            }
        };
        this.handleClick = (e) => {
            var _a;
            const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
            if (targetId === 'ignore-click') {
                return;
            }
            if (!this.disabled) {
                this.hasFocus = true;
                typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
            }
        };
        this.anchorEl = undefined;
        this.hasFocus = false;
        this.popoverOpen = false;
        this.hasSelectedItem = false;
        this.anchorElId = undefined;
        this.autoWidth = false;
        this.alignCenter = false;
        this.disabled = false;
        this.dropdownMaxHeight = undefined;
        this.errorText = undefined;
        this.formatValue = undefined;
        this.helperText = undefined;
        this.id = `${this.inputId}-trigger`;
        this.icon = 'chevronUp';
        this.label = undefined;
        this.multiple = undefined;
        this.noIconAnimation = undefined;
        this.placeholder = undefined;
        this.required = false;
        this.selectedValue = undefined;
        this.showFormattedSelectedItem = undefined;
        this.showOptionalLabel = false;
        this.showSearch = false;
        this.searchPlaceholder = undefined;
        this.selectedItemColor = 'primary';
        this.selectedItemVariant = 'bodyM';
        this.selectedItemWeight = 'regular';
    }
    onValueChange() {
        if (!this.multiple) {
            this.popoverEl.closePopover();
        }
    }
    handleValueChange() {
        this.selectItem();
    }
    selectItemClickHandler(event) {
        this.cpslSelectValueChange.emit(event.detail);
    }
    onPopoverOpen() {
        this.popoverOpen = true;
    }
    onPopoverClose() {
        this.popoverOpen = false;
    }
    componentDidLoad() {
        this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
        this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');
        this.selectItem();
    }
    render() {
        var _a, _b, _c, _d, _e;
        const selectedValueAsString = Array.isArray(this.selectedValue) ? this.selectedValue.join(', ') : this.selectedValue;
        return (h(Host, { key: '6dc906dbe50086aa8c7fa422e60818d639414777', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: '37d5d5bccea5e77e86586e9cd64386060913c95d', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '218f32839c29ae5d822b93aeed3cdecb8d438abf', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onClick: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '0a7533bb7431d18d25e3fd1f45a208ef5f751ffa', name: "selected-item" }), h("div", { key: 'ff5886e01acf82bd78dad8db7a372b462b7dd1b6', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '0acdbbaa034fed2b4d7daf4c27522f58b26f46d9', class: { 'selected-text': true, 'placeholder': !this.selectedValue }, part: "selected-text", color: this.selectedItemColor, variant: this.selectedItemVariant, weight: this.selectedItemWeight }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : selectedValueAsString)))), this.icon && this.icon !== null && (h("cpsl-icon", { key: 'ec060c8f306b76575c073f0b10a9cfb037784a23', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon })), h("input", { key: '8443ce8e3f0e952b12e66686b11ec83a3a3986f4', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), h("cpsl-popover", { key: '5094f8e466b39f98ad42ee4d585381d9072b15be', part: "popover", autoWidth: this.autoWidth, alignCenter: this.alignCenter, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'd25b7dcb7712d977817d80d7d64b51275d2f2836', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: 'e7c28b844cb87339e42e5889036ad23816dba245', class: "search-container" }, h("cpsl-input", { key: 'a163fddbe94d0879db37c1e7ea29b3f24c6272a6', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
                e.stopPropagation();
                this.cpslSearchChange.emit(e.detail.value);
            } }))), h("div", { key: '14b0ce4fc71cb82aa9a8f639c7b51772cb4661c1', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'afb08ac353a11be8b89f16884ed6509e21be2f6d', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: 'b68520ddb728e5601fff5082d772d2fedc761850', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'fd953ec9c15f952feb64f56b60f933d3a4223d1c' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
    }
    static get is() { return "cpsl-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-select.css"]
        };
    }
    static get properties() {
        return {
            "anchorElId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "ID of element to anchor popover to."
                },
                "attribute": "anchor-el-id",
                "reflect": false
            },
            "autoWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\nDefault is `false`"
                },
                "attribute": "auto-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "alignCenter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the popover will be aligned to the center of the trigger element.\nDefault is `false`."
                },
                "attribute": "align-center",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot interact with the input."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "dropdownMaxHeight": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the max height of the dropdown."
                },
                "attribute": "dropdown-max-height",
                "reflect": false
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Error text to show below the input. If this is provided the input will enter an error state."
                },
                "attribute": "error-text",
                "reflect": false
            },
            "formatValue": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(value: string | string[]) => string",
                    "resolved": "(value: string | string[]) => string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Format value for display when selected."
                }
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Helper text to show below the input. If `\"errorText\"` is provided that will take precedence."
                },
                "attribute": "helper-text",
                "reflect": false
            },
            "id": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ID of the element, must be unique for the popover trigger."
                },
                "attribute": "id",
                "reflect": false,
                "defaultValue": "`${this.inputId}-trigger`"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconType | null",
                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowCircleDown\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backpack\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"beraBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"coinbase\" | \"copy07\" | \"copy\" | \"cosmosCircle\" | \"cosmos\" | \"cosmostation\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dotsSquare\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"glow\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"haha\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"keplr\" | \"key\" | \"laptop\" | \"leap\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"metamask\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"okx\" | \"optimismBrand\" | \"paraArrow\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phantom\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rabby\" | \"rainbow\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"safe\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solanaCircle\" | \"solana\" | \"solflare\" | \"spacingHeight\" | \"star04Filled\" | \"star05\" | \"stars01Filled\" | \"stars02\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"user01\" | \"userCircle\" | \"userPlus\" | \"user\" | \"valora\" | \"wallet02\" | \"walletConnect\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"zerion\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                    "references": {
                        "IconType": {
                            "location": "import",
                            "path": "../../interface.js",
                            "id": "src/interface.ts::IconType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name of the icon to use for the end icon.\nDefault: `chevronUp`"
                },
                "attribute": "icon",
                "reflect": false,
                "defaultValue": "'chevronUp'"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label for the input."
                },
                "attribute": "label",
                "reflect": false
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user can select more than one value."
                },
                "attribute": "multiple",
                "reflect": false
            },
            "noIconAnimation": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to show the rotation animation for the end icon."
                },
                "attribute": "no-icon-animation",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Placeholder to display if `selectedValue` is empty."
                },
                "attribute": "placeholder",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user must fill in a value before submitting a form."
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "selectedValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | string[]",
                    "resolved": "string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Value of the selected item."
                },
                "attribute": "selected-value",
                "reflect": false
            },
            "showFormattedSelectedItem": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value."
                },
                "attribute": "show-formatted-selected-item",
                "reflect": false
            },
            "showOptionalLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the label will display an \"optional\" tag."
                },
                "attribute": "show-optional-label",
                "reflect": false,
                "defaultValue": "false"
            },
            "showSearch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the dropdown will contain a search field."
                },
                "attribute": "show-search",
                "reflect": false,
                "defaultValue": "false"
            },
            "searchPlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Placeholder for the search field."
                },
                "attribute": "search-placeholder",
                "reflect": false
            },
            "selectedItemColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast'",
                    "resolved": "\"contrast\" | \"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\" | \"tertiary\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The color of the selected item or placeholder text.\nOptions are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
                },
                "attribute": "selected-item-color",
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "selectedItemVariant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL'",
                    "resolved": "\"body2XS\" | \"bodyL\" | \"bodyM\" | \"bodyS\" | \"bodyXL\" | \"bodyXS\" | \"heading2XL\" | \"headingL\" | \"headingM\" | \"headingS\" | \"headingXL\" | \"headingXS\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the selected item or placeholder text.\nOptions are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\nDefault is: `\"bodyM\"`."
                },
                "attribute": "selected-item-variant",
                "reflect": false,
                "defaultValue": "'bodyM'"
            },
            "selectedItemWeight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'regular' | 'medium' | 'semiBold' | 'bold'",
                    "resolved": "\"bold\" | \"medium\" | \"regular\" | \"semiBold\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The weight of the selected item or placeholder text.\nOptions are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\nDefault is: `\"regular\"`."
                },
                "attribute": "selected-item-weight",
                "reflect": false,
                "defaultValue": "'regular'"
            }
        };
    }
    static get states() {
        return {
            "anchorEl": {},
            "hasFocus": {},
            "popoverOpen": {},
            "hasSelectedItem": {}
        };
    }
    static get events() {
        return [{
                "method": "cpslBlur",
                "name": "cpslBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input loses focus."
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "cpslFocus",
                "name": "cpslFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input has focus."
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "cpslSelectValueChange",
                "name": "cpslSelectValueChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the value changes."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "cpslSearchChange",
                "name": "cpslSearchChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the search value changes."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "selectedValue",
                "methodName": "onValueChange"
            }, {
                "propName": "selectedValue",
                "methodName": "handleValueChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "cpslSelectItemClick",
                "method": "selectItemClickHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "cpslOpen",
                "method": "onPopoverOpen",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "cpslClose",
                "method": "onPopoverClose",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
let inputIds = 0;
//# sourceMappingURL=cpsl-select.js.map
