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

package/dist/collection/components/xpl-input/xpl-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-input.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-input/xpl-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\nimport flatpickr from 'flatpickr';\nimport '../../../font-awesome/fontawesome';\nimport '../../../font-awesome/regular';\n\nconst arrowSvg = (rotate: boolean = false) =>\n    `<svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"${\n        rotate\n            ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'\n            : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'\n    }\" /></svg>`;\n\n@Component({\n    tag: 'xpl-input',\n})\nexport class XplInput {\n    /**\n     * Because `id` is a reserved HTMLElement attribute,\n     * we prefix it with an underscore here so that it\n     * doesn't get automatically applied to the outer container.\n     */\n    @Prop() _id?: string;\n    @Prop() autocomplete?: string;\n    /**\n     * See https://flatpickr.js.org/formatting/\n     */\n    @Prop() dateFormat?: string = 'Y-m-d';\n    /**\n     * Optional text that appears below the input label.\n     */\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    /**\n     * If an empty string (attribute present with no value),\n     * will display visually as an error. If a string is\n     * included, will display visually as an error and include\n     * the value as an error message.\n     */\n    @Prop() error?: string;\n    @Prop() label: string;\n    /**\n     * Only used when `type` = 'number' or 'date'\n     */\n    @Prop() max?: number | string;\n    /**\n     * For multiline inputs, a max. character count will\n     * display along with the current character count,\n     * and will automatically render as an error if the\n     * character count exceeds the max.\n     */\n    @Prop() maxCharacterCount?: number;\n    /**\n     * Only used when `type` = 'number' or 'date'\n     */\n    @Prop() min?: number | string;\n    /**\n     * For datepicker inputs, whether to allow only a single\n     * date or a range of dates. (Multiple non-consecutive\n     * dates planned to be supported in the future.)\n     */\n    @Prop() mode?: 'single' | /* \"multiple\" | */ 'range' = 'single';\n    /**\n     * Whether to render as a singleline text input or\n     * as a multiline textarea. (If `true`, `pre` and `post`\n     * values will be ignored, if present.)\n     */\n    @Prop() multiline?: boolean = false;\n    /**\n     * Most inputs are used in forms, and should have a\n     * `name` associated with the input for handling form data.\n     */\n    @Prop() name?: string;\n    @Prop() placeholder?: string;\n    /**\n     * A string (recommended max 3 characters) that gets shown\n     * visually to the left of (before) the input.\n     */\n    @Prop() post?: string;\n    /**\n     * A string (recommended max 8 characters) that gets shown\n     * visually to the right of (after) the input.\n     */\n    @Prop() pre?: string;\n    @Prop() readonly?: boolean;\n    @Prop() required?: boolean;\n    @Prop() step?: number;\n    @Prop() type?: 'date' | 'text' | 'number' | 'password' = 'text';\n    /**\n     * Including a `value` will prepopulate the input\n     * with the given string.\n     */\n    @Prop() value?: string;\n\n    @State() characterCount: number = 0;\n    @State() passwordVisible: boolean = false;\n\n    private input!: HTMLInputElement | HTMLTextAreaElement;\n\n    private updateCharacterCount() {\n        this.characterCount = this.input.value.length;\n    }\n\n    componentWillLoad() {\n        if (this._id === undefined || this._id === null || this._id === '')\n            this._id = uuid();\n\n        if (this.multiline && this.maxCharacterCount !== undefined) {\n            this.characterCount =\n                this.value !== undefined ? this.value.length : 0;\n        }\n    }\n\n    componentDidLoad() {\n        if (this.type === 'date') {\n            flatpickr(this.input, {\n                allowInput: true,\n                dateFormat: this.dateFormat,\n                defaultDate: this.value,\n                maxDate: this.max,\n                minDate: this.min,\n                mode: this.mode,\n                nextArrow: arrowSvg(),\n                prevArrow: arrowSvg(true),\n            });\n        }\n    }\n\n    render() {\n        let className = 'xpl-input';\n        if (this.disabled) className += ' xpl-input--disabled';\n\n        let hasError = false;\n\n        if (this.error !== undefined) hasError = true;\n        if (\n            this.multiline &&\n            this.maxCharacterCount !== undefined &&\n            this.characterCount > this.maxCharacterCount\n        )\n            hasError = true;\n        if (hasError) className += ' xpl-input--error';\n\n        let type = this.type;\n        if (type === 'password' && this.passwordVisible) {\n            type = 'text';\n        }\n\n        return (\n            <Host class={className}>\n                <label class=\"xpl-input-label\" htmlFor={this._id}>\n                    {this.label}\n                    {this.description && <small>{this.description}</small>}\n                </label>\n                <div class=\"xpl-input-wrapper\">\n                    {this.pre && !this.multiline && (\n                        <label class=\"xpl-input-pre\" htmlFor={this._id}>\n                            {this.pre}\n                        </label>\n                    )}\n                    {!this.multiline ? (\n                        <input\n                            autocomplete={\n                                this.type === 'date' ? 'off' : this.autocomplete\n                            }\n                            disabled={this.disabled}\n                            id={this._id}\n                            max={this.max}\n                            min={this.min}\n                            name={this.name}\n                            placeholder={this.placeholder}\n                            readonly={this.readonly}\n                            ref={(el) => {\n                                this.input = el as HTMLInputElement;\n                            }}\n                            required={this.required}\n                            step={this.step}\n                            type={type}\n                            value={this.value}\n                        />\n                    ) : (\n                        <textarea\n                            disabled={this.disabled}\n                            id={this._id}\n                            name={this.name}\n                            onInput={() => this.updateCharacterCount()}\n                            placeholder={this.placeholder}\n                            readonly={this.readonly}\n                            ref={(el) => {\n                                this.input = el as HTMLTextAreaElement;\n                            }}\n                            required={this.required}\n                        >\n                            {this.value}\n                        </textarea>\n                    )}\n                    {this.type === 'date' && (\n                        <span class=\"xpl-input-calendar\">\n                            <i class=\"far fa-calendar-alt\"></i>\n                        </span>\n                    )}\n                    {this.type === 'password' && (\n                        <button\n                            class=\"xpl-input-password\"\n                            onClick={() => {\n                                this.passwordVisible = !this.passwordVisible;\n                            }}\n                            role=\"presentation\"\n                        >\n                            <span class=\"sr-only\">\n                                Toggle password visibility\n                            </span>\n                            {/* This is a little ugly, but it seems that Font Awesome doesn't handle adding/removing from the DOM very well -- but if both are present in the DOM from the get-go, then we have no problem just conditionally showing/hiding the icons */}\n                            <i\n                                class=\"far fa-eye\"\n                                style={{\n                                    display: this.passwordVisible\n                                        ? 'none'\n                                        : 'block',\n                                }}\n                            ></i>\n                            <i\n                                class=\"far fa-eye-slash\"\n                                style={{\n                                    display: this.passwordVisible\n                                        ? 'block'\n                                        : 'none',\n                                }}\n                            ></i>\n                        </button>\n                    )}\n                    {this.post && !this.multiline && (\n                        <label class=\"xpl-input-post\" htmlFor={this._id}>\n                            {this.post}\n                        </label>\n                    )}\n                    {this.multiline && this.maxCharacterCount !== undefined && (\n                        <span class=\"xpl-input-characters\">\n                            {this.characterCount}/{this.maxCharacterCount}\n                        </span>\n                    )}\n                </div>\n                {this.error !== undefined && this.error.length > 0 && (\n                    <label class=\"xpl-input-error\" htmlFor={this._id}>\n                        <svg\n                            width=\"10\"\n                            height=\"11\"\n                            viewBox=\"0 0 10 11\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path d=\"M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z\" />\n                        </svg>\n                        {this.error}\n                    </label>\n                )}\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/xpl-list/listitem.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=listitem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listitem.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-list/listitem.ts"],"names":[],"mappings":"","sourcesContent":["export interface ListItem {\n    avatar?: string;\n    avatars?: string[];\n    badges?:\n        | string[]\n        | {\n              dot?: boolean;\n              text: string;\n              variant?: string;\n          }[];\n    href?: string;\n    title: string;\n    metadata?:\n        | string[]\n        | {\n              icon: string;\n              text: string;\n          }[];\n    subtext?: string;\n}\n"]}

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

@@ -1,91 +1,59 @@
-import { Component, Host, h, Prop, Fragment, } from '@stencil/core';
+import { Host, h, Fragment, } from '@stencil/core';
 import '../../../font-awesome/fontawesome';
 import '../../../font-awesome/regular';
 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));
-            }
-          }))))));
+  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));
 };
 export class XplList {
   constructor() {
-    /**
-     * `items` should be an array of objects with the following signature:
-     * {
-     *   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").
-     *   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.
-     *   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges
-     *     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.
-     *     text: string;
-     *     variant?: string;
-     *   }[];
-     *   href?: string;          // A URL, if this list item is meant to link somewhere.
-     *   title: string;          // The text to be displayed for the list item.
-     *   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed
-     *     icon: string;         // Font Awesome icons) to be displayed as metadata below the title.
-     *     text: string;
-     *   }[];
-     *   subtext?: string;       // Subtext to be displayed on the right.
-     * }
-     *
-     * - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering
-     *   the right-hand side of the list item.
-     */
     this.items = [];
   }
   render() {
     return (h(Host, null, this.items.map((item) => (h(ListItemCpt, Object.assign({}, item))))));
   }
   static get is() { return "xpl-list"; }
-  static get properties() { return {
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ListItem[]",
-        "resolved": "ListItem[]",
-        "references": {
-          "ListItem": {
-            "location": "import",
-            "path": "./listitem"
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ListItem[]",
+          "resolved": "ListItem[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "./listitem"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "`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."
-      },
-      "defaultValue": "[]"
-    }
-  }; }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "`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."
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
 }
+//# sourceMappingURL=xpl-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-list.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-list/xpl-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EAEJ,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+BAA+B,CAAC;AAGvC,MAAM,WAAW,GAAkC,CAAC,EAChD,MAAM,EACN,OAAO,EACP,MAAM,EACN,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GACX,EAAE,EAAE;EACD,MAAM,QAAQ,GAAG,OAAO,IAAI,MAAM,IAAI,OAAO,CAAC;EAC9C,MAAM,KAAK,GAAG,CACV,EAAC,QAAQ;IACJ,MAAM;MACH,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3D,kBAAY,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAe,CACtD,CAAC,CAAC,CAAC,CACA,kBAAY,IAAI,EAAE,KAAK,IAAG,MAAM,CAAc,CACjD,CAAC;IACN,WAAK,KAAK,EAAC,uBAAuB;MAC9B,WAAK,KAAK,EAAC,eAAe;QACtB;UACI,cAAK,KAAK,CAAM;UACf,QAAQ,IAAI,CACT,UAAI,KAAK,EAAC,wBAAwB,IAC7B,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;cACvB,OAAO,cAAK,CAAC,CAAM,CAAC;aACvB;iBAAM;cACH,OAAO,CACH;gBACI,YACI,KAAK,EAAE,UAAU,CAAC,CAAC,IAAI,EAAE,GACrB;gBAAC,GAAG;gBACX,CAAC,CAAC,IAAI,CACN,CACR,CAAC;aACL;UACL,CAAC,CAAC,CACD,CACR,CACC,CACJ;MACL,QAAQ,IAAI,CACT,WAAK,KAAK,EAAC,gBAAgB;QACtB,OAAO,IAAI,CACR,WAAK,KAAK,EAAC,uBAAuB,IAAE,OAAO,CAAO,CACrD;QACA,OAAO,IAAI,CACR,WAAK,KAAK,EAAC,sCAAsC,IAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChB,WAAK,GAAG,EAAE,CAAC,EAAE,GAAG,EAAC,EAAE,GAAG,CACzB,CAAC,CACA,CACT;QACA,MAAM;UACH,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;cACvB,OAAO,qBAAY,CAAC,CAAa,CAAC;aACrC;iBAAM;cACH,OAAO,CACH,iBACI,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,IAEjB,CAAC,CAAC,IAAI,CACC,CACf,CAAC;aACL;UACL,CAAC,CAAC,CACJ,CACT,CACC,CACC,CACd,CAAC;EACF,OAAO,IAAI,CAAC,CAAC,CAAC,CACV,SAAG,KAAK,EAAC,eAAe,EAAC,IAAI,EAAE,IAAI,IAC9B,KAAK,CACN,CACP,CAAC,CAAC,CAAC,CACA,WAAK,KAAK,EAAC,eAAe,IAAE,KAAK,CAAO,CAC3C,CAAC;AACN,CAAC,CAAC;AAKF,MAAM,OAAO,OAAO;;iBAuBa,EAAE;;EAE/B,MAAM;IACF,OAAO,CACH,EAAC,IAAI,QACA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtB,EAAC,WAAW,oBAAK,IAAI,EAAI,CAC5B,CAAC,CACC,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","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"]}

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

@@ -1,9 +1,6 @@
-import { Component, Host, h, Prop, Event } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class XplMainNav {
   constructor() {
-    /**
-     * @property {string}  width  - The width of the Main Nav.
-     */
     this.width = 'default';
   }
   navWidthHandler() {
@@ -16,57 +13,54 @@ export class XplMainNav {
     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" })))));
+    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" })))));
   }
   static get is() { return "xpl-main-nav"; }
-  static get properties() { return {
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'md' | 'sm'",
-        "resolved": "\"default\" | \"md\" | \"sm\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{string}  width  - The width of the Main Nav.",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "'default'"
-    }
-  }; }
-  static get events() { return [{
-      "method": "navWidth",
-      "name": "navWidth",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "text": "{string} navWidth - Emits the `nav-width` prop set by the user\nwhen the component is attached to the DOM and when the component is updated.",
-            "name": "event"
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get properties() {
+    return {
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'md' | 'sm'",
+          "resolved": "\"default\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{string}  width  - The width of the Main Nav."
+            }],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'default'"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "navWidth",
+        "name": "navWidth",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "{string} navWidth - Emits the `nav-width` prop set by the user\nwhen the component is attached to the DOM and when the component is updated."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
 }
+//# sourceMappingURL=xpl-main-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-main-nav.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-main-nav/xpl-main-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAK9E,MAAM,OAAO,UAAU;;iBAIsB,SAAS;;EAO1C,eAAe;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACnC,CAAC;EAED,iBAAiB;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAED,kBAAkB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE,8BAA8B,IAAI,CAAC,KAAK,EAAE,gBACtC,SAAS;MAEpB;QACI,4BAAmB,gBAAgB;UAC/B,YAAM,IAAI,EAAC,MAAM,GAAQ;UACzB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;QACT,WAAK,KAAK,EAAC,4BAA4B;UACnC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7B;QACN,cACI,KAAK,EAAC,sBAAsB,gBACjB,gBAAgB;UAE3B,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACP,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","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"]}

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

@@ -1,9 +1,6 @@
-import { Component, Event, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class XplNavItem {
   constructor() {
-    /**
-     * @property {boolean} - Whether or not the item should control the main nav state on click
-     */
     this.navControl = false;
   }
   onNavToggle() {
@@ -16,52 +13,54 @@ export class XplNavItem {
         if (this.navControl) {
           this.onNavToggle();
         }
-      } },
-      h("slot", { name: "link" },
-        h("slot", { name: "icon" }),
-        h("slot", null))));
+      } }, h("slot", { name: "link" }, h("slot", { name: "icon" }), h("slot", null))));
   }
   static get is() { return "xpl-nav-item"; }
-  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 the item should control the main nav state on click",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "nav-control",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  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": {}
+  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 the item should control the main nav state on click"
+            }],
+          "text": ""
+        },
+        "attribute": "nav-control",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  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-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-nav-item.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-nav-item/xpl-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAK9E,MAAM,OAAO,UAAU;;sBAIY,KAAK;;EAO5B,WAAW;IACf,IAAI,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE;MAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;EACL,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE;QACV,IAAI,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE,CAAC;SACtB;MACL,CAAC;MAED,YAAM,IAAI,EAAC,MAAM;QACb,YAAM,IAAI,EAAC,MAAM,GAAQ;QACzB,eAAa,CACV,CACJ,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","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"]}