@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

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

@@ -1,319 +1,671 @@
-import { v4 as uuid } from 'uuid';
-import { Host, h } from '@stencil/core';
-import throttle from 'lodash.throttle';
+import { v4 as uuid } from "uuid";
+import { Fragment, h, Host, } from "@stencil/core";
+import throttle from "lodash.throttle";
 function tagWidth(text) {
-  const context = document.createElement('canvas').getContext('2d');
-  context.font =
-    "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
-  return context.measureText(text).width + 44; // = text + l/r padding + margin-right
+    const context = document.createElement('canvas').getContext('2d');
+    context.font = "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+    return context.measureText(text).width + 44;
+}
+function getDisplayValue(choice) {
+    return choice.label || choice.value;
+}
+function flattenChoices(choices) {
+    return choices.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
 }
 export class XplSelect {
-  constructor() {
-    this.choices = [];
-    this.description = undefined;
-    this.disabled = undefined;
-    this.error = undefined;
-    this.label = undefined;
-    this.mode = 'single';
-    this.placeholder = undefined;
-    this.truncate = true;
-    this.active = false;
-    this.id = uuid();
-    this.keepFocus = false;
-    this.selected = undefined;
-    this.value = '';
-    this.displayValue = '';
-    this.visibleChoices = Infinity;
-  }
-  componentWillLoad() {
-    this.selected =
-      this.choices && this.choices.length > 0
-        ? this.choices.map(() => false)
-        : [];
-    window.addEventListener('click', (e) => {
-      const el = e.target;
-      const select = el.closest('.xpl-select');
-      if (select === null || select !== this.container) {
+    constructor() {
+        this.choices = [];
+        this.selectIcon = 'chevron-down';
+        this.mode = 'single';
+        this.truncate = true;
         this.active = false;
-      }
-    });
-    window.addEventListener('resize', throttle(() => {
-      this.maybeTruncateChoices();
-    }, 250));
-  }
-  componentDidLoad() {
-    this.dropdown = this.container.querySelector('xpl-dropdown');
-  }
-  maybeTruncateChoices() {
-    if (this.mode === 'single' || !this.truncate)
-      return;
-    const containerWidth = this.container.getBoundingClientRect().width;
-    let visibleChoices = 0;
-    let visibleChoicesWidth = 0;
-    const actualNumSelected = this.selected.filter((a) => a).length;
-    for (let i = 0; i < actualNumSelected; i++) {
-      visibleChoicesWidth += tagWidth(this.getDisplayValue(i));
-      if (visibleChoicesWidth > containerWidth - 140)
-        break;
-      visibleChoices++;
+        this.id = uuid();
+        this.keepFocus = false;
+        this.visibleChoices = Infinity;
+        this.choicesState = [];
+        this.value = this.calculateValue();
+        this.dropdownOpenState = false;
+        this.container = null;
+        this.dropdown = null;
+        this.handleResizeThrottled = throttle(() => {
+            this.maybeTruncateChoices();
+        }, 250);
+        this.handleTabKeyDown = (e) => {
+            if (e.key === 'Tab')
+                this.keepFocus = true;
+        };
+        this.handleTagRemove = (tagToRemove) => {
+            const isItemMatch = (item) => ((tagToRemove === null || tagToRemove === void 0 ? void 0 : tagToRemove.value) && item.value === tagToRemove.value) ||
+                ((tagToRemove === null || tagToRemove === void 0 ? void 0 : tagToRemove.label) && item.label === tagToRemove.label);
+            this.choicesState = this.choicesState.map((choice) => {
+                var _a;
+                return (Object.assign(Object.assign({}, choice), { isSelected: isItemMatch(choice) ? false : choice.isSelected, options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: isItemMatch(option) ? false : option.isSelected }))) }));
+            });
+        };
+        this.handleDropdownScroll = (e) => {
+            const { scrollTop, scrollHeight, clientHeight } = this.dropdown.querySelector('.xpl-dropdown-list');
+            const atTop = scrollTop === 0;
+            const atBottom = scrollTop + clientHeight >= scrollHeight;
+            if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
+                e.preventDefault();
+            }
+        };
     }
-    if (visibleChoices >= actualNumSelected)
-      visibleChoices = Infinity;
-    if (visibleChoices < 1)
-      visibleChoices = 1;
-    this.visibleChoices = visibleChoices;
-  }
-  flattenChoices() {
-    return this.choices.reduce((acc, curr) => [
-      ...acc,
-      ...(curr.groupName ? curr.options : [curr]),
-    ], []);
-  }
-  getDisplayValue(i) {
-    return this.flattenChoices()[i].label || this.flattenChoices()[i].value;
-  }
-  getActualValue(i) {
-    return this.flattenChoices()[i].value || this.flattenChoices()[i].label;
-  }
-  update() {
-    this.selected = this.flattenChoices().map(({ isSelected }) => isSelected);
-    if (this.mode === 'single') {
-      const selected = this.selected.findIndex((v) => v);
-      this.value = selected >= 0 ? this.getActualValue(selected) : '';
-      this.displayValue =
-        selected >= 0 ? this.getDisplayValue(selected) : '';
+    onChoicesPropChanged(_choices) {
+        this.choicesState = this.initializeChoicesState();
     }
-    else if (this.mode === 'multi') {
-      this.value = this.selected
-        .map((v, i) => {
-        return v ? this.getActualValue(i) : '';
-      })
-        .filter((v) => v.length > 0)
-        .join('|');
+    onSelectedValuesPropChanged() {
+        this.choicesState = this.initializeChoicesState();
     }
-  }
-  render() {
-    let visibleChoices = 0;
-    return (h(Host, { class: {
-        'xpl-select': true,
-        'xpl-select--disabled': this.disabled,
-        'xpl-select--no-truncate': !this.truncate,
-      }, onKeyDown: (e) => {
-        if (e.key === 'Escape')
-          this.active = false;
-      }, ref: (el) => (this.container = el) }, this.label || this.description ? (h("label", { class: {
-        'xpl-label': true,
-        'xpl-label--disabled': this.disabled,
-      }, htmlFor: this.id }, this.label, this.description && (h("small", { class: {
-        'xpl-description': true,
-        'xpl-description--disabled': this.disabled,
-      } }, this.description)))) : null, h("div", { class: {
-        'xpl-input': true,
-        'xpl-input--disabled': this.disabled,
-        'xpl-input--error': this.error !== undefined,
-      } }, h("div", { class: "xpl-input-wrapper" }, h("div", { class: {
-        'xpl-select-value': true,
-        'xpl-select-value--active': this.mode === 'multi' &&
-          this.value.length > 0,
-        'has-value': this.value.length > 0,
-      } }, this.mode === 'single'
-      ? this.displayValue || this.placeholder
-      : this.value.length > 0
-        ? this.selected.map((v, i) => {
-          if (!v)
-            return null;
-          if (visibleChoices >= this.visibleChoices)
-            return null;
-          visibleChoices++;
-          return (h("xpl-tag", { onClose: () => {
-              this.flattenChoices().forEach((v, j) => {
-                if (i === j)
-                  v.isSelected =
-                    false;
-              });
-              const mapOptions = (option) => {
-                option.options =
-                  option.groupName
-                    ? option.options.map(mapOptions)
-                    : undefined;
-                return option;
-              };
-              this.choices =
-                this.choices.map(mapOptions);
-              this.update();
-              this.maybeTruncateChoices();
-            } }, this.getDisplayValue(i)));
-        })
-        : this.placeholder, this.visibleChoices < Infinity &&
-      `+ ${this.selected.filter((a) => a).length -
-        this.visibleChoices} more`), h("button", { disabled: this.disabled, id: this.id, onKeyDown: (e) => {
-        if (e.key === 'Tab')
-          this.keepFocus = true;
-      }, onClick: () => {
-        const { dropdown } = this;
-        if (!this.disabled)
-          dropdown.isOpen = !dropdown.isOpen;
-      } })), !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
+    onChoicesStateChanged() {
         this.update();
+    }
+    handleValueStateChange(newValue) {
+        this.selectChange.emit(newValue);
+        this.changeEvent.emit(this.mode === 'single' ? newValue : !(newValue === null || newValue === void 0 ? void 0 : newValue.length) ? [] : newValue.split('|'));
+        if (this.customDisplayValue && this.container !== null) {
+            const customDisplayElements = this.container.querySelectorAll('.custom-display-value');
+            customDisplayElements.forEach((el) => {
+                el.classList.toggle('display-active', newValue.length > 0);
+                el.classList.toggle('display-inactive', newValue.length === 0);
+            });
+            const placeholderElements = this.container.querySelectorAll('.placeholder');
+            placeholderElements.forEach((el) => {
+                el.classList.toggle('placeholder-hidden', newValue.length > 0);
+            });
+        }
+    }
+    onDropdownOpenStateChanged(newValue) {
+        this.dropdownStateChange.emit(newValue);
+    }
+    initializeChoicesState() {
+        return this.choices.map((choice) => {
+            var _a;
+            const valueToCompare = typeof this.selectedValues === 'string'
+                ? [this.selectedValues]
+                : this.selectedValues;
+            return Object.assign(Object.assign({}, choice), { isSelected: choice.isSelected || (valueToCompare === null || valueToCompare === void 0 ? void 0 : valueToCompare.includes(choice.value || choice.label)), options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: option.isSelected || (valueToCompare === null || valueToCompare === void 0 ? void 0 : valueToCompare.includes(option.value || option.label)) }))) });
+        });
+    }
+    maybeTruncateChoices() {
+        var _a, _b;
+        if (this.mode === 'single' || !this.truncate)
+            return;
+        const containerWidth = (_a = this.container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        let visibleChoices = 0;
+        let visibleChoicesWidth = 0;
+        const actualNumList = (_b = flattenChoices(this.choicesState)) === null || _b === void 0 ? void 0 : _b.filter((a) => a.isSelected);
+        if (!actualNumList.length)
+            return;
+        const actualNumSelected = actualNumList.length;
+        actualNumList.forEach((_, i) => {
+            visibleChoicesWidth += tagWidth(getDisplayValue(actualNumList[i]));
+            if (visibleChoicesWidth > containerWidth - 140) {
+                return null;
+            }
+            visibleChoices += 1;
+            return null;
+        });
+        if (visibleChoices >= actualNumSelected)
+            visibleChoices = Infinity;
+        if (visibleChoices < 1)
+            visibleChoices = 1;
+        this.visibleChoices = visibleChoices;
+    }
+    closeDropdown() {
+        var _a;
+        if (!((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+            return;
+        }
+        this.dropdown.isOpen = false;
+        this.active = false;
+    }
+    calculateValue() {
+        const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
+        if (!selectedChoices.length) {
+            return '';
+        }
+        if (this.mode === 'single') {
+            return selectedChoices[0].value || selectedChoices[0].label;
+        }
+        return selectedChoices.map((choice) => choice.value || choice.label).join('|');
+    }
+    update() {
+        this.value = this.calculateValue();
         this.maybeTruncateChoices();
-      } })), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))), h("input", { type: "hidden", value: this.value })));
-  }
-  static get is() { return "xpl-select"; }
-  static get properties() {
-    return {
-      "choices": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "SelectChoice[]",
-          "resolved": "SelectChoice[]",
-          "references": {
-            "SelectChoice": {
-              "location": "import",
-              "path": "./selectchoice"
+    }
+    renderLabel() {
+        if (!this.label && !this.description)
+            return null;
+        return (h("label", { class: {
+                'xpl-label': true,
+                'xpl-label--disabled': this.disabled,
+            }, htmlFor: this.id }, this.label, this.description && (h("small", { class: {
+                'xpl-description': true,
+                'xpl-description--disabled': this.disabled,
+            } }, this.description))));
+    }
+    renderSelectedTags() {
+        let visibleChoices = 0;
+        const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
+        if (!selectedChoices.length) {
+            return null;
+        }
+        const tags = selectedChoices.map((_, i) => {
+            if (visibleChoices >= this.visibleChoices)
+                return null;
+            visibleChoices += 1;
+            return (h("xpl-tag", { onClose: () => this.handleTagRemove(selectedChoices[i]) }, getDisplayValue(selectedChoices[i])));
+        });
+        return tags;
+    }
+    renderError() {
+        if (this.error === undefined || this.error.length === 0)
+            return null;
+        return (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("xpl-icon", { icon: "alert-circle" }), this.error));
+    }
+    componentWillLoad() {
+        this.choicesState = this.initializeChoicesState();
+    }
+    handleClickEvent(e) {
+        const el = e.target;
+        const select = el.closest('.xpl-select');
+        if (select === null || select !== this.container) {
+            this.closeDropdown();
+        }
+    }
+    handleKeyDown(e) {
+        var _a;
+        if (e.key === 'Escape' &&
+            (this.active || ((_a = this.container) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)))) {
+            this.closeDropdown();
+        }
+    }
+    handleResize() {
+        this.handleResizeThrottled();
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.maybeTruncateChoices();
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.handleResizeThrottled) === null || _a === void 0 ? void 0 : _a.cancel();
+    }
+    handleDropdownTrigger() {
+        var _a;
+        const prevState = (_a = this.dropdown.isOpen) !== null && _a !== void 0 ? _a : false;
+        const nextState = !prevState;
+        const e = this.triggerDropdown.emit({
+            prevState,
+            nextState,
+        });
+        if (!e.defaultPrevented && !this.disabled) {
+            this.dropdownOpenState = nextState;
+            this.dropdown.isOpen = nextState;
+        }
+    }
+    async reset() {
+        this.closeDropdown();
+        this.choicesState = this.choicesState.map((choice) => {
+            var _a;
+            return (Object.assign(Object.assign({}, choice), { isSelected: false, options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: false }))) }));
+        });
+    }
+    render() {
+        var _a, _b, _c;
+        const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
+        const displayedValue = ((_a = selectedChoices[0]) === null || _a === void 0 ? void 0 : _a.label) || ((_b = selectedChoices[0]) === null || _b === void 0 ? void 0 : _b.value);
+        const isTextTruncated = selectedChoices.length > 1 &&
+            this.visibleChoices < Infinity &&
+            this.truncate &&
+            !this.customDisplayValue;
+        const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
+        return (h(Host, { key: '8ffd6b069df2b869abfa22ae5e41731a992abe36', class: {
+                'xpl-select': true,
+                'xpl-select--disabled': this.disabled,
+                'xpl-select--no-truncate': !this.truncate,
+                [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
+            }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
+                this.container = el;
+            } }, this.renderLabel(), h("div", { key: 'ed959919397c5c2ffc063957188e00a10feeed9a', class: {
+                'xpl-input': true,
+                'xpl-input--disabled': this.disabled,
+                'xpl-input--error': this.error !== undefined,
+            } }, h("div", { key: '266e7d99a66d66241ebe1d20375d0a270b8b6399', class: "xpl-input-wrapper" }, h("button", { key: 'cdb455539afb77ab76f729e8a21419d32c220a75', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+                e.preventDefault();
+                this.handleDropdownTrigger();
+            }, type: "button" }, h("div", { key: 'db9e85fa588af2c35d3de960826c171bc02627af', class: {
+                'xpl-select-value': true,
+                'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
+                'has-value': this.value.length > 0,
+            } }, (() => {
+            if (this.customDisplayValue) {
+                return (h(Fragment, null, h("div", { class: {
+                        'custom-display-value': true,
+                        'custom-display-value--inactive': this.value.length === 0,
+                    } }, h("slot", { name: "custom-display-value" })), h("span", { class: {
+                        'xpl-placeholder--hidden': this.value.length > 0,
+                    } }, this.placeholder)));
+            }
+            if (this.mode === 'single') {
+                return displayedValue || this.placeholder;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An array of choices for the user to choose from.\nEach choice should be of the form:\n{\n  label: string;\n  href?: string;\n  value?: string;\n  isGroupHeading?: boolean;\n}"
-        },
-        "defaultValue": "[]"
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional text that appears below the input label."
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message."
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'single' | 'multi'",
-          "resolved": "\"multi\" | \"single\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether to allow a single choice or multiple choices."
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'single'"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "truncate": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Only used in multi-choice selects. If `true`,\nbadges representing selections that would overflow the\ncontainer are replaced with \"+x more\" (where x is the\nnumber not shown). If `false`, the container's height will\nadjust to show all badges representing selections."
-        },
-        "attribute": "truncate",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "active": {},
-      "id": {},
-      "keepFocus": {},
-      "selected": {},
-      "value": {},
-      "displayValue": {},
-      "visibleChoices": {}
-    };
-  }
+            if (this.value.length > 0) {
+                return this.renderSelectedTags();
+            }
+            return this.placeholder;
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: 'ef3997f19a4e4bb4de12f826c736ef9afc4bd5c8', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: 'df29a0a21c11fa4c9a550a4339c6719793783404', ref: (el) => {
+                this.dropdown = el;
+            }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
+                const { options } = component;
+                if (options && options.length > 0) {
+                    this.choicesState = options;
+                }
+            }, onIsOpenChange: (e) => {
+                this.dropdownOpenState = e.detail;
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: '3e7f53a0d8e6d4e8028e1dc38d0e3661b76978f5', type: "hidden", name: this.name, value: this.value })));
+    }
+    static get is() { return "xpl-select"; }
+    static get properties() {
+        return {
+            "choices": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownItem[]",
+                    "resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
+                    "references": {
+                        "DropdownItem": {
+                            "location": "import",
+                            "path": "../xpl-dropdown/dropdown-option",
+                            "id": "src/components/components/xpl-dropdown/dropdown-option.ts::DropdownItem",
+                            "referenceLocation": "DropdownItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of choices for the user to choose from.\nEach choice should be of the form:\n{\n  label: string;\n  href?: string;\n  value?: string;\n  isGroupHeading?: boolean;\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  options?: DropdownItem[];\n  groupName?: string;\n}"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "IconName": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-select/xpl-select.tsx",
+                            "id": "src/components/components/xpl-select/xpl-select.tsx::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display in the select trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-icon",
+                "defaultValue": "'chevron-down'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional text that appears below the input label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label that appears above the select dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'multi'",
+                    "resolved": "\"multi\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to allow a single choice or multiple choices."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'single'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the hidden input field that contains the selected option's value(s)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text that appears when the field has no value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "truncate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Only used in multi-choice selects. If `true`,\nbadges representing selections that would overflow the\ncontainer are replaced with \"+x more\" (where x is the\nnumber not shown). If `false`, the container's height will\nadjust to show all badges representing selections."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "truncate",
+                "defaultValue": "true"
+            },
+            "customDisplayValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, enables custom display value rendering via slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-display-value"
+            },
+            "selectedValues": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value(s) currently selected in the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-values"
+            },
+            "classNames": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The class name to apply to the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class-names"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {},
+            "id": {},
+            "keepFocus": {},
+            "visibleChoices": {},
+            "choicesState": {},
+            "value": {},
+            "dropdownOpenState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectChange",
+                "name": "selectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the value of the selected option in the select menu on change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "changeEvent",
+                "name": "changeEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the value of the selected option in the select menu on change"
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "dropdownStateChange",
+                "name": "dropdownStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the dropdown opens or closes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "triggerDropdown",
+                "name": "triggerDropdown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits before the dropdown state changes, allowing listeners to prevent the default behavior.\nThe event detail contains the previous and new dropdown states."
+                },
+                "complexType": {
+                    "original": "{\n        prevState: boolean;\n        nextState: boolean;\n    }",
+                    "resolved": "{ prevState: boolean; nextState: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the select component to its initial state with no selections.\nThis clears all selected values and returns the component to its default state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "choices",
+                "methodName": "onChoicesPropChanged"
+            }, {
+                "propName": "selectedValues",
+                "methodName": "onSelectedValuesPropChanged"
+            }, {
+                "propName": "choicesState",
+                "methodName": "onChoicesStateChanged"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueStateChange"
+            }, {
+                "propName": "dropdownOpenState",
+                "methodName": "onDropdownOpenStateChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }