@xplortech/apollo-core 0.0.7 → 0.1.1

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-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js

@@ -0,0 +1,19 @@
+import { Component, Host, h } from '@stencil/core';
+export class XplBreadcrumbItem {
+  constructor() {
+    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
+    this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+  }
+  render() {
+    return (h(Host, { class: "xpl-breadcrumb-item", role: "listitem" },
+      h("li", { role: "none" },
+        h("slot", null)),
+      h("span", { innerHTML: `${this.chevron}` })));
+  }
+  ;
+  static get is() { return "xpl-breadcrumb-item"; }
+}
+;

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

@@ -0,0 +1,12 @@
+import { Component, Host, h } from '@stencil/core';
+export class XplBreadcrumbs {
+  render() {
+    return (h(Host, null,
+      h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" },
+        h("ol", { role: "list" },
+          h("slot", null)))));
+  }
+  ;
+  static get is() { return "xpl-breadcrumbs"; }
+}
+;

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";
   }
@@ -31,7 +30,7 @@ export class XplButton {
       !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.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)),
@@ -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,7 +189,7 @@ export class XplButton {
         "tags": [],
         "text": ""
       },
-      "attribute": "type",
+      "attribute": "value",
       "reflect": false
     },
     "variant": {

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"; }
+}