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

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,20 @@ 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.placeholder = undefined;
     this.truncate = true;
     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() {
@@ -116,230 +101,219 @@ 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;
+      } })), !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": "SelectChoice[]",
-        "resolved": "SelectChoice[]",
-        "references": {
-          "SelectChoice": {
-            "location": "import",
-            "path": "./selectchoice"
+  static get properties() {
+    return {
+      "choices": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectChoice[]",
+          "resolved": "SelectChoice[]",
+          "references": {
+            "SelectChoice": {
+              "location": "import",
+              "path": "./selectchoice"
+            }
           }
-        }
+        },
+        "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": "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}"
+      "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
       },
-      "defaultValue": "[]"
-    },
-    "description": {
-      "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": "Optional text that appears below the input label."
+      "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": "description",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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": "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."
-      },
-      "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": {}
-  }; }
+      "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": {}
+    };
+  }
 }