@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.9

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

@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { Component, Host, h, Prop, State } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 import throttle from 'lodash.throttle';
 function tagWidth(text) {
   const context = document.createElement('canvas').getContext('2d');
@@ -9,35 +9,22 @@ function tagWidth(text) {
 }
 export class XplSelect {
   constructor() {
-    /**
-     * An array of choices for the user to choose from.
-     * Each choice should be of the form:
-     * {
-     *   label: string;
-     *   href?: string;
-     *   value?: string;
-     *   isGroupHeading?: boolean;
-     * }
-     */
     this.choices = [];
-    /**
-     * Whether to allow a single choice or multiple choices.
-     */
+    this.description = undefined;
+    this.disabled = undefined;
+    this.error = undefined;
+    this.label = undefined;
     this.mode = 'single';
-    /**
-     * Only used in multi-choice selects. If `true`,
-     * badges representing selections that would overflow the
-     * container are replaced with "+x more" (where x is the
-     * number not shown). If `false`, the container's height will
-     * adjust to show all badges representing selections.
-     */
+    this.name = undefined;
+    this.placeholder = undefined;
     this.truncate = true;
+    this.selectedValues = undefined;
     this.active = false;
     this.id = uuid();
     this.keepFocus = false;
+    this.selected = undefined;
     this.value = '';
     this.displayValue = '';
-    // infinity isn't real, it's just a mathematical construct, it can't hurt you
     this.visibleChoices = Infinity;
   }
   componentWillLoad() {
@@ -45,6 +32,27 @@ export class XplSelect {
       this.choices && this.choices.length > 0
         ? this.choices.map(() => false)
         : [];
+    if (this.selectedValues) {
+      const isSingleMode = this.mode === 'single';
+      if (isSingleMode) {
+        this.choices.forEach((choice) => {
+          const shouldBeSelected = choice.value.includes(this.selectedValues) ||
+            choice.label.includes(this.selectedValues);
+          if (shouldBeSelected)
+            choice.isSelected = true;
+        });
+      }
+      else {
+        this.choices.forEach(({ options }) => {
+          options.forEach((option) => {
+            const shouldBeSelected = this.selectedValues.includes(option.value || option.label);
+            if (shouldBeSelected)
+              option.isSelected = true;
+          });
+        });
+      }
+      this.update();
+    }
     window.addEventListener('click', (e) => {
       const el = e.target;
       const select = el.closest('.xpl-select');
@@ -107,6 +115,9 @@ export class XplSelect {
         .join('|');
     }
   }
+  handleValueStateChange(newValue) {
+    this.selectChange.emit(newValue);
+  }
   render() {
     let visibleChoices = 0;
     return (h(Host, { class: {
@@ -116,230 +127,279 @@ export class XplSelect {
       }, 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: () => {
-            this.update();
-            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 })));
+      }, 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;
+      }, type: "button" })), !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
+        this.update();
+        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", name: this.name, 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"
+  static get properties() {
+    return {
+      "choices": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DropdownItem[]",
+          "resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
+          "references": {
+            "DropdownItem": {
+              "location": "import",
+              "path": "../xpl-dropdown/dropdownoption"
+            }
           }
-        }
-      },
-      "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": "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": "[]"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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
       },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
       },
-      "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."
+      "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
       },
-      "attribute": "error",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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'"
       },
-      "attribute": "label",
-      "reflect": false
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'single' | 'multi'",
-        "resolved": "\"multi\" | \"single\"",
-        "references": {}
+      "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)"
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Whether to allow a single choice or multiple choices."
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'single'"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "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": {}
-  }; }
+      "selectedValues": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-values",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "active": {},
+      "id": {},
+      "keepFocus": {},
+      "selected": {},
+      "value": {},
+      "displayValue": {},
+      "visibleChoices": {}
+    };
+  }
+  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": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueStateChange"
+      }];
+  }
 }
+//# sourceMappingURL=xpl-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-select.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-select/xpl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuid } from 'uuid';\nimport {\n    Component,\n    Host,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport throttle from 'lodash.throttle';\nimport type { DropdownItem } from '../xpl-dropdown/dropdownoption';\n\nfunction tagWidth(text: string): number {\n    const context = document.createElement('canvas').getContext('2d');\n    context.font =\n        \"14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif\";\n    return context.measureText(text).width + 44; // = text + l/r padding + margin-right\n}\n\n@Component({\n    tag: 'xpl-select',\n})\nexport class XplSelect {\n    /**\n     * An array of choices for the user to choose from.\n     * Each choice should be of the form:\n     * {\n     *   label: string;\n     *   href?: string;\n     *   value?: string;\n     *   isGroupHeading?: boolean;\n     * }\n     */\n    @Prop() choices?: DropdownItem[] = [];\n    /**\n     * Optional text that appears below the input label.\n     */\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    /**\n     * If an empty string (attribute present with no value),\n     * will display visually as an error. If a string is\n     * included, will display visually as an error and include\n     * the value as an error message.\n     */\n    @Prop() error?: string;\n\n    /**\n     * The label that appears above the select dropdown\n     */\n    @Prop() label?: string;\n    /**\n     * Whether to allow a single choice or multiple choices.\n     */\n    @Prop() mode?: 'single' | 'multi' = 'single';\n\n    /**\n     * The name of the hidden input field that contains the selected option's value(s)\n     */\n    @Prop() name?: string;\n\n    @Prop() placeholder: string;\n    /**\n     * Only used in multi-choice selects. If `true`,\n     * badges representing selections that would overflow the\n     * container are replaced with \"+x more\" (where x is the\n     * number not shown). If `false`, the container's height will\n     * adjust to show all badges representing selections.\n     */\n    @Prop() truncate?: boolean = true;\n\n    @Prop() selectedValues?: string | string[];\n\n    /**\n     * Emits the value of the selected option in the select menu on change\n     */\n    @Event() selectChange: EventEmitter<string>;\n\n    @State() active: boolean = false;\n    @State() id: string = uuid();\n    @State() keepFocus: boolean = false;\n    @State() selected: boolean[];\n    @State() value: string = '';\n    @State() displayValue: string = '';\n    // infinity isn't real, it's just a mathematical construct, it can't hurt you\n    @State() visibleChoices: number = Infinity;\n\n    private container!: HTMLElement;\n\n    private dropdown: HTMLXplDropdownElement;\n\n    componentWillLoad() {\n        this.selected =\n            this.choices && this.choices.length > 0\n                ? this.choices.map(() => false)\n                : [];\n\n        if (this.selectedValues) {\n            const isSingleMode = this.mode === 'single';\n\n            if (isSingleMode) {\n                this.choices.forEach((choice) => {\n                    const shouldBeSelected =\n                        choice.value.includes(this.selectedValues as string) ||\n                        choice.label.includes(this.selectedValues as string);\n\n                    if (shouldBeSelected) choice.isSelected = true;\n                });\n            } else {\n                this.choices.forEach(({ options }) => {\n                    options.forEach((option) => {\n                        const shouldBeSelected = this.selectedValues.includes(\n                            option.value || option.label\n                        );\n\n                        if (shouldBeSelected) option.isSelected = true;\n                    });\n                });\n            }\n\n            this.update();\n        }\n\n        window.addEventListener('click', (e: MouseEvent) => {\n            const el = e.target as HTMLElement;\n            const select = el.closest('.xpl-select');\n            if (select === null || select !== this.container) {\n                this.active = false;\n            }\n        });\n\n        window.addEventListener(\n            'resize',\n            throttle(() => {\n                this.maybeTruncateChoices();\n            }, 250)\n        );\n    }\n    componentDidLoad() {\n        this.dropdown = this.container.querySelector('xpl-dropdown');\n    }\n\n    private maybeTruncateChoices(): void {\n        if (this.mode === 'single' || !this.truncate) return;\n\n        const containerWidth = this.container.getBoundingClientRect().width;\n\n        let visibleChoices = 0;\n        let visibleChoicesWidth = 0;\n\n        const actualNumSelected = this.selected.filter((a) => a).length;\n        for (let i = 0; i < actualNumSelected; i++) {\n            visibleChoicesWidth += tagWidth(this.getDisplayValue(i));\n            if (visibleChoicesWidth > containerWidth - 140) break;\n            visibleChoices++;\n        }\n\n        if (visibleChoices >= actualNumSelected) visibleChoices = Infinity;\n        if (visibleChoices < 1) visibleChoices = 1;\n\n        this.visibleChoices = visibleChoices;\n    }\n\n    private flattenChoices(): DropdownItem[] {\n        return this.choices.reduce(\n            (acc, curr) => [\n                ...acc,\n                ...(curr.groupName ? curr.options : [curr]),\n            ],\n            []\n        );\n    }\n    private getDisplayValue(i: number): string {\n        return this.flattenChoices()[i].label || this.flattenChoices()[i].value;\n    }\n\n    private getActualValue(i: number): string {\n        return this.flattenChoices()[i].value || this.flattenChoices()[i].label;\n    }\n\n    private update() {\n        this.selected = this.flattenChoices().map(\n            ({ isSelected }) => isSelected\n        );\n\n        if (this.mode === 'single') {\n            const selected = this.selected.findIndex((v) => v);\n            this.value = selected >= 0 ? this.getActualValue(selected) : '';\n            this.displayValue =\n                selected >= 0 ? this.getDisplayValue(selected) : '';\n        } else if (this.mode === 'multi') {\n            this.value = this.selected\n                .map((v, i) => {\n                    return v ? this.getActualValue(i) : '';\n                })\n                .filter((v) => v.length > 0)\n                .join('|');\n        }\n    }\n\n    @Watch('value')\n    handleValueStateChange(newValue) {\n        this.selectChange.emit(newValue);\n    }\n\n    render() {\n        let visibleChoices = 0;\n        return (\n            <Host\n                class={{\n                    'xpl-select': true,\n                    'xpl-select--disabled': this.disabled,\n                    'xpl-select--no-truncate': !this.truncate,\n                }}\n                onKeyDown={(e: KeyboardEvent) => {\n                    if (e.key === 'Escape') this.active = false;\n                }}\n                ref={(el) => (this.container = el as HTMLElement)}\n            >\n                {this.label || this.description ? (\n                    <label\n                        class={{\n                            'xpl-label': true,\n                            'xpl-label--disabled': this.disabled,\n                        }}\n                        htmlFor={this.id}\n                    >\n                        {this.label}\n                        {this.description && (\n                            <small\n                                class={{\n                                    'xpl-description': true,\n                                    'xpl-description--disabled': this.disabled,\n                                }}\n                            >\n                                {this.description}\n                            </small>\n                        )}\n                    </label>\n                ) : null}\n                <div\n                    class={{\n                        'xpl-input': true,\n                        'xpl-input--disabled': this.disabled,\n                        'xpl-input--error': this.error !== undefined,\n                    }}\n                >\n                    <div class=\"xpl-input-wrapper\">\n                        <div\n                            class={{\n                                'xpl-select-value': true,\n                                'xpl-select-value--active':\n                                    this.mode === 'multi' &&\n                                    this.value.length > 0,\n                                'has-value': this.value.length > 0,\n                            }}\n                        >\n                            {this.mode === 'single'\n                                ? this.displayValue || this.placeholder\n                                : this.value.length > 0\n                                ? this.selected.map((v, i) => {\n                                      if (!v) return null;\n                                      if (\n                                          visibleChoices >= this.visibleChoices\n                                      ) {\n                                          return null;\n                                      }\n                                      visibleChoices++;\n                                      return (\n                                          <xpl-tag\n                                              onClose={() => {\n                                                  this.flattenChoices().forEach(\n                                                      (v, j) => {\n                                                          if (i === j)\n                                                              v.isSelected =\n                                                                  false;\n                                                      }\n                                                  );\n                                                  const mapOptions = (\n                                                      option: DropdownItem\n                                                  ): DropdownItem => {\n                                                      option.options =\n                                                          option.groupName\n                                                              ? option.options.map(\n                                                                    mapOptions\n                                                                )\n                                                              : undefined;\n                                                      return option;\n                                                  };\n                                                  this.choices =\n                                                      this.choices.map(\n                                                          mapOptions\n                                                      );\n\n                                                  this.update();\n                                                  this.maybeTruncateChoices();\n                                              }}\n                                          >\n                                              {this.getDisplayValue(i)}\n                                          </xpl-tag>\n                                      );\n                                  })\n                                : this.placeholder}\n                            {this.visibleChoices < Infinity &&\n                                `+ ${\n                                    this.selected.filter((a) => a).length -\n                                    this.visibleChoices\n                                } more`}\n                        </div>\n                        <button\n                            disabled={this.disabled}\n                            id={this.id}\n                            onKeyDown={(e: KeyboardEvent) => {\n                                if (e.key === 'Tab') this.keepFocus = true;\n                            }}\n                            onClick={() => {\n                                const { dropdown } = this;\n                                if (!this.disabled)\n                                    dropdown.isOpen = !dropdown.isOpen;\n                            }}\n                            type=\"button\"\n                        ></button>\n                    </div>\n                    {!this.disabled && (\n                        <xpl-dropdown\n                            options={this.choices}\n                            mode={this.mode}\n                            triggerId={this.id}\n                            update={() => {\n                                this.update();\n                                this.maybeTruncateChoices();\n                            }}\n                        ></xpl-dropdown>\n                    )}\n                    {this.error !== undefined && this.error.length > 0 && (\n                        <label class=\"xpl-input-error\" htmlFor={this.id}>\n                            <svg\n                                width=\"10\"\n                                height=\"11\"\n                                viewBox=\"0 0 10 11\"\n                                fill=\"none\"\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                            >\n                                <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\" />\n                            </svg>\n                            {this.error}\n                        </label>\n                    )}\n                </div>\n                <input type=\"hidden\" name={this.name} value={this.value} />\n            </Host>\n        );\n    }\n}\n"]}