@xplortech/apollo-core 0.3.0 → 0.4.1

package/dist/cjs/xpl-tag.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9662f096.js');
+
+const XplTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+  }
+  render() {
+    return (index.h(index.Host, { class: "xpl-tag-container" }, index.h("button", { class: "xpl-tag", onClick: () => {
+        this.close.emit();
+      } }, index.h("slot", null)), index.h("button", { class: "xpl-tag__close", onClick: () => {
+        this.close.emit();
+      } }, "\u00D7")));
+  }
+};
+
+exports.xpl_tag = XplTag;

package/dist/cjs/xpl-toggle.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9662f096.js');
+const v4 = require('./v4-14140ff3.js');
+
+const XplToggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The size of the toggle -- `default` or `small`
+     */
+    this.variant = "default";
+    this.id = v4.v4();
+  }
+  render() {
+    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";
+    return (index.h(index.Host, { class: containerClassName }, (this.heading || this.description) && (index.h("label", { class: {
+        "xpl-label": true,
+        "xpl-label--disabled": this.disabled
+      }, htmlFor: this.id }, this.heading, this.description && index.h("small", { class: {
+        "xpl-description": true,
+        "xpl-description--disabled": this.disabled
+      } }, this.description))), index.h("input", { class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && index.h("label", { htmlFor: this.id }, this.label)));
+  }
+};
+
+exports.xpl_toggle = XplToggle;

package/dist/collection/collection-manifest.json

@@ -6,15 +6,24 @@
     "./components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js",
     "./components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js",
     "./components/xpl-button/xpl-button.js",
+    "./components/xpl-button-row/xpl-button-row.js",
     "./components/xpl-checkbox/xpl-checkbox.js",
     "./components/xpl-choicelist/xpl-choicelist.js",
     "./components/xpl-content-area/xpl-content-area.js",
+    "./components/xpl-divider/xpl-divider.js",
+    "./components/xpl-grid/xpl-grid.js",
+    "./components/xpl-grid-item/xpl-grid-item.js",
+    "./components/xpl-input/xpl-input.js",
+    "./components/xpl-list/xpl-list.js",
     "./components/xpl-main-nav/xpl-main-nav.js",
     "./components/xpl-nav-item/xpl-nav-item.js",
     "./components/xpl-pagination/xpl-pagination.js",
     "./components/xpl-radio/xpl-radio.js",
     "./components/xpl-secondary-nav/xpl-secondary-nav.js",
+    "./components/xpl-select/xpl-select.js",
     "./components/xpl-table/xpl-table.js",
+    "./components/xpl-tag/xpl-tag.js",
+    "./components/xpl-toggle/xpl-toggle.js",
     "./components/xpl-utility-bar/xpl-utility-bar.js"
   ],
   "compiler": {

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

@@ -1,15 +1,25 @@
-import { Component, Host, h, Prop, State } from "@stencil/core";
+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-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 },
+    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", null, this.description))));
+        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 {
@@ -115,6 +125,23 @@ export class XplCheckbox {
       "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,
@@ -136,4 +163,23 @@ export class XplCheckbox {
   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

@@ -1,9 +1,143 @@
-import { Component, Host, h } from "@stencil/core";
+/// <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() {
-    return (h(Host, null,
-      h("slot", null)));
+    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 encapsulation() { return "shadow"; }
+  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-divider/xpl-divider.js

@@ -0,0 +1,30 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class XplDivider {
+  render() {
+    let className = "xpl-divider";
+    className += ` xpl-divider--${this.tier}`;
+    return (h(Host, { class: className },
+      h("span", null,
+        h("slot", null))));
+  }
+  static get is() { return "xpl-divider"; }
+  static get properties() { return {
+    "tier": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The tier should be an integer between 0 and 3.\nTier 0 dividers do not display text, and 1-3 increase\nin size with each increasing tier."
+      },
+      "attribute": "tier",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,32 @@
+/// <reference path="./dropdownchoice.d.ts"></reference>
+import { h } from '@stencil/core';
+export const XplDropdown = ({ active, choices, mode, selected, update, }) => {
+  return (h("div", { class: {
+      "xpl-dropdown": true,
+      "xpl-dropdown--multi": mode === "multi",
+      "active": active,
+    } },
+    h("ul", null, choices.map(({ label, isGroupHeading }, i) => {
+      return isGroupHeading ?
+        h("span", null, label) :
+        h("li", null,
+          h("button", { class: {
+              selected: selected[i]
+            }, onClick: () => {
+              let newSelected;
+              if (mode === "single") {
+                // @ts-expect-error
+                newSelected = selected.map((v, j) => {
+                  return i === j ? !selected[i] : false;
+                });
+                active = false;
+              }
+              else if (mode === "multi") {
+                newSelected = selected.map((v, j) => {
+                  return i === j ? !selected[i] : v;
+                });
+              }
+              update(newSelected);
+            }, tabIndex: active ? 0 : -1 }, label));
+    }))));
+};

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

@@ -0,0 +1,26 @@
+import { Component, Host, h, Element } from '@stencil/core';
+export class XplGrid {
+  componentDidLoad() {
+    const items = Array.from(this.container.querySelectorAll(".xpl-grid-item"));
+    let lgCounter = 0, mdCounter = 0, smCounter = 0, xsCounter = 0;
+    items.forEach(item => {
+      lgCounter += +item.getAttribute("lg") || 6;
+      mdCounter += +item.getAttribute("md") || 6;
+      smCounter += +item.getAttribute("sm") || 6;
+      xsCounter += +item.getAttribute("xs") || 6;
+      if (lgCounter % 6 === 0)
+        item.classList.add("xpl-grid-item-lg-last");
+      if (mdCounter % 6 === 0)
+        item.classList.add("xpl-grid-item-md-last");
+      if (smCounter % 6 === 0)
+        item.classList.add("xpl-grid-item-sm-last");
+      if (xsCounter % 6 === 0)
+        item.classList.add("xpl-grid-item-xs-last");
+    });
+  }
+  render() {
+    return (h(Host, { class: "xpl-grid" }));
+  }
+  static get is() { return "xpl-grid"; }
+  static get elementRef() { return "container"; }
+}

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

@@ -0,0 +1,93 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class XplGridItem {
+  constructor() {
+    this.xs = 6;
+    this.sm = 6;
+    this.md = 6;
+    this.lg = 6;
+  }
+  render() {
+    let className = "xpl-grid-item";
+    className += ` xpl-grid-item-xs-${this.xs}`;
+    className += ` xpl-grid-item-sm-${this.sm}`;
+    className += ` xpl-grid-item-md-${this.md}`;
+    className += ` xpl-grid-item-lg-${this.lg}`;
+    return (h(Host, { class: className },
+      h("slot", null)));
+  }
+  static get is() { return "xpl-grid-item"; }
+  static get properties() { return {
+    "xs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "xs",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "sm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sm",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "md": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "md",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "lg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "lg",
+      "reflect": false,
+      "defaultValue": "6"
+    }
+  }; }
+}