@xplortech/apollo-core 0.5.2 → 0.5.3

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

@@ -1,311 +0,0 @@
-/// <reference path="../xpl-dropdown/dropdownchoice.d.ts"></reference>
-import { v4 as uuid } from "uuid";
-import { Component, Host, h, Prop, State } from "@stencil/core";
-import { XplDropdown } from "../xpl-dropdown/xpl-dropdown";
-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
-}
-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.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.truncate = true;
-    this.active = false;
-    this.id = uuid();
-    this.keepFocus = false;
-    this.value = "";
-    // infinity isn't real, it's just a mathematical construct, it can't hurt you
-    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) {
-        this.active = false;
-      }
-    });
-    window.addEventListener("resize", throttle(() => {
-      this.maybeTruncateChoices();
-    }, 250));
-  }
-  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++;
-    }
-    if (visibleChoices >= actualNumSelected)
-      visibleChoices = Infinity;
-    if (visibleChoices < 1)
-      visibleChoices = 1;
-    this.visibleChoices = visibleChoices;
-  }
-  getDisplayValue(i) {
-    return this.choices[i].label;
-  }
-  getActualValue(i) {
-    return this.choices[i].value || this.choices[i].label;
-  }
-  update(selected) {
-    this.selected = selected;
-    if (this.mode === "single") {
-      const selected = this.selected.findIndex(v => v);
-      this.value = selected >= 0 ?
-        this.getActualValue(selected) :
-        "";
-    }
-    else if (this.mode === "multi") {
-      this.value = this.selected.map((v, i) => {
-        return v ? this.getActualValue(i) : "";
-      }).filter(v => v.length > 0).join("|");
-    }
-  }
-  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.value || 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.selected = this.selected.map((v, j) => i === j ? false : v);
-                      this.update(this.selected);
-                      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: () => {
-              if (!this.disabled)
-                this.active = !this.active;
-            } })),
-        !this.disabled && (h(XplDropdown, { active: this.active, choices: this.choices, mode: this.mode, selected: this.selected, update: (selected) => {
-            this.update(selected);
-            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": "DropdownChoice[]",
-        "resolved": "DropdownChoice[]",
-        "references": {
-          "DropdownChoice": {
-            "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
-    },
-    "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": {},
-    "visibleChoices": {}
-  }; }
-}

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

@@ -1,194 +0,0 @@
-import { Component, Host, Prop, State, Event, h, } from "@stencil/core";
-export class XplTable {
-  constructor() {
-    this.areAllSelected = false;
-    this.hasScrolled = false;
-    this.selectAll = (e) => {
-      const { target } = e;
-      if (!(target instanceof HTMLInputElement))
-        return;
-      const { checked } = target;
-      this.areAllSelected = checked;
-      this.selected = this.selected.map(() => checked);
-      this.onChange();
-    };
-    this.selectOne = (e, i) => {
-      const { target } = e;
-      if (!(target instanceof HTMLInputElement))
-        return;
-      const { checked } = target;
-      this.areAllSelected = false;
-      this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));
-      this.onChange();
-    };
-    this.onChange = () => {
-      this.tableSelect.emit({
-        selected: this.selected,
-        areAllSelected: this.areAllSelected,
-      });
-    };
-    this.onScroll = () => {
-      this.hasScrolled = this.container.scrollLeft > 0;
-    };
-    /**
-     * TODO: Need to figure out how this interplays with data
-     * received from an API/server
-     */
-    this.sortBy = (col, ascending = true) => {
-      this.rowData.sort((a, b) => {
-        const A = a[col];
-        const B = b[col];
-        if (typeof A === "number" && typeof B === "number") {
-          const f = ascending ? 1 : -1;
-          return A > B ? f : -f;
-        }
-        return -1;
-      });
-      this.rowData = Array.from(this.rowData);
-      this.render();
-    };
-  }
-  componentWillLoad() {
-    this.areAllSelected = false;
-    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-    this.selected = new Array(this.rowData.length).fill(false);
-  }
-  render() {
-    let className = "xpl-table";
-    if (this.striped)
-      className += " xpl-table--striped";
-    if (this.freeze)
-      className += " xpl-table--freeze";
-    if (this.hasScrolled)
-      className += " xpl-table--has-scrolled";
-    return (h(Host, null,
-      h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) },
-        h("table", { class: className },
-          this.columns && (h("thead", null, this.columns.map((column, i) => {
-            return (h("th", null, this.multiselect && i === 0 ? (h("label", { htmlFor: "__xpl-table-th" },
-              h("input", { checked: this.areAllSelected, id: "__xpl-table-th", 
-                // appear indeterminate when at least one but not all
-                // are selected
-                indeterminate: !this.areAllSelected &&
-                  this.selected.some((a) => a), onChange: (e) => {
-                  this.selectAll(e);
-                }, type: "checkbox" }),
-              column)) : (column)));
-          }))),
-          h("tbody", null, this.rowData.map((row, rowNum) => {
-            return (h("tr", { class: this.selected && this.selected[rowNum]
-                ? "xpl-table-row-selected"
-                : "" }, row.map((cell, i) => {
-              return (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: "__xpl-table-row-" + rowNum },
-                h("input", { id: "__xpl-table-row-" + rowNum, checked: this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }),
-                h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))));
-            })));
-          }))))));
-  }
-  static get is() { return "xpl-table"; }
-  static get properties() { return {
-    "columns": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "freeze": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "freeze",
-      "reflect": false
-    },
-    "multiselect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "multiselect",
-      "reflect": false
-    },
-    "striped": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "striped",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "areAllSelected": {},
-    "rowData": {},
-    "hasScrolled": {},
-    "selected": {}
-  }; }
-  static get events() { return [{
-      "method": "tableSelect",
-      "name": "tableSelect",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}

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

@@ -1,30 +0,0 @@
-import { Component, Host, h, Event } from '@stencil/core';
-export class XplTag {
-  render() {
-    return (h(Host, { class: "xpl-tag-container" },
-      h("button", { class: "xpl-tag", onClick: () => {
-          this.close.emit();
-        } },
-        h("slot", null)),
-      h("button", { class: "xpl-tag__close", onClick: () => {
-          this.close.emit();
-        } }, "\u00D7")));
-  }
-  static get is() { return "xpl-tag"; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}

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

@@ -1,157 +0,0 @@
-import { Component, Host, h, Prop, State } from "@stencil/core";
-import { v4 as uuid } from "uuid";
-export class XplToggle {
-  constructor() {
-    /**
-     * The size of the toggle -- `default` or `small`
-     */
-    this.variant = "default";
-    this.id = uuid();
-  }
-  render() {
-    let containerClassName = "xpl-toggle-container";
-    if (this.disabled)
-      containerClassName += " xpl-toggle-container--disabled";
-    let className = "xpl-toggle";
-    if (this.variant === "small")
-      className += " xpl-toggle--small";
-    return (h(Host, { class: containerClassName },
-      (this.heading || this.description) && (h("label", { class: {
-          "xpl-label": true,
-          "xpl-label--disabled": this.disabled
-        }, htmlFor: this.id },
-        this.heading,
-        this.description && h("small", { class: {
-            "xpl-description": true,
-            "xpl-description--disabled": this.disabled
-          } }, this.description))),
-      h("input", { class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }),
-      this.label && h("label", { htmlFor: this.id }, this.label)));
-  }
-  static get is() { return "xpl-toggle"; }
-  static get properties() { return {
-    "checked": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "checked",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The toggle's description appears *above* the toggle."
-      },
-      "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
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The toggle's heading appears *above* the toggle."
-      },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The toggle's label appears *to the right of* the toggle."
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"default\" | \"small\"",
-        "resolved": "\"default\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The size of the toggle -- `default` or `small`"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "\"default\""
-    }
-  }; }
-  static get states() { return {
-    "id": {}
-  }; }
-}