@xplortech/apollo-core 1.0.0-beta.17 → 1.0.0-beta.2

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

@@ -1,13 +1,10 @@
-import { Host, h } from '@stencil/core';
+import { Component, Host, h, Prop, State } from '@stencil/core';
 import { v4 as uuid } from 'uuid';
 export class XplToggle {
   constructor() {
-    this.checked = undefined;
-    this.description = undefined;
-    this.disabled = undefined;
-    this.heading = undefined;
-    this.label = undefined;
-    this.name = undefined;
+    /**
+     * The size of the toggle -- `default` or `small`
+     */
     this.variant = 'default';
     this.id = uuid();
   }
@@ -18,143 +15,143 @@ export class XplToggle {
     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)));
+    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
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "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
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false
+      "attribute": "checked",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "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
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The toggle's description appears *above* the toggle."
       },
-      "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
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "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": {}
-    };
-  }
+      "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": {}
+  }; }
 }
-//# sourceMappingURL=xpl-toggle.js.map

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

@@ -1,93 +1,66 @@
-import { h, Host, } from '@stencil/core';
+import { Component, Event, Host, h, Prop, State, } from '@stencil/core';
 export class XplUtilityBar {
   constructor() {
-    this.navControl = undefined;
-    this.isNavOpenAtStartup = undefined;
     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);
   }
-  componentWillLoad() {
-    this.open =
-      this.isNavOpenAtStartup !== undefined
-        ? this.isNavOpenAtStartup
-        : 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", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { name: "main" }))));
+    return (h(Host, null,
+      h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" },
+        this.navControl ? (h("div", null,
+          h("button", { class: "xpl-utility-bar__nav-control", 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": [{
-              "name": "property",
-              "text": "{boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)"
-            }],
-          "text": ""
-        },
-        "attribute": "nav-control",
-        "reflect": false
+  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": ""
       },
-      "isNavOpenAtStartup": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{boolean} - Optional property that defines whether or not the main nav is open at startup."
-            }],
-          "text": ""
-        },
-        "attribute": "is-nav-open-at-startup",
-        "reflect": false
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       }
-    };
-  }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "navOpen",
-        "name": "navOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "event",
-              "text": "{boolean} - Emits the desired state of the navigation bar (open: true/false)"
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
+    }]; }
 }
-//# sourceMappingURL=xpl-utility-bar.js.map

package/dist/custom-elements/index.d.ts

@@ -0,0 +1,219 @@
+/* ApolloCore custom elements bundle */
+
+import type { Components, JSX } from "../types/components";
+
+interface XplApplicationShell extends Components.XplApplicationShell, HTMLElement {}
+export const XplApplicationShell: {
+  prototype: XplApplicationShell;
+  new (): XplApplicationShell;
+};
+
+interface XplAvatar extends Components.XplAvatar, HTMLElement {}
+export const XplAvatar: {
+  prototype: XplAvatar;
+  new (): XplAvatar;
+};
+
+interface XplBackdrop extends Components.XplBackdrop, HTMLElement {}
+export const XplBackdrop: {
+  prototype: XplBackdrop;
+  new (): XplBackdrop;
+};
+
+interface XplBadge extends Components.XplBadge, HTMLElement {}
+export const XplBadge: {
+  prototype: XplBadge;
+  new (): XplBadge;
+};
+
+interface XplBreadcrumbItem extends Components.XplBreadcrumbItem, HTMLElement {}
+export const XplBreadcrumbItem: {
+  prototype: XplBreadcrumbItem;
+  new (): XplBreadcrumbItem;
+};
+
+interface XplBreadcrumbs extends Components.XplBreadcrumbs, HTMLElement {}
+export const XplBreadcrumbs: {
+  prototype: XplBreadcrumbs;
+  new (): XplBreadcrumbs;
+};
+
+interface XplButton extends Components.XplButton, HTMLElement {}
+export const XplButton: {
+  prototype: XplButton;
+  new (): XplButton;
+};
+
+interface XplButtonRow extends Components.XplButtonRow, HTMLElement {}
+export const XplButtonRow: {
+  prototype: XplButtonRow;
+  new (): XplButtonRow;
+};
+
+interface XplCheckbox extends Components.XplCheckbox, HTMLElement {}
+export const XplCheckbox: {
+  prototype: XplCheckbox;
+  new (): XplCheckbox;
+};
+
+interface XplChoicelist extends Components.XplChoicelist, HTMLElement {}
+export const XplChoicelist: {
+  prototype: XplChoicelist;
+  new (): XplChoicelist;
+};
+
+interface XplContentArea extends Components.XplContentArea, HTMLElement {}
+export const XplContentArea: {
+  prototype: XplContentArea;
+  new (): XplContentArea;
+};
+
+interface XplDivider extends Components.XplDivider, HTMLElement {}
+export const XplDivider: {
+  prototype: 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;
+  new (): XplGrid;
+};
+
+interface XplGridItem extends Components.XplGridItem, HTMLElement {}
+export const XplGridItem: {
+  prototype: XplGridItem;
+  new (): XplGridItem;
+};
+
+interface XplInput extends Components.XplInput, HTMLElement {}
+export const XplInput: {
+  prototype: XplInput;
+  new (): XplInput;
+};
+
+interface XplList extends Components.XplList, HTMLElement {}
+export const XplList: {
+  prototype: XplList;
+  new (): XplList;
+};
+
+interface XplMainNav extends Components.XplMainNav, HTMLElement {}
+export const XplMainNav: {
+  prototype: XplMainNav;
+  new (): XplMainNav;
+};
+
+interface XplNavItem extends Components.XplNavItem, HTMLElement {}
+export const XplNavItem: {
+  prototype: XplNavItem;
+  new (): XplNavItem;
+};
+
+interface XplPagination extends Components.XplPagination, HTMLElement {}
+export const XplPagination: {
+  prototype: XplPagination;
+  new (): XplPagination;
+};
+
+interface XplRadio extends Components.XplRadio, HTMLElement {}
+export const XplRadio: {
+  prototype: XplRadio;
+  new (): XplRadio;
+};
+
+interface XplSecondaryNav extends Components.XplSecondaryNav, HTMLElement {}
+export const XplSecondaryNav: {
+  prototype: XplSecondaryNav;
+  new (): XplSecondaryNav;
+};
+
+interface XplSelect extends Components.XplSelect, HTMLElement {}
+export const XplSelect: {
+  prototype: XplSelect;
+  new (): XplSelect;
+};
+
+interface XplTable extends Components.XplTable, HTMLElement {}
+export const XplTable: {
+  prototype: XplTable;
+  new (): XplTable;
+};
+
+interface XplTag extends Components.XplTag, HTMLElement {}
+export const XplTag: {
+  prototype: XplTag;
+  new (): XplTag;
+};
+
+interface XplToggle extends Components.XplToggle, HTMLElement {}
+export const XplToggle: {
+  prototype: XplToggle;
+  new (): XplToggle;
+};
+
+interface XplUtilityBar extends Components.XplUtilityBar, HTMLElement {}
+export const XplUtilityBar: {
+  prototype: XplUtilityBar;
+  new (): XplUtilityBar;
+};
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source. 
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. The component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  ce?: (eventName: string, opts?: any) => CustomEvent;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types/components';