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

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

@@ -0,0 +1,157 @@
+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.id = uuid();
+  }
+  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 (h(Host, { class: containerClassName },
+      (this.heading || this.description) && (h("label", { class: {
+          '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)))),
+      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)));
+  }
+  static get is() { return "xpl-toggle"; }
+  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": "The toggle's description appears *above* the toggle."
+      },
+      "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
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The toggle's heading appears *above* the toggle."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The toggle's label appears *to the right of* the toggle."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'small'",
+        "resolved": "\"default\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The size of the toggle -- `default` or `small`"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+  static get states() { return {
+    "id": {}
+  }; }
+}

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

@@ -0,0 +1,66 @@
+import { Component, Event, Host, h, Prop, State, } from '@stencil/core';
+export class XplUtilityBar {
+  constructor() {
+    this.open = true;
+    this.bars = `
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 xpl-utility-nav__bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
+    `;
+  }
+  onNavToggle() {
+    this.open = !this.open;
+    this.navOpen.emit(this.open);
+  }
+  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" })),
+        h("slot", { name: "main" }))));
+  }
+  static get is() { return "xpl-utility-bar"; }
+  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 to show the bars to control the state of the navigation bar (open/close)",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "nav-control",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "open": {}
+  }; }
+  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/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;