@xplortech/apollo-core 0.5.2 → 1.0.0-beta.0

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

@@ -1,10 +1,67 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Event, Host, h, Prop } from '@stencil/core';
 export class XplNavItem {
+  constructor() {
+    /**
+     * @property {boolean} - Whether or not the item should control the main nav state on click
+     */
+    this.navControl = false;
+  }
+  onNavToggle() {
+    if (window.innerWidth <= 640) {
+      this.navOpen.emit(false);
+    }
+  }
   render() {
-    return (h(Host, { class: "xpl-nav-item", role: "listitem" },
+    return (h(Host, { class: "xpl-nav-item", role: "listitem", onClick: () => {
+        if (this.navControl) {
+          this.onNavToggle();
+        }
+      } },
       h("slot", { name: "link" },
         h("slot", { name: "icon" }),
         h("slot", null))));
   }
   static get is() { return "xpl-nav-item"; }
+  static get properties() { return {
+    "navControl": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "{boolean} - Whether or not the item should control the main nav state on click",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "nav-control",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "navOpen",
+      "name": "navOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "{boolean} - Emits the desired state of the navigation bar (open: true/false)",
+            "name": "event"
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Event, Prop, State, Method, } from "@stencil/core";
+import { Component, Host, h, Event, Prop, State, Method, } from '@stencil/core';
 export class XplPagination {
   constructor() {
     this.current = 1;
@@ -39,16 +39,16 @@ export class XplPagination {
     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];
+      showing = [1, 2, 3, '...', numPages - 2, numPages - 1, numPages];
     }
     else {
       showing = [
         1,
-        "...",
+        '...',
         this.current - 1,
         this.current,
         this.current + 1,
-        "...",
+        '...',
         numPages,
       ];
     }
@@ -60,10 +60,11 @@ export class XplPagination {
           h("p", null,
             "Showing ",
             h("span", null, showingFirst),
-            " to ",
+            " to",
+            ' ',
             h("span", null, showingLast),
-            " ",
-            "of ",
+            " of",
+            ' ',
             h("span", null, this.total),
             " results")),
         h("div", null,
@@ -73,13 +74,13 @@ export class XplPagination {
               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 === '...') {
+                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);
+              return (h("button", { onClick: () => this._goto(n) }, n));
             }),
             h("button", { onClick: this.goNext, class: "xpl-pagination-next" },
               h("span", null, "Next"),

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

@@ -1,25 +1,25 @@
-import { Component, Host, h, Prop, State, Event } from "@stencil/core";
-import { v4 as uuid } from "uuid";
+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,
+        '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
+          '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))));
+        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 {

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

@@ -1,11 +1,10 @@
-/// <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";
+import { v4 as uuid } from 'uuid';
+import { Component, Host, h, Prop, State } from '@stencil/core';
+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";
+  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 {
@@ -24,7 +23,7 @@ export class XplSelect {
     /**
      * Whether to allow a single choice or multiple choices.
      */
-    this.mode = "single";
+    this.mode = 'single';
     /**
      * Only used in multi-choice selects. If `true`,
      * badges representing selections that would overflow the
@@ -36,30 +35,37 @@ export class XplSelect {
     this.active = false;
     this.id = uuid();
     this.keepFocus = false;
-    this.value = "";
+    this.value = '';
+    this.displayValue = '';
     // 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) => {
+    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");
+      const select = el.closest('.xpl-select');
       if (select === null || select !== this.container) {
         this.active = false;
       }
     });
-    window.addEventListener("resize", throttle(() => {
+    window.addEventListener('resize', throttle(() => {
       this.maybeTruncateChoices();
     }, 250));
   }
+  componentDidLoad() {
+    this.dropdown = this.container.querySelector('xpl-dropdown');
+  }
   maybeTruncateChoices() {
-    if (this.mode === "single" || !this.truncate)
+    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;
+    const actualNumSelected = this.selected.filter((a) => a).length;
     for (let i = 0; i < actualNumSelected; i++) {
       visibleChoicesWidth += tagWidth(this.getDisplayValue(i));
       if (visibleChoicesWidth > containerWidth - 140)
@@ -72,88 +78,114 @@ export class XplSelect {
       visibleChoices = 1;
     this.visibleChoices = visibleChoices;
   }
+  flattenChoices() {
+    return this.choices.reduce((acc, curr) => [
+      ...acc,
+      ...(curr.groupName ? curr.options : [curr]),
+    ], []);
+  }
   getDisplayValue(i) {
-    return this.choices[i].label;
+    return this.flattenChoices()[i].label || this.flattenChoices()[i].value;
   }
   getActualValue(i) {
-    return this.choices[i].value || this.choices[i].label;
+    return this.flattenChoices()[i].value || this.flattenChoices()[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) :
-        "";
+  update() {
+    this.selected = this.flattenChoices().map(({ isSelected }) => isSelected);
+    if (this.mode === 'single') {
+      const selected = this.selected.findIndex((v) => v);
+      this.value = selected >= 0 ? this.getActualValue(selected) : '';
+      this.displayValue =
+        selected >= 0 ? this.getDisplayValue(selected) : '';
     }
-    else if (this.mode === "multi") {
-      this.value = this.selected.map((v, i) => {
-        return v ? this.getActualValue(i) : "";
-      }).filter(v => v.length > 0).join("|");
+    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,
+        'xpl-select': true,
+        'xpl-select--disabled': this.disabled,
+        'xpl-select--no-truncate': !this.truncate,
       }, onKeyDown: (e) => {
-        if (e.key === "Escape")
+        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,
+          '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,
+        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
+          '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,
+              '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) => {
+            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.selected = this.selected.map((v, j) => i === j ? false : v);
-                      this.update(this.selected);
+                      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`),
+                })
+                : 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")
+              if (e.key === 'Tab')
                 this.keepFocus = true;
             }, onClick: () => {
+              const { dropdown } = this;
               if (!this.disabled)
-                this.active = !this.active;
+                dropdown.isOpen = !dropdown.isOpen;
             } })),
-        !this.disabled && (h(XplDropdown, { active: this.active, choices: this.choices, mode: this.mode, selected: this.selected, update: (selected) => {
-            this.update(selected);
+        !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 },
+        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)),
+          this.error))),
       h("input", { type: "hidden", value: this.value })));
   }
   static get is() { return "xpl-select"; }
@@ -162,10 +194,10 @@ export class XplSelect {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DropdownChoice[]",
-        "resolved": "DropdownChoice[]",
+        "original": "SelectChoice[]",
+        "resolved": "SelectChoice[]",
         "references": {
-          "DropdownChoice": {
+          "SelectChoice": {
             "location": "global"
           }
         }
@@ -250,7 +282,7 @@ export class XplSelect {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"single\" | \"multi\"",
+        "original": "'single' | 'multi'",
         "resolved": "\"multi\" | \"single\"",
         "references": {}
       },
@@ -262,7 +294,7 @@ export class XplSelect {
       },
       "attribute": "mode",
       "reflect": false,
-      "defaultValue": "\"single\""
+      "defaultValue": "'single'"
     },
     "placeholder": {
       "type": "string",
@@ -306,6 +338,7 @@ export class XplSelect {
     "keepFocus": {},
     "selected": {},
     "value": {},
+    "displayValue": {},
     "visibleChoices": {}
   }; }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Host, Prop, State, Event, h, } from "@stencil/core";
+import { Component, Host, Prop, State, Event, h, } from '@stencil/core';
 export class XplTable {
   constructor() {
     this.areAllSelected = false;
@@ -38,7 +38,7 @@ export class XplTable {
       this.rowData.sort((a, b) => {
         const A = a[col];
         const B = b[col];
-        if (typeof A === "number" && typeof B === "number") {
+        if (typeof A === 'number' && typeof B === 'number') {
           const f = ascending ? 1 : -1;
           return A > B ? f : -f;
         }
@@ -54,13 +54,13 @@ export class XplTable {
     this.selected = new Array(this.rowData.length).fill(false);
   }
   render() {
-    let className = "xpl-table";
+    let className = 'xpl-table';
     if (this.striped)
-      className += " xpl-table--striped";
+      className += ' xpl-table--striped';
     if (this.freeze)
-      className += " xpl-table--freeze";
+      className += ' xpl-table--freeze';
     if (this.hasScrolled)
-      className += " xpl-table--has-scrolled";
+      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 },
@@ -69,18 +69,24 @@ export class XplTable {
               h("input", { checked: this.areAllSelected, id: "__xpl-table-th", 
                 // appear indeterminate when at least one but not all
                 // are selected
-                indeterminate: !this.areAllSelected &&
+                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) }),
+            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 }))));
             })));
           }))))));

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

@@ -1,30 +1,30 @@
-import { Component, Host, h, Prop, State } from "@stencil/core";
-import { v4 as uuid } from "uuid";
+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.variant = 'default';
     this.id = uuid();
   }
   render() {
-    let containerClassName = "xpl-toggle-container";
+    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";
+      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
+          '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))),
+        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)));
   }
@@ -136,7 +136,7 @@ export class XplToggle {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"default\" | \"small\"",
+        "original": "'default' | 'small'",
         "resolved": "\"default\" | \"small\"",
         "references": {}
       },
@@ -148,7 +148,7 @@ export class XplToggle {
       },
       "attribute": "variant",
       "reflect": false,
-      "defaultValue": "\"default\""
+      "defaultValue": "'default'"
     }
   }; }
   static get states() { return {

package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js

@@ -1,4 +1,4 @@
-import { Component, Event, Host, h, Prop, State } from '@stencil/core';
+import { Component, Event, Host, h, Prop, State, } from '@stencil/core';
 export class XplUtilityBar {
   constructor() {
     this.open = true;
@@ -13,13 +13,9 @@ export class XplUtilityBar {
   render() {
     return (h(Host, null,
       h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" },
-        this.navControl
-          ?
-            h("div", null,
-              h("button", { onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }),
-              h("slot", { name: "aside" }))
-          :
-            h("slot", { name: "aside" }),
+        this.navControl ? (h("div", null,
+          h("button", { onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }),
+          h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })),
         h("slot", { name: "main" }))));
   }
   static get is() { return "xpl-utility-bar"; }

package/dist/custom-elements/index.d.ts

@@ -74,6 +74,30 @@ export const XplDivider: {
   new (): XplDivider;
 };
 
+interface XplDropdown extends Components.XplDropdown, HTMLElement {}
+export const XplDropdown: {
+  prototype: XplDropdown;
+  new (): XplDropdown;
+};
+
+interface XplDropdownGroup extends Components.XplDropdownGroup, HTMLElement {}
+export const XplDropdownGroup: {
+  prototype: XplDropdownGroup;
+  new (): XplDropdownGroup;
+};
+
+interface XplDropdownHeading extends Components.XplDropdownHeading, HTMLElement {}
+export const XplDropdownHeading: {
+  prototype: XplDropdownHeading;
+  new (): XplDropdownHeading;
+};
+
+interface XplDropdownOption extends Components.XplDropdownOption, HTMLElement {}
+export const XplDropdownOption: {
+  prototype: XplDropdownOption;
+  new (): XplDropdownOption;
+};
+
 interface XplGrid extends Components.XplGrid, HTMLElement {}
 export const XplGrid: {
   prototype: XplGrid;