@xplortech/apollo-core 1.0.0-beta.17 → 1.0.0-beta.2

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

@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { Host, h, } from '@stencil/core';
+import { Component, Host, h, Prop, State } from '@stencil/core';
 import throttle from 'lodash.throttle';
 function tagWidth(text) {
   const context = document.createElement('canvas').getContext('2d');
@@ -9,22 +9,35 @@ 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 = [];
-    this.description = undefined;
-    this.disabled = undefined;
-    this.error = undefined;
-    this.label = undefined;
+    /**
+     * Whether to allow a single choice or multiple choices.
+     */
     this.mode = 'single';
-    this.name = undefined;
-    this.placeholder = undefined;
+    /**
+     * 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.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() {
@@ -32,27 +45,6 @@ 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');
@@ -115,9 +107,6 @@ export class XplSelect {
         .join('|');
     }
   }
-  handleValueStateChange(newValue) {
-    this.selectChange.emit(newValue);
-  }
   render() {
     let visibleChoices = 0;
     return (h(Host, { class: {
@@ -127,279 +116,229 @@ 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;
-      }, 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 })));
+      }, 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 })));
   }
   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/dropdownoption"
-            }
+  static get properties() { return {
+    "choices": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SelectChoice[]",
+        "resolved": "SelectChoice[]",
+        "references": {
+          "SelectChoice": {
+            "location": "global"
           }
-        },
-        "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
+      "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}"
       },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false
+      "defaultValue": "[]"
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "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
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional text that appears below the input label."
       },
-      "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
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "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'"
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "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
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "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."
       },
-      "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"
+      "attribute": "error",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "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"
-      }];
-  }
+      "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": {}
+  }; }
 }
-//# sourceMappingURL=xpl-select.js.map