@xplortech/apollo-core 0.5.0 → 0.5.2

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

@@ -0,0 +1,214 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+import "../../../font-awesome/fontawesome";
+import "../../../font-awesome/regular";
+export class XplButton {
+  constructor() {
+    this.size = "default";
+    this.variant = "primary";
+  }
+  render() {
+    let className = "xpl-button";
+    if (this.variant === "secondary")
+      className += " xpl-button--secondary";
+    if (this.variant === "subtle")
+      className += " xpl-button--subtle";
+    if (this.variant === "warning")
+      className += " xpl-button--warning";
+    if (this.size === "sm")
+      className += " xpl-button--sm";
+    if (this.size === "xs")
+      className += " xpl-button--xs";
+    if (this.iconOnly)
+      className += " xpl-button--icon-only";
+    const icon = this.icon ? (h("i", { class: `far fa-${this.icon} ${this.iconTrailing ? "trailing" : this.iconOnly ? "" : "leading"}` })) : null;
+    return (h(Host, { role: "button" }, 
+    /**
+     * Conditionally render either an <a> or <button> element
+     * depending on if there's an `href` or not
+     */
+    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, 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.iconTrailing && icon))));
+  }
+  static get is() { return "xpl-button"; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon-only",
+      "reflect": false
+    },
+    "iconTrailing": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "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,
+      "complexType": {
+        "original": "\"default\" | \"sm\" | \"xs\"",
+        "resolved": "\"default\" | \"sm\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "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": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\" | \"subtle\" | \"warning\"",
+        "resolved": "\"primary\" | \"secondary\" | \"subtle\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    }
+  }; }
+}

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

@@ -0,0 +1,119 @@
+import { Component, Host, h, Prop, Event } from '@stencil/core';
+export class XplButtonRow {
+  constructor() {
+    this.onPrimary = () => this.clickPrimary.emit();
+    this.onSecondary = () => this.clickSecondary.emit();
+    this.onTertiary = () => this.clickTertiary.emit();
+  }
+  render() {
+    return (h(Host, { class: "xpl-button-row" },
+      h("div", { class: "xpl-button-row-inner" },
+        h("div", { class: "xpl-button-row__left" }, this.secondary &&
+          h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)),
+        h("div", { class: "xpl-button-row__right" },
+          this.tertiary && h("xpl-button", { variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary),
+          this.secondary &&
+            h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary),
+          this.primary && h("xpl-button", { class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary)))));
+  }
+  static get is() { return "xpl-button-row"; }
+  static get properties() { return {
+    "primary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"string\"",
+        "resolved": "\"string\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text for the primary button."
+      },
+      "attribute": "primary",
+      "reflect": false
+    },
+    "secondary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"string\"",
+        "resolved": "\"string\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text for the secondary button. If left\nempty, will not render a secondary button."
+      },
+      "attribute": "secondary",
+      "reflect": false
+    },
+    "tertiary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"string\"",
+        "resolved": "\"string\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text for the tertiary button. If left\nempty, will not render a secondary button."
+      },
+      "attribute": "tertiary",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "clickPrimary",
+      "name": "clickPrimary",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires on the primary button.\nIf not set, the button can act as a standard\nsubmit button for a form."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "clickSecondary",
+      "name": "clickSecondary",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds an event listener to the secondary button."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "clickTertiary",
+      "name": "clickTertiary",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds an event listener to the tertiary button."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,185 @@
+import { Component, Host, h, Prop, State, Event } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+export class XplCheckbox {
+  constructor() {
+    this.id = uuid();
+  }
+  render() {
+    return (h(Host, { class: {
+        "xpl-checkbox-radio-container": true,
+        "styled": this.styled,
+        "disabled": this.disabled,
+      } },
+      h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: () => this.checkboxChange.emit(this.input.checked), name: this.name, ref: (el) => (this.input = el), required: this.required, value: this.value }),
+      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-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
+    },
+    "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": "checkboxChange",
+      "name": "checkboxChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "private"
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,143 @@
+/// <reference path="./choice.d.ts"></reference>
+import { Component, Host, h, Prop, State } from "@stencil/core";
+export class XplChoicelist {
+  componentWillLoad() {
+    this.selected = this.choices !== undefined && this.choices !== null && this.choices.length > 0 ? this.choices.map(() => false) : [];
+  }
+  render() {
+    let className = "xpl-choicelist";
+    if (this.styled)
+      className += " xpl-choicelist--styled";
+    return (h(Host, { class: "xpl-choicelist-container" },
+      this.heading !== undefined || this.description !== undefined ? h("div", { class: "xpl-choicelist-heading" },
+        this.heading && h("h3", null, this.heading),
+        this.description && h("p", null, this.description)) : null,
+      this.choices && (h("ul", { class: className }, this.choices.map(({ children, description, label }, i) => {
+        const inner = this.multi ? (h("xpl-checkbox", { description: description, name: this.name, onCheckboxChange: (e) => {
+            const { detail } = e;
+            this.selected = this.selected.map((v, j) => i === j ? detail : v);
+          } }, label)) : (h("xpl-radio", { description: description, name: this.name, onRadioChange: () => {
+            // TypeScript errors since `v` isn't used
+            // @ts-expect-error
+            this.selected = this.selected.map((v, j) => i === j);
+          } }, label));
+        let className = this.styled && this.selected[i] ? "selected" : "";
+        return (h("li", { class: className },
+          inner,
+          children && h("ul", null, children.map((child) => {
+            const childInner = this.multi ? (h("xpl-checkbox", { description: child.description }, child.label)) : (h("xpl-radio", { description: child.description }, child.label));
+            return h("li", null, childInner);
+          }))));
+      })))));
+  }
+  static get is() { return "xpl-choicelist"; }
+  static get properties() { return {
+    "choices": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Choice[]",
+        "resolved": "Choice[]",
+        "references": {
+          "Choice": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An array of choices to be displayed in the list.\nEach choice should be an object with keys:\n- `checked` [boolean] - whether to precheck or not\n- `children` [Choice[]] - an array of child choices (recursive)\n- `description` [string]\n- `label` [string]"
+      }
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Descriptive text to be displayed above the choicelist."
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The title text to be displayed above the choicelist."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "multi": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons."
+      },
+      "attribute": "multi",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The `name` to be associated with form data."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "styled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, will include borders around the list and between individual choices."
+      },
+      "attribute": "styled",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "selected": {}
+  }; }
+}

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -0,0 +1,39 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class XplContentArea {
+  constructor() {
+    /**
+      * @property {string}  size  - The content-area size.
+    */
+    this.size = "wide";
+  }
+  render() {
+    return (h(Host, null,
+      h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` },
+        h("div", { class: "xpl-content-area" },
+          h("slot", null)))));
+  }
+  static get is() { return "xpl-content-area"; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"wide\" | \"narrow\" | \"full\"",
+        "resolved": "\"full\" | \"narrow\" | \"wide\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{string}  size  - The content-area size.",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"wide\""
+    }
+  }; }
+}