@xplortech/apollo-core 0.0.6 → 0.1.0

package/dist/collection/collection-manifest.json

@@ -1,12 +1,18 @@
 {
   "entries": [
+    "./components/xpl-avatar/xpl-avatar.js",
+    "./components/xpl-badge/xpl-badge.js",
     "./components/xpl-button/xpl-button.js",
+    "./components/xpl-checkbox/xpl-checkbox.js",
+    "./components/xpl-choicelist/xpl-choicelist.js",
     "./components/xpl-pagination/xpl-pagination.js",
-    "./components/xpl-table/xpl-table.js"
+    "./components/xpl-radio/xpl-radio.js",
+    "./components/xpl-table/xpl-table.js",
+    "./components/xpl-utility-bar/xpl-utility-bar.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.6.0",
+    "version": "2.8.0",
     "typescriptVersion": "4.2.3"
   },
   "collections": [],

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

@@ -0,0 +1,158 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+export class XplAvatar {
+  constructor() {
+    this.disabled = false;
+  }
+  render() {
+    let className = "xpl-avatar";
+    if (this.size)
+      className += ` xpl-avatar--${this.size}`;
+    if (this.color)
+      className += ` xpl-avatar--${this.color}`;
+    const inner = (h("div", null,
+      this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" },
+        h("slot", null))),
+      this.status && h("div", { class: `xpl-avatar__dot--${this.status}` })));
+    return (h(Host, null, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (h("div", { class: className }, inner))));
+  }
+  static get is() { return "xpl-avatar"; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"green\" | \"yellow\" | \"pink\" | \"primary\" | \"secondary\"",
+        "resolved": "\"green\" | \"pink\" | \"primary\" | \"secondary\" | \"yellow\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"md\" | \"sm\"",
+        "resolved": "\"md\" | \"sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false
+    },
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false
+    },
+    "status": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"active\" | \"warning\" | \"inactive\"",
+        "resolved": "\"active\" | \"inactive\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,50 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+export class XplBadge {
+  render() {
+    let className = "xpl-badge";
+    if (this.dot)
+      className += " xpl-badge--dot";
+    if (this.variant)
+      className += " xpl-badge--" + this.variant;
+    return (h(Host, null,
+      h("div", { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "xpl-badge"; }
+  static get properties() { return {
+    "dot": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dot",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"success\" | \"warning\" | \"inactive\" | \"error\"",
+        "resolved": "\"error\" | \"inactive\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -3,7 +3,6 @@ import "../../../font-awesome/fontawesome";
 import "../../../font-awesome/regular";
 export class XplButton {
   constructor() {
-    this.disabled = undefined;
     this.size = "default";
     this.variant = "primary";
   }
@@ -13,8 +12,8 @@ export class XplButton {
       className += " xpl-button--secondary";
     if (this.variant === "subtle")
       className += " xpl-button--subtle";
-    if (this.variant === "error")
-      className += " xpl-button--error";
+    if (this.variant === "warning")
+      className += " xpl-button--warning";
     if (this.size === "sm")
       className += " xpl-button--sm";
     if (this.size === "xs")
@@ -29,12 +28,12 @@ export class XplButton {
      */
     this.href ? (h("a", { class: className, href: this.href, role: "button" },
       !this.iconTrailing && icon,
-      this.iconOnly ? h("span", { class: "sr-only" },
-        h("slot", null)) : h("slot", null),
-      this.iconTrailing && icon)) : (h("button", { class: className, disabled: this.disabled, type: this.type },
+      this.iconOnly ? (h("span", { class: "sr-only" },
+        h("slot", null))) : (h("slot", null)),
+      this.iconTrailing && icon)) : (h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value },
       !this.iconTrailing && icon,
-      this.iconOnly ? h("span", { class: "sr-only" },
-        h("slot", null)) : h("slot", null),
+      this.iconOnly ? (h("span", { class: "sr-only" },
+        h("slot", null))) : (h("slot", null)),
       this.iconTrailing && icon))));
   }
   static get is() { return "xpl-button"; }
@@ -54,8 +53,7 @@ export class XplButton {
         "text": ""
       },
       "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "undefined"
+      "reflect": false
     },
     "href": {
       "type": "string",
@@ -125,6 +123,23 @@ export class XplButton {
       "attribute": "icon-trailing",
       "reflect": false
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -144,6 +159,23 @@ export class XplButton {
       "defaultValue": "\"default\""
     },
     "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"submit\" | \"reset\" | \"button\"",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "value": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -157,15 +189,15 @@ export class XplButton {
         "tags": [],
         "text": ""
       },
-      "attribute": "type",
+      "attribute": "value",
       "reflect": false
     },
     "variant": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\" | \"subtle\" | \"error\"",
-        "resolved": "\"error\" | \"primary\" | \"secondary\" | \"subtle\"",
+        "original": "\"primary\" | \"secondary\" | \"subtle\" | \"warning\"",
+        "resolved": "\"primary\" | \"secondary\" | \"subtle\" | \"warning\"",
         "references": {}
       },
       "required": false,

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

@@ -0,0 +1,139 @@
+import { Component, Host, h, Prop, State } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+export class XplCheckbox {
+  constructor() {
+    this.id = uuid();
+  }
+  render() {
+    return (h(Host, { class: "xpl-checkbox-container" },
+      h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, name: this.name, required: this.required, value: this.value }),
+      h("label", { htmlFor: this.id },
+        h("slot", null),
+        this.description && h("small", null, this.description))));
+  }
+  static get is() { return "xpl-checkbox"; }
+  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
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "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
+    },
+    "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": {}
+  }; }
+}

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

@@ -0,0 +1,9 @@
+import { Component, Host, h } from "@stencil/core";
+export class XplChoicelist {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "xpl-choicelist"; }
+  static get encapsulation() { return "shadow"; }
+}

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

@@ -0,0 +1,122 @@
+import { Component, Host, h, Prop, State } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+export class XplRadio {
+  constructor() {
+    this.id = uuid();
+  }
+  render() {
+    return (h(Host, { class: "xpl-radio-container" },
+      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 }),
+      h("label", { htmlFor: this.id },
+        h("slot", null),
+        this.description && h("small", null, 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
+    },
+    "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": {}
+  }; }
+}

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

@@ -66,9 +66,13 @@ export class XplTable {
         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", { id: "__xpl-table-th", type: "checkbox", onChange: (e) => {
+              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);
-                }, checked: this.areAllSelected }),
+                }, type: "checkbox" }),
               column)) : (column)));
           }))),
           h("tbody", null, this.rowData.map((row, rowNum) => {
@@ -77,7 +81,7 @@ export class XplTable {
                 : "" }, 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) }),
-                cell)) : (cell)));
+                h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))));
             })));
           }))))));
   }
@@ -102,8 +106,8 @@ export class XplTable {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "(string | number)[][]",
-        "resolved": "(string | number)[][]",
+        "original": "string[][]",
+        "resolved": "string[][]",
         "references": {}
       },
       "required": false,

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

@@ -0,0 +1,10 @@
+import { Component, Host, h } from '@stencil/core';
+export class XplUtilityBar {
+  render() {
+    return (h(Host, null,
+      h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" },
+        h("slot", { name: "main" }),
+        h("slot", { name: "aside" }))));
+  }
+  static get is() { return "xpl-utility-bar"; }
+}