@xplortech/apollo-core 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/components/xpl-list.js

@@ -0,0 +1,68 @@
+import { h, Fragment, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import './regular.js';
+import { d as defineCustomElement$3 } from './xpl-avatar2.js';
+import { d as defineCustomElement$2 } from './xpl-badge2.js';
+
+const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {
+  const hasRight = avatars || badges || subtext;
+  const inner = (h(Fragment, null, avatar &&
+    (avatar.slice(0, 1) === '/' || avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: avatar, name: title })) : (h("xpl-avatar", { name: title }, avatar))), h("div", { class: "xpl-list-item-content" }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, title), metadata && (h("ul", { class: "xpl-list-item-metadata" }, metadata.map((d) => {
+    if (typeof d === 'string') {
+      return h("li", null, d);
+    }
+    else {
+      return (h("li", null, h("span", { class: `far fa-${d.icon}` }), ' ', d.text));
+    }
+  }))))), hasRight && (h("div", { class: "xpl-list-right" }, subtext && (h("div", { class: "xpl-list-item-subtext" }, subtext)), avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map((a) => (h("img", { src: a, alt: "" }))))), badges &&
+    badges.map((b) => {
+      if (typeof b === 'string') {
+        return h("xpl-badge", null, b);
+      }
+      else {
+        return (h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text));
+      }
+    }))))));
+  return href ? (h("a", { class: "xpl-list-item", href: href }, inner)) : (h("div", { class: "xpl-list-item" }, inner));
+};
+const XplList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.items = [];
+  }
+  render() {
+    return (h(Host, null, this.items.map((item) => (h(ListItemCpt, Object.assign({}, item))))));
+  }
+}, [0, "xpl-list", {
+    "items": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["xpl-list", "xpl-avatar", "xpl-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "xpl-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, XplList$1);
+      }
+      break;
+    case "xpl-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "xpl-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const XplList = XplList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplList, defineCustomElement };
+
+//# sourceMappingURL=xpl-list.js.map

package/dist/components/xpl-list.js.map

@@ -0,0 +1 @@
+{"file":"xpl-list.js","mappings":";;;;;AAYA,MAAM,WAAW,GAAkC,CAAC,EAChD,MAAM,EACN,OAAO,EACP,MAAM,EACN,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GACX;EACG,MAAM,QAAQ,GAAG,OAAO,IAAI,MAAM,IAAI,OAAO,CAAC;EAC9C,MAAM,KAAK,IACP,EAAC,QAAQ,QACJ,MAAM;KACF,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,IACxD,kBAAY,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAe,KAEnD,kBAAY,IAAI,EAAE,KAAK,IAAG,MAAM,CAAc,CACjD,CAAC,EACN,WAAK,KAAK,EAAC,uBAAuB,IAC9B,WAAK,KAAK,EAAC,eAAe,IACtB,eACI,cAAK,KAAK,CAAM,EACf,QAAQ,KACL,UAAI,KAAK,EAAC,wBAAwB,IAC7B,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACZ,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;MACvB,OAAO,cAAK,CAAC,CAAM,CAAC;KACvB;SAAM;MACH,QACI,cACI,YACI,KAAK,EAAE,UAAU,CAAC,CAAC,IAAI,EAAE,GACrB,EAAC,GAAG,EACX,CAAC,CAAC,IAAI,CACN,EACP;KACL;GACJ,CAAC,CACD,CACR,CACC,CACJ,EACL,QAAQ,KACL,WAAK,KAAK,EAAC,gBAAgB,IACtB,OAAO,KACJ,WAAK,KAAK,EAAC,uBAAuB,IAAE,OAAO,CAAO,CACrD,EACA,OAAO,KACJ,WAAK,KAAK,EAAC,sCAAsC,IAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MACX,WAAK,GAAG,EAAE,CAAC,EAAE,GAAG,EAAC,EAAE,GAAG,CACzB,CAAC,CACA,CACT,EACA,MAAM;IACH,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;MACT,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;QACvB,OAAO,qBAAY,CAAC,CAAa,CAAC;OACrC;WAAM;QACH,QACI,iBACI,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,IAEjB,CAAC,CAAC,IAAI,CACC,EACd;OACL;KACJ,CAAC,CACJ,CACT,CACC,CACC,CACd,CAAC;EACF,OAAO,IAAI,IACP,SAAG,KAAK,EAAC,eAAe,EAAC,IAAI,EAAE,IAAI,IAC9B,KAAK,CACN,KAEJ,WAAK,KAAK,EAAC,eAAe,IAAE,KAAK,CAAO,CAC3C,CAAC;AACN,CAAC,CAAC;MAKWA,SAAO;;;;iBAuBa,EAAE;;EAE/B,MAAM;IACF,QACI,EAAC,IAAI,QACA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,EAAC,WAAW,oBAAK,IAAI,EAAI,CAC5B,CAAC,CACC,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplList"],"sources":["./src/components/components/xpl-list/xpl-list.tsx"],"sourcesContent":["import {\n    Component,\n    Host,\n    h,\n    Prop,\n    FunctionalComponent,\n    Fragment,\n} from '@stencil/core';\nimport '../../../font-awesome/fontawesome';\nimport '../../../font-awesome/regular';\nimport type { ListItem } from './listitem';\n\nconst ListItemCpt: FunctionalComponent<ListItem> = ({\n    avatar,\n    avatars,\n    badges,\n    href,\n    title,\n    subtext,\n    metadata,\n}) => {\n    const hasRight = avatars || badges || subtext;\n    const inner = (\n        <Fragment>\n            {avatar &&\n                (avatar.slice(0, 1) === '/' || avatar.slice(0, 4) === 'http' ? (\n                    <xpl-avatar src={avatar} name={title}></xpl-avatar>\n                ) : (\n                    <xpl-avatar name={title}>{avatar}</xpl-avatar>\n                ))}\n            <div class=\"xpl-list-item-content\">\n                <div class=\"xpl-list-left\">\n                    <div>\n                        <h4>{title}</h4>\n                        {metadata && (\n                            <ul class=\"xpl-list-item-metadata\">\n                                {metadata.map((d) => {\n                                    if (typeof d === 'string') {\n                                        return <li>{d}</li>;\n                                    } else {\n                                        return (\n                                            <li>\n                                                <span\n                                                    class={`far fa-${d.icon}`}\n                                                ></span>{' '}\n                                                {d.text}\n                                            </li>\n                                        );\n                                    }\n                                })}\n                            </ul>\n                        )}\n                    </div>\n                </div>\n                {hasRight && (\n                    <div class=\"xpl-list-right\">\n                        {subtext && (\n                            <div class=\"xpl-list-item-subtext\">{subtext}</div>\n                        )}\n                        {avatars && (\n                            <div class=\"xpl-avatar-group xpl-avatar-group--s\">\n                                {avatars.map((a) => (\n                                    <img src={a} alt=\"\" />\n                                ))}\n                            </div>\n                        )}\n                        {badges &&\n                            badges.map((b) => {\n                                if (typeof b === 'string') {\n                                    return <xpl-badge>{b}</xpl-badge>;\n                                } else {\n                                    return (\n                                        <xpl-badge\n                                            dot={b.dot}\n                                            variant={b.variant}\n                                        >\n                                            {b.text}\n                                        </xpl-badge>\n                                    );\n                                }\n                            })}\n                    </div>\n                )}\n            </div>\n        </Fragment>\n    );\n    return href ? (\n        <a class=\"xpl-list-item\" href={href}>\n            {inner}\n        </a>\n    ) : (\n        <div class=\"xpl-list-item\">{inner}</div>\n    );\n};\n\n@Component({\n    tag: 'xpl-list',\n})\nexport class XplList {\n    /**\n     * `items` should be an array of objects with the following signature:\n     * {\n     *   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. \"SPD\").\n     *   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.\n     *   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges\n     *     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.\n     *     text: string;\n     *     variant?: string;\n     *   }[];\n     *   href?: string;          // A URL, if this list item is meant to link somewhere.\n     *   title: string;          // The text to be displayed for the list item.\n     *   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed\n     *     icon: string;         // Font Awesome icons) to be displayed as metadata below the title.\n     *     text: string;\n     *   }[];\n     *   subtext?: string;       // Subtext to be displayed on the right.\n     * }\n     *\n     * - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering\n     *   the right-hand side of the list item.\n     */\n    @Prop() items?: ListItem[] = [];\n\n    render() {\n        return (\n            <Host>\n                {this.items.map((item) => (\n                    <ListItemCpt {...item} />\n                ))}\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xpl-main-nav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplMainNav extends Components.XplMainNav, HTMLElement {}
+export const XplMainNav: {
+  prototype: XplMainNav;
+  new (): XplMainNav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xpl-main-nav.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const XplMainNav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.navWidth = createEvent(this, "navWidth", 7);
+    this.width = 'default';
+  }
+  navWidthHandler() {
+    this.navWidth.emit(this.width);
+  }
+  connectedCallback() {
+    this.navWidthHandler();
+  }
+  componentDidUpdate() {
+    this.navWidthHandler();
+  }
+  render() {
+    return (h(Host, { class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", null, h("header", { "aria-label": "Sidebar Header" }, h("slot", { name: "logo" }), h("slot", { name: "brand-name" })), h("div", { class: "xpl-main-nav__main_section" }, h("slot", { name: "navigation" })), h("footer", { class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { name: "footer" })))));
+  }
+}, [4, "xpl-main-nav", {
+    "width": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["xpl-main-nav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "xpl-main-nav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, XplMainNav$1);
+      }
+      break;
+  } });
+}
+
+const XplMainNav = XplMainNav$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplMainNav, defineCustomElement };
+
+//# sourceMappingURL=xpl-main-nav.js.map

package/dist/components/xpl-main-nav.js.map

@@ -0,0 +1 @@
+{"file":"xpl-main-nav.js","mappings":";;MAKaA,YAAU;;;;;iBAIsB,SAAS;;EAO1C,eAAe;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAClC;EAED,iBAAiB;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GAC1B;EAED,kBAAkB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GAC1B;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,8BAA8B,IAAI,CAAC,KAAK,EAAE,gBACtC,SAAS,IAEpB,eACI,4BAAmB,gBAAgB,IAC/B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B,EACT,WAAK,KAAK,EAAC,4BAA4B,IACnC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7B,EACN,cACI,KAAK,EAAC,sBAAsB,gBACjB,gBAAgB,IAE3B,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACP,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;","names":["XplMainNav"],"sources":["./src/components/components/xpl-main-nav/xpl-main-nav.tsx"],"sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-main-nav',\n})\nexport class XplMainNav {\n    /**\n     * @property {string}  width  - The width of the Main Nav.\n     */\n    @Prop() width: 'default' | 'md' | 'sm' = 'default';\n\n    /**\n     * @event {string} navWidth - Emits the `nav-width` prop set by the user\n     * when the component is attached to the DOM and when the component is updated.\n     */\n    @Event() navWidth: EventEmitter<string>;\n    private navWidthHandler() {\n        this.navWidth.emit(this.width);\n    }\n\n    connectedCallback() {\n        this.navWidthHandler();\n    }\n\n    componentDidUpdate() {\n        this.navWidthHandler();\n    }\n\n    render() {\n        return (\n            <Host\n                class={`xpl-main-nav xpl-main-nav--${this.width}`}\n                aria-label=\"Sidebar\"\n            >\n                <nav>\n                    <header aria-label=\"Sidebar Header\">\n                        <slot name=\"logo\"></slot>\n                        <slot name=\"brand-name\"></slot>\n                    </header>\n                    <div class=\"xpl-main-nav__main_section\">\n                        <slot name=\"navigation\"></slot>\n                    </div>\n                    <footer\n                        class=\"xpl-main-nav__footer\"\n                        aria-label=\"Sidebar Footer\"\n                    >\n                        <slot name=\"footer\"></slot>\n                    </footer>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xpl-nav-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplNavItem extends Components.XplNavItem, HTMLElement {}
+export const XplNavItem: {
+  prototype: XplNavItem;
+  new (): XplNavItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xpl-nav-item.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const XplNavItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.navOpen = createEvent(this, "navOpen", 7);
+    this.navControl = false;
+  }
+  onNavToggle() {
+    if (window.innerWidth <= 640) {
+      this.navOpen.emit(false);
+    }
+  }
+  render() {
+    return (h(Host, { class: "xpl-nav-item", role: "listitem", onClick: () => {
+        if (this.navControl) {
+          this.onNavToggle();
+        }
+      } }, h("slot", { name: "link" }, h("slot", { name: "icon" }), h("slot", null))));
+  }
+}, [4, "xpl-nav-item", {
+    "navControl": [4, "nav-control"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["xpl-nav-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "xpl-nav-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, XplNavItem$1);
+      }
+      break;
+  } });
+}
+
+const XplNavItem = XplNavItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplNavItem, defineCustomElement };
+
+//# sourceMappingURL=xpl-nav-item.js.map

package/dist/components/xpl-nav-item.js.map

@@ -0,0 +1 @@
+{"file":"xpl-nav-item.js","mappings":";;MAKaA,YAAU;;;;;sBAIY,KAAK;;EAO5B,WAAW;IACf,IAAI,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE;MAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE;QACL,IAAI,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE,CAAC;SACtB;OACJ,IAED,YAAM,IAAI,EAAC,MAAM,IACb,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,eAAa,CACV,CACJ,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;","names":["XplNavItem"],"sources":["./src/components/components/xpl-nav-item/xpl-nav-item.tsx"],"sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-nav-item',\n})\nexport class XplNavItem {\n    /**\n     * @property {boolean} - Whether or not the item should control the main nav state on click\n     */\n    @Prop() navControl?: boolean = false;\n\n    /**\n     * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)\n     */\n    @Event() navOpen: EventEmitter<boolean>;\n\n    private onNavToggle() {\n        if (window.innerWidth <= 640) {\n            this.navOpen.emit(false);\n        }\n    }\n\n    render() {\n        return (\n            <Host\n                class=\"xpl-nav-item\"\n                role=\"listitem\"\n                onClick={() => {\n                    if (this.navControl) {\n                        this.onNavToggle();\n                    }\n                }}\n            >\n                <slot name=\"link\">\n                    <slot name=\"icon\"></slot>\n                    <slot></slot>\n                </slot>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xpl-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplPagination extends Components.XplPagination, HTMLElement {}
+export const XplPagination: {
+  prototype: XplPagination;
+  new (): XplPagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xpl-pagination.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const XplPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.page = createEvent(this, "page", 7);
+    /**
+     * Private `_goto` method respects the `waitForCallback` prop --
+     * it will always emit the `page` event, but won't actually update
+     * the state of what the current page is, leaving that to the caller
+     * to update once (presumably) some other data has loaded.
+     */
+    this._goto = (n) => {
+      this.page.emit(n);
+      if (!this.waitForCallback) {
+        this.current = n;
+      }
+    };
+    this.goPrev = () => {
+      if (this.current > 1)
+        this._goto(this.current - 1);
+    };
+    this.goNext = () => {
+      const numPages = Math.ceil(this.total / this.perPage);
+      if (this.current < numPages)
+        this._goto(this.current + 1);
+    };
+    this.total = undefined;
+    this.perPage = undefined;
+    this.waitForCallback = undefined;
+    this.current = 1;
+  }
+  /**
+   * Calling `goto` with a page number (which should probably be
+   * taken from the `page` event) updates the pagination's state
+   * and re-renders it, showing the appropriate buttons given the current page.
+   * @param n
+   */
+  async goto(n) {
+    this.current = n;
+  }
+  render() {
+    const numPages = Math.ceil(this.total / this.perPage);
+    let showing = [1];
+    if (numPages < 7)
+      showing = [1, 2, 3, 4, 5, 6];
+    if (this.current <= 3 || this.current >= numPages - 2) {
+      showing = [1, 2, 3, '...', numPages - 2, numPages - 1, numPages];
+    }
+    else {
+      showing = [
+        1,
+        '...',
+        this.current - 1,
+        this.current,
+        this.current + 1,
+        '...',
+        numPages,
+      ];
+    }
+    const showingFirst = (this.current - 1) * this.perPage + 1;
+    const showingLast = Math.min(showingFirst + this.perPage - 1, this.total);
+    return (h(Host, null, h("div", { class: "xpl-pagination" }, h("div", null, h("p", null, "Showing ", h("span", null, showingFirst), " to", ' ', h("span", null, showingLast), " of", ' ', h("span", null, this.total), " results")), h("div", null, h("nav", { "aria-label": "Pagination" }, h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" }, h("span", null, "Previous"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))), showing.map((n) => {
+      if (n === '...') {
+        return (h("span", { class: "xpl-pagination-ellipsis" }, "..."));
+      }
+      if (n === this.current) {
+        return (h("button", { "aria-current": "page", class: "xpl-pagination-current" }, n));
+      }
+      return (h("button", { onClick: () => this._goto(n) }, n));
+    }), h("button", { onClick: this.goNext, class: "xpl-pagination-next" }, h("span", null, "Next"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clip-rule": "evenodd" }))))))));
+  }
+}, [0, "xpl-pagination", {
+    "total": [2],
+    "perPage": [2, "per-page"],
+    "waitForCallback": [4, "wait-for-callback"],
+    "current": [32],
+    "goto": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["xpl-pagination"];
+  components.forEach(tagName => { switch (tagName) {
+    case "xpl-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, XplPagination$1);
+      }
+      break;
+  } });
+}
+
+const XplPagination = XplPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplPagination, defineCustomElement };
+
+//# sourceMappingURL=xpl-pagination.js.map

package/dist/components/xpl-pagination.js.map

@@ -0,0 +1 @@
+{"file":"xpl-pagination.js","mappings":";;MAcaA,eAAa;;;;;;;;;;;IAyBd,UAAK,GAAG,CAAC,CAAS;MACtB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;MAClB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;OACpB;KACJ,CAAC;IAEM,WAAM,GAAG;MACb,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC;QAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;KACtD,CAAC;IAEM,WAAM,GAAG;MACb,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;MACtD,IAAI,IAAI,CAAC,OAAO,GAAG,QAAQ;QAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;KAC7D,CAAC;;;;mBAnCyB,CAAC;;;;;;;;EAW5B,MAAM,IAAI,CAAC,CAAS;IAChB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;GACpB;EAwBD,MAAM;IACF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAEtD,IAAI,OAAO,GAAuB,CAAC,CAAC,CAAC,CAAC;IACtC,IAAI,QAAQ,GAAG,CAAC;MAAE,OAAO,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,QAAQ,GAAG,CAAC,EAAE;MACnD,OAAO,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;KACpE;SAAM;MACH,OAAO,GAAG;QACN,CAAC;QACD,KAAK;QACL,IAAI,CAAC,OAAO,GAAG,CAAC;QAChB,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC;QAChB,KAAK;QACL,QAAQ;OACX,CAAC;KACL;IAED,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CACxB,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAC/B,IAAI,CAAC,KAAK,CACb,CAAC;IAEF,QACI,EAAC,IAAI,QACD,WAAK,KAAK,EAAC,gBAAgB,IACvB,eACI,yBACY,gBAAO,YAAY,CAAQ,SAAI,GAAG,EAC1C,gBAAO,WAAW,CAAQ,SAAI,GAAG,EACjC,gBAAO,IAAI,CAAC,KAAK,CAAQ,aACzB,CACF,EACN,eACI,yBAAgB,YAAY,IACxB,cACI,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAC,qBAAqB,IAE3B,2BAAqB,EACrB,WAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,IACvC,yBACc,SAAS,EACnB,CAAC,EAAC,mHAAmH,eAC3G,SAAS,GACrB,CACA,CACD,EACR,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;MACX,IAAI,CAAC,KAAK,KAAK,EAAE;QACb,QACI,YAAM,KAAK,EAAC,yBAAyB,UAE9B,EACT;OACL;MACD,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACpB,QACI,8BACiB,MAAM,EACnB,KAAK,EAAC,wBAAwB,IAE7B,CAAC,CACG,EACX;OACL;MACD,QACI,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAC/B,CAAC,CACG,EACX;KACL,CAAC,EACF,cACI,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAC,qBAAqB,IAE3B,uBAAiB,EACjB,WAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,IACvC,yBACc,SAAS,EACnB,CAAC,EAAC,oHAAoH,eAC5G,SAAS,GACrB,CACA,CACD,CACP,CACJ,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplPagination"],"sources":["./src/components/components/xpl-pagination/xpl-pagination.tsx"],"sourcesContent":["import {\n    Component,\n    Host,\n    h,\n    Event,\n    EventEmitter,\n    Prop,\n    State,\n    Method,\n} from '@stencil/core';\n\n@Component({\n    tag: 'xpl-pagination',\n})\nexport class XplPagination {\n    @Prop() total: number;\n    @Prop() perPage: number;\n    @Prop() waitForCallback: boolean;\n    @State() current: number = 1;\n\n    @Event() page: EventEmitter;\n\n    /**\n     * Calling `goto` with a page number (which should probably be\n     * taken from the `page` event) updates the pagination's state\n     * and re-renders it, showing the appropriate buttons given the current page.\n     * @param n\n     */\n    @Method()\n    async goto(n: number) {\n        this.current = n;\n    }\n\n    /**\n     * Private `_goto` method respects the `waitForCallback` prop --\n     * it will always emit the `page` event, but won't actually update\n     * the state of what the current page is, leaving that to the caller\n     * to update once (presumably) some other data has loaded.\n     */\n    private _goto = (n: number) => {\n        this.page.emit(n);\n        if (!this.waitForCallback) {\n            this.current = n;\n        }\n    };\n\n    private goPrev = () => {\n        if (this.current > 1) this._goto(this.current - 1);\n    };\n\n    private goNext = () => {\n        const numPages = Math.ceil(this.total / this.perPage);\n        if (this.current < numPages) this._goto(this.current + 1);\n    };\n\n    render() {\n        const numPages = Math.ceil(this.total / this.perPage);\n\n        let showing: (number | '...')[] = [1];\n        if (numPages < 7) showing = [1, 2, 3, 4, 5, 6];\n        if (this.current <= 3 || this.current >= numPages - 2) {\n            showing = [1, 2, 3, '...', numPages - 2, numPages - 1, numPages];\n        } else {\n            showing = [\n                1,\n                '...',\n                this.current - 1,\n                this.current,\n                this.current + 1,\n                '...',\n                numPages,\n            ];\n        }\n\n        const showingFirst = (this.current - 1) * this.perPage + 1;\n        const showingLast = Math.min(\n            showingFirst + this.perPage - 1,\n            this.total\n        );\n\n        return (\n            <Host>\n                <div class=\"xpl-pagination\">\n                    <div>\n                        <p>\n                            Showing <span>{showingFirst}</span> to{' '}\n                            <span>{showingLast}</span> of{' '}\n                            <span>{this.total}</span> results\n                        </p>\n                    </div>\n                    <div>\n                        <nav aria-label=\"Pagination\">\n                            <button\n                                onClick={this.goPrev}\n                                class=\"xpl-pagination-prev\"\n                            >\n                                <span>Previous</span>\n                                <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n                                    <path\n                                        fill-rule=\"evenodd\"\n                                        d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                                        clip-rule=\"evenodd\"\n                                    />\n                                </svg>\n                            </button>\n                            {showing.map((n) => {\n                                if (n === '...') {\n                                    return (\n                                        <span class=\"xpl-pagination-ellipsis\">\n                                            ...\n                                        </span>\n                                    );\n                                }\n                                if (n === this.current) {\n                                    return (\n                                        <button\n                                            aria-current=\"page\"\n                                            class=\"xpl-pagination-current\"\n                                        >\n                                            {n}\n                                        </button>\n                                    );\n                                }\n                                return (\n                                    <button onClick={() => this._goto(n)}>\n                                        {n}\n                                    </button>\n                                );\n                            })}\n                            <button\n                                onClick={this.goNext}\n                                class=\"xpl-pagination-next\"\n                            >\n                                <span>Next</span>\n                                <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n                                    <path\n                                        fill-rule=\"evenodd\"\n                                        d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                                        clip-rule=\"evenodd\"\n                                    />\n                                </svg>\n                            </button>\n                        </nav>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xpl-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplRadio extends Components.XplRadio, HTMLElement {}
+export const XplRadio: {
+  prototype: XplRadio;
+  new (): XplRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xpl-radio.js

@@ -0,0 +1,8 @@
+import { X as XplRadio$1, d as defineCustomElement$1 } from './xpl-radio2.js';
+
+const XplRadio = XplRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplRadio, defineCustomElement };
+
+//# sourceMappingURL=xpl-radio.js.map

package/dist/components/xpl-radio.js.map

@@ -0,0 +1 @@
+{"file":"xpl-radio.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/xpl-radio2.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as v4 } from './index2.js';
+
+const XplRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.radioChange = createEvent(this, "radioChange", 7);
+    this.checked = undefined;
+    this.description = undefined;
+    this.disabled = undefined;
+    this.name = undefined;
+    this.required = undefined;
+    this.styled = undefined;
+    this.value = undefined;
+    this.id = v4();
+  }
+  render() {
+    return (h(Host, { class: {
+        'xpl-checkbox-radio-container': true,
+        styled: this.styled,
+        disabled: this.disabled,
+      } }, 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, onChange: () => this.radioChange.emit(true) }), 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)))));
+  }
+}, [4, "xpl-radio", {
+    "checked": [4],
+    "description": [1],
+    "disabled": [4],
+    "name": [1],
+    "required": [4],
+    "styled": [4],
+    "value": [1],
+    "id": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["xpl-radio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "xpl-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, XplRadio);
+      }
+      break;
+  } });
+}
+
+export { XplRadio as X, defineCustomElement as d };
+
+//# sourceMappingURL=xpl-radio2.js.map

package/dist/components/xpl-radio2.js.map

@@ -0,0 +1 @@
+{"file":"xpl-radio2.js","mappings":";;;MAca,QAAQ;;;;;;;;;;;;cASKA,EAAI,EAAE;;EAK5B,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,8BAA8B,EAAE,IAAI;QACpC,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,IAED,aACI,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACtC,EACT,aACI,KAAK,EAAE;QACH,WAAW,EAAE,IAAI;QACjB,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACvC,EACD,OAAO,EAAE,IAAI,CAAC,EAAE,IAEhB,eAAa,EACZ,IAAI,CAAC,WAAW,KACb,aACI,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI;QACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;OAC7C,IAEA,IAAI,CAAC,WAAW,CACb,CACX,CACG,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuid"],"sources":["./src/components/components/xpl-radio/xpl-radio.tsx"],"sourcesContent":["import {\n    Component,\n    Host,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\n@Component({\n    tag: 'xpl-radio',\n})\nexport class XplRadio {\n    @Prop() checked?: boolean;\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    @Prop() name?: string;\n    @Prop() required?: boolean;\n    @Prop() styled?: boolean;\n    @Prop() value?: string;\n\n    @State() id: string = uuid();\n\n    /** @private */\n    @Event() radioChange: EventEmitter;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'xpl-checkbox-radio-container': true,\n                    styled: this.styled,\n                    disabled: this.disabled,\n                }}\n            >\n                <input\n                    class=\"xpl-radio\"\n                    type=\"radio\"\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    id={this.id}\n                    name={this.name}\n                    required={this.required}\n                    value={this.value}\n                    onChange={() => this.radioChange.emit(true)}\n                ></input>\n                <label\n                    class={{\n                        'xpl-label': true,\n                        'xpl-label--disabled': this.disabled,\n                    }}\n                    htmlFor={this.id}\n                >\n                    <slot></slot>\n                    {this.description && (\n                        <small\n                            class={{\n                                'xpl-description': true,\n                                'xpl-description--disabled': this.disabled,\n                            }}\n                        >\n                            {this.description}\n                        </small>\n                    )}\n                </label>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xpl-secondary-nav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplSecondaryNav extends Components.XplSecondaryNav, HTMLElement {}
+export const XplSecondaryNav: {
+  prototype: XplSecondaryNav;
+  new (): XplSecondaryNav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xpl-secondary-nav.js

@@ -0,0 +1,31 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const XplSecondaryNav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: "xpl-secondary-nav" }, h("nav", { "aria-label": "Secondary Nav" }, h("slot", null))));
+  }
+}, [4, "xpl-secondary-nav"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["xpl-secondary-nav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "xpl-secondary-nav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, XplSecondaryNav$1);
+      }
+      break;
+  } });
+}
+
+const XplSecondaryNav = XplSecondaryNav$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplSecondaryNav, defineCustomElement };
+
+//# sourceMappingURL=xpl-secondary-nav.js.map

package/dist/components/xpl-secondary-nav.js.map

@@ -0,0 +1 @@
+{"file":"xpl-secondary-nav.js","mappings":";;MAKaA,iBAAe;;;;;EACxB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,IAC3B,yBAAgB,eAAe,IAC3B,eAAa,CACX,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":["XplSecondaryNav"],"sources":["./src/components/components/xpl-secondary-nav/xpl-secondary-nav.tsx"],"sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-secondary-nav',\n})\nexport class XplSecondaryNav {\n    render() {\n        return (\n            <Host class=\"xpl-secondary-nav\">\n                <nav aria-label=\"Secondary Nav\">\n                    <slot></slot>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xpl-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplSelect extends Components.XplSelect, HTMLElement {}
+export const XplSelect: {
+  prototype: XplSelect;
+  new (): XplSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;