@xplortech/apollo-core 0.4.1 → 0.5.0

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

@@ -1,189 +0,0 @@
-import { Component, Host, h, Event, Prop, State, Method, } from "@stencil/core";
-export class XplPagination {
-  constructor() {
-    this.current = 1;
-    /**
-     * Private `_goto` method respects the `waitForCallback` prop --
-     * it will always emit the `page` event, but won't actually update
-     * the state of what the current page is, leaving that to the caller
-     * to update once (presumably) some other data has loaded.
-     */
-    this._goto = (n) => {
-      this.page.emit(n);
-      if (!this.waitForCallback) {
-        this.current = n;
-      }
-    };
-    this.goPrev = () => {
-      if (this.current > 1)
-        this._goto(this.current - 1);
-    };
-    this.goNext = () => {
-      const numPages = Math.ceil(this.total / this.perPage);
-      if (this.current < numPages)
-        this._goto(this.current + 1);
-    };
-  }
-  /**
-   * Calling `goto` with a page number (which should probably be
-   * taken from the `page` event) updates the pagination's state
-   * and re-renders it, showing the appropriate buttons given the current page.
-   * @param n
-   */
-  async goto(n) {
-    this.current = n;
-  }
-  render() {
-    const numPages = Math.ceil(this.total / this.perPage);
-    let showing = [1];
-    if (numPages < 7)
-      showing = [1, 2, 3, 4, 5, 6];
-    if (this.current <= 3 || this.current >= numPages - 2) {
-      showing = [1, 2, 3, "...", numPages - 2, numPages - 1, numPages];
-    }
-    else {
-      showing = [
-        1,
-        "...",
-        this.current - 1,
-        this.current,
-        this.current + 1,
-        "...",
-        numPages,
-      ];
-    }
-    const showingFirst = (this.current - 1) * this.perPage + 1;
-    const showingLast = Math.min(showingFirst + this.perPage - 1, this.total);
-    return (h(Host, null,
-      h("div", { class: "xpl-pagination" },
-        h("div", null,
-          h("p", null,
-            "Showing ",
-            h("span", null, showingFirst),
-            " to ",
-            h("span", null, showingLast),
-            " ",
-            "of ",
-            h("span", null, this.total),
-            " results")),
-        h("div", null,
-          h("nav", { "aria-label": "Pagination" },
-            h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" },
-              h("span", null, "Previous"),
-              h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" },
-                h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))),
-            showing.map((n) => {
-              if (n === "...") {
-                return h("span", { class: "xpl-pagination-ellipsis" }, "...");
-              }
-              if (n === this.current) {
-                return (h("button", { "aria-current": "page", class: "xpl-pagination-current" }, n));
-              }
-              return h("button", { onClick: () => this._goto(n) }, n);
-            }),
-            h("button", { onClick: this.goNext, class: "xpl-pagination-next" },
-              h("span", null, "Next"),
-              h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" },
-                h("path", { "fill-rule": "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clip-rule": "evenodd" }))))))));
-  }
-  static get is() { return "xpl-pagination"; }
-  static get properties() { return {
-    "total": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "total",
-      "reflect": false
-    },
-    "perPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "per-page",
-      "reflect": false
-    },
-    "waitForCallback": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "wait-for-callback",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "current": {}
-  }; }
-  static get events() { return [{
-      "method": "page",
-      "name": "page",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "goto": {
-      "complexType": {
-        "signature": "(n: number) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "text": "n",
-                "name": "param"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Calling `goto` with a page number (which should probably be\ntaken from the `page` event) updates the pagination's state\nand re-renders it, showing the appropriate buttons given the current page.",
-        "tags": [{
-            "name": "param",
-            "text": "n"
-          }]
-      }
-    }
-  }; }
-}

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

@@ -1,168 +0,0 @@
-import { Component, Host, h, Prop, State, Event } from "@stencil/core";
-import { v4 as uuid } from "uuid";
-export class XplRadio {
-  constructor() {
-    this.id = uuid();
-  }
-  render() {
-    return (h(Host, { class: {
-        "xpl-checkbox-radio-container": true,
-        "styled": this.styled,
-        "disabled": this.disabled,
-      } },
-      h("input", { class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, value: this.value, onChange: () => this.radioChange.emit(true) }),
-      h("label", { class: {
-          "xpl-label": true,
-          "xpl-label--disabled": this.disabled
-        }, htmlFor: this.id },
-        h("slot", null),
-        this.description && h("small", { class: {
-            "xpl-description": true,
-            "xpl-description--disabled": this.disabled
-          } }, this.description))));
-  }
-  static get is() { return "xpl-radio"; }
-  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": ""
-      },
-      "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
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false
-    },
-    "styled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "styled",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "id": {}
-  }; }
-  static get events() { return [{
-      "method": "radioChange",
-      "name": "radioChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "private"
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}

package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js

@@ -1,9 +0,0 @@
-import { Component, Host, h } from '@stencil/core';
-export class XplSecondaryNav {
-  render() {
-    return (h(Host, { class: "xpl-secondary-nav" },
-      h("nav", { "aria-label": "Secondary Nav" },
-        h("slot", null))));
-  }
-  static get is() { return "xpl-secondary-nav"; }
-}

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": {}
-  }; }
-}