@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-select/cpsl-select.js

@@ -0,0 +1,631 @@
+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;
+                window.removeEventListener('click', this.handleClickOutside);
+            }
+        };
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.hasFocus = true;
+                window.addEventListener('click', this.handleClickOutside);
+            }
+        };
+        this.anchorEl = undefined;
+        this.hasFocus = false;
+        this.popoverOpen = false;
+        this.hasSelectedItem = false;
+        this.anchorElId = undefined;
+        this.autoWidth = 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 = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');
+        return (h(Host, { key: '213225e1dff5c0be9244ba840db9f36340d823c8', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: 'a11314ca36057ef2720d70365bf204211d416475', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'e2e9c237b8dccbaa4b46ddf9e55b77ff5f4f3911', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'aebc950ae782617c597767452d0eb1c0d2c31713', name: "selected-item" }), h("div", { key: '7cf714452e4c9c8b1d6163c8f85f27e83605f8d8', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '569de440845fe9b695c6d7d01509beca6cc2d9cf', 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)))), h("cpsl-icon", { key: 'e010b0ff105722fb2818ee6b9461807428878074', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), h("input", { key: 'c4046ff61d100e1340a0428272ff121fca2116e9', 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: '2bf1f90e80af6ad9027a82b06327c5dabd36ce03', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '21458247dfcbc193ddca669fd2efd5d84b389cea', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '614a8a6a0ea3432168c4846173d850dfc62be91f', class: "search-container" }, h("cpsl-input", { key: 'e472ac25a98f50b6841dd14f2c65707741047821', 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: '2c3c69610934da52ea28dffb3ff1846fd4dab71c', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '74b0bae8d2de4a33cd5178a1f8c4e5a330b52884', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: 'ba63db8cb977e363862ec31cd4d7798848a0dc4f', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '8dd1ecca150152548f5240152ee5d7f76d5bce8b' }, (_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"
+            },
+            "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",
+                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"laptop\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"optimismBrand\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"spacingHeight\" | \"star04Filled\" | \"stars01Filled\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"userCircle\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"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