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

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

@@ -63,3 +63,4 @@ export class XplNavItem {
       }];
   }
 }
+//# 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"]}

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

@@ -176,3 +176,4 @@ export class XplPagination {
     };
   }
 }
+//# sourceMappingURL=xpl-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-pagination.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-pagination/xpl-pagination.tsx"],"names":[],"mappings":"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","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"]}

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

@@ -175,3 +175,4 @@ export class XplRadio {
       }];
   }
 }
+//# sourceMappingURL=xpl-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-radio.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-radio/xpl-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GAER,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AAKlC,MAAM,OAAO,QAAQ;;;;;;;;;cASK,IAAI,EAAE;;EAK5B,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE;QACH,8BAA8B,EAAE,IAAI;QACpC,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B;MAED,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,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACtC;MACT,aACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACvC,EACD,OAAO,EAAE,IAAI,CAAC,EAAE;QAEhB,eAAa;QACZ,IAAI,CAAC,WAAW,IAAI,CACjB,aACI,KAAK,EAAE;YACH,iBAAiB,EAAE,IAAI;YACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;WAC7C,IAEA,IAAI,CAAC,WAAW,CACb,CACX,CACG,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","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"]}

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

@@ -5,3 +5,4 @@ export class XplSecondaryNav {
   }
   static get is() { return "xpl-secondary-nav"; }
 }
+//# sourceMappingURL=xpl-secondary-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-secondary-nav.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-secondary-nav/xpl-secondary-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKnD,MAAM,OAAO,eAAe;EACxB,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC3B,yBAAgB,eAAe;QAC3B,eAAa,CACX,CACH,CACV,CAAC;EACN,CAAC;;CACJ","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"]}

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

@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { Host, h } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 import throttle from 'lodash.throttle';
 function tagWidth(text) {
   const context = document.createElement('canvas').getContext('2d');
@@ -15,8 +15,10 @@ export class XplSelect {
     this.error = undefined;
     this.label = undefined;
     this.mode = 'single';
+    this.name = undefined;
     this.placeholder = undefined;
     this.truncate = true;
+    this.selectedValues = undefined;
     this.active = false;
     this.id = uuid();
     this.keepFocus = false;
@@ -30,6 +32,27 @@ export class XplSelect {
       this.choices && this.choices.length > 0
         ? this.choices.map(() => false)
         : [];
+    if (this.selectedValues) {
+      const isSingleMode = this.mode === 'single';
+      if (isSingleMode) {
+        this.choices.forEach((choice) => {
+          const shouldBeSelected = choice.value.includes(this.selectedValues) ||
+            choice.label.includes(this.selectedValues);
+          if (shouldBeSelected)
+            choice.isSelected = true;
+        });
+      }
+      else {
+        this.choices.forEach(({ options }) => {
+          options.forEach((option) => {
+            const shouldBeSelected = this.selectedValues.includes(option.value || option.label);
+            if (shouldBeSelected)
+              option.isSelected = true;
+          });
+        });
+      }
+      this.update();
+    }
     window.addEventListener('click', (e) => {
       const el = e.target;
       const select = el.closest('.xpl-select');
@@ -92,6 +115,9 @@ export class XplSelect {
         .join('|');
     }
   }
+  handleValueStateChange(newValue) {
+    this.selectChange.emit(newValue);
+  }
   render() {
     let visibleChoices = 0;
     return (h(Host, { class: {
@@ -122,8 +148,9 @@ export class XplSelect {
         ? this.selected.map((v, i) => {
           if (!v)
             return null;
-          if (visibleChoices >= this.visibleChoices)
+          if (visibleChoices >= this.visibleChoices) {
             return null;
+          }
           visibleChoices++;
           return (h("xpl-tag", { onClose: () => {
               this.flattenChoices().forEach((v, j) => {
@@ -153,10 +180,10 @@ export class XplSelect {
         const { dropdown } = this;
         if (!this.disabled)
           dropdown.isOpen = !dropdown.isOpen;
-      } })), !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
+      }, type: "button" })), !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
         this.update();
         this.maybeTruncateChoices();
-      } })), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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" })), this.error))), h("input", { type: "hidden", value: this.value })));
+      } })), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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" })), this.error))), h("input", { type: "hidden", name: this.name, value: this.value })));
   }
   static get is() { return "xpl-select"; }
   static get properties() {
@@ -165,12 +192,12 @@ export class XplSelect {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "SelectChoice[]",
-          "resolved": "SelectChoice[]",
+          "original": "DropdownItem[]",
+          "resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
           "references": {
-            "SelectChoice": {
+            "DropdownItem": {
               "location": "import",
-              "path": "./selectchoice"
+              "path": "../xpl-dropdown/dropdownoption"
             }
           }
         },
@@ -245,7 +272,7 @@ export class XplSelect {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The label that appears above the select dropdown"
         },
         "attribute": "label",
         "reflect": false
@@ -268,6 +295,23 @@ export class XplSelect {
         "reflect": false,
         "defaultValue": "'single'"
       },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the hidden input field that contains the selected option's value(s)"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
       "placeholder": {
         "type": "string",
         "mutable": false,
@@ -302,6 +346,23 @@ export class XplSelect {
         "attribute": "truncate",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "selectedValues": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-values",
+        "reflect": false
       }
     };
   }
@@ -316,4 +377,29 @@ export class XplSelect {
       "visibleChoices": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "selectChange",
+        "name": "selectChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the value of the selected option in the select menu on change"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueStateChange"
+      }];
+  }
 }
+//# sourceMappingURL=xpl-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-select.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-select/xpl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuid } from 'uuid';\nimport {\n    Component,\n    Host,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport throttle from 'lodash.throttle';\nimport type { DropdownItem } from '../xpl-dropdown/dropdownoption';\n\nfunction tagWidth(text: string): number {\n    const context = document.createElement('canvas').getContext('2d');\n    context.font =\n        \"14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif\";\n    return context.measureText(text).width + 44; // = text + l/r padding + margin-right\n}\n\n@Component({\n    tag: 'xpl-select',\n})\nexport class XplSelect {\n    /**\n     * An array of choices for the user to choose from.\n     * Each choice should be of the form:\n     * {\n     *   label: string;\n     *   href?: string;\n     *   value?: string;\n     *   isGroupHeading?: boolean;\n     * }\n     */\n    @Prop() choices?: DropdownItem[] = [];\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\n    /**\n     * The label that appears above the select dropdown\n     */\n    @Prop() label?: string;\n    /**\n     * Whether to allow a single choice or multiple choices.\n     */\n    @Prop() mode?: 'single' | 'multi' = 'single';\n\n    /**\n     * The name of the hidden input field that contains the selected option's value(s)\n     */\n    @Prop() name?: string;\n\n    @Prop() placeholder: string;\n    /**\n     * Only used in multi-choice selects. If `true`,\n     * badges representing selections that would overflow the\n     * container are replaced with \"+x more\" (where x is the\n     * number not shown). If `false`, the container's height will\n     * adjust to show all badges representing selections.\n     */\n    @Prop() truncate?: boolean = true;\n\n    @Prop() selectedValues?: string | string[];\n\n    /**\n     * Emits the value of the selected option in the select menu on change\n     */\n    @Event() selectChange: EventEmitter<string>;\n\n    @State() active: boolean = false;\n    @State() id: string = uuid();\n    @State() keepFocus: boolean = false;\n    @State() selected: boolean[];\n    @State() value: string = '';\n    @State() displayValue: string = '';\n    // infinity isn't real, it's just a mathematical construct, it can't hurt you\n    @State() visibleChoices: number = Infinity;\n\n    private container!: HTMLElement;\n\n    private dropdown: HTMLXplDropdownElement;\n\n    componentWillLoad() {\n        this.selected =\n            this.choices && this.choices.length > 0\n                ? this.choices.map(() => false)\n                : [];\n\n        if (this.selectedValues) {\n            const isSingleMode = this.mode === 'single';\n\n            if (isSingleMode) {\n                this.choices.forEach((choice) => {\n                    const shouldBeSelected =\n                        choice.value.includes(this.selectedValues as string) ||\n                        choice.label.includes(this.selectedValues as string);\n\n                    if (shouldBeSelected) choice.isSelected = true;\n                });\n            } else {\n                this.choices.forEach(({ options }) => {\n                    options.forEach((option) => {\n                        const shouldBeSelected = this.selectedValues.includes(\n                            option.value || option.label\n                        );\n\n                        if (shouldBeSelected) option.isSelected = true;\n                    });\n                });\n            }\n\n            this.update();\n        }\n\n        window.addEventListener('click', (e: MouseEvent) => {\n            const el = e.target as HTMLElement;\n            const select = el.closest('.xpl-select');\n            if (select === null || select !== this.container) {\n                this.active = false;\n            }\n        });\n\n        window.addEventListener(\n            'resize',\n            throttle(() => {\n                this.maybeTruncateChoices();\n            }, 250)\n        );\n    }\n    componentDidLoad() {\n        this.dropdown = this.container.querySelector('xpl-dropdown');\n    }\n\n    private maybeTruncateChoices(): void {\n        if (this.mode === 'single' || !this.truncate) return;\n\n        const containerWidth = this.container.getBoundingClientRect().width;\n\n        let visibleChoices = 0;\n        let visibleChoicesWidth = 0;\n\n        const actualNumSelected = this.selected.filter((a) => a).length;\n        for (let i = 0; i < actualNumSelected; i++) {\n            visibleChoicesWidth += tagWidth(this.getDisplayValue(i));\n            if (visibleChoicesWidth > containerWidth - 140) break;\n            visibleChoices++;\n        }\n\n        if (visibleChoices >= actualNumSelected) visibleChoices = Infinity;\n        if (visibleChoices < 1) visibleChoices = 1;\n\n        this.visibleChoices = visibleChoices;\n    }\n\n    private flattenChoices(): DropdownItem[] {\n        return this.choices.reduce(\n            (acc, curr) => [\n                ...acc,\n                ...(curr.groupName ? curr.options : [curr]),\n            ],\n            []\n        );\n    }\n    private getDisplayValue(i: number): string {\n        return this.flattenChoices()[i].label || this.flattenChoices()[i].value;\n    }\n\n    private getActualValue(i: number): string {\n        return this.flattenChoices()[i].value || this.flattenChoices()[i].label;\n    }\n\n    private update() {\n        this.selected = this.flattenChoices().map(\n            ({ isSelected }) => isSelected\n        );\n\n        if (this.mode === 'single') {\n            const selected = this.selected.findIndex((v) => v);\n            this.value = selected >= 0 ? this.getActualValue(selected) : '';\n            this.displayValue =\n                selected >= 0 ? this.getDisplayValue(selected) : '';\n        } else if (this.mode === 'multi') {\n            this.value = this.selected\n                .map((v, i) => {\n                    return v ? this.getActualValue(i) : '';\n                })\n                .filter((v) => v.length > 0)\n                .join('|');\n        }\n    }\n\n    @Watch('value')\n    handleValueStateChange(newValue) {\n        this.selectChange.emit(newValue);\n    }\n\n    render() {\n        let visibleChoices = 0;\n        return (\n            <Host\n                class={{\n                    'xpl-select': true,\n                    'xpl-select--disabled': this.disabled,\n                    'xpl-select--no-truncate': !this.truncate,\n                }}\n                onKeyDown={(e: KeyboardEvent) => {\n                    if (e.key === 'Escape') this.active = false;\n                }}\n                ref={(el) => (this.container = el as HTMLElement)}\n            >\n                {this.label || this.description ? (\n                    <label\n                        class={{\n                            'xpl-label': true,\n                            'xpl-label--disabled': this.disabled,\n                        }}\n                        htmlFor={this.id}\n                    >\n                        {this.label}\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                ) : null}\n                <div\n                    class={{\n                        'xpl-input': true,\n                        'xpl-input--disabled': this.disabled,\n                        'xpl-input--error': this.error !== undefined,\n                    }}\n                >\n                    <div class=\"xpl-input-wrapper\">\n                        <div\n                            class={{\n                                'xpl-select-value': true,\n                                'xpl-select-value--active':\n                                    this.mode === 'multi' &&\n                                    this.value.length > 0,\n                                'has-value': this.value.length > 0,\n                            }}\n                        >\n                            {this.mode === 'single'\n                                ? this.displayValue || this.placeholder\n                                : this.value.length > 0\n                                ? this.selected.map((v, i) => {\n                                      if (!v) return null;\n                                      if (\n                                          visibleChoices >= this.visibleChoices\n                                      ) {\n                                          return null;\n                                      }\n                                      visibleChoices++;\n                                      return (\n                                          <xpl-tag\n                                              onClose={() => {\n                                                  this.flattenChoices().forEach(\n                                                      (v, j) => {\n                                                          if (i === j)\n                                                              v.isSelected =\n                                                                  false;\n                                                      }\n                                                  );\n                                                  const mapOptions = (\n                                                      option: DropdownItem\n                                                  ): DropdownItem => {\n                                                      option.options =\n                                                          option.groupName\n                                                              ? option.options.map(\n                                                                    mapOptions\n                                                                )\n                                                              : undefined;\n                                                      return option;\n                                                  };\n                                                  this.choices =\n                                                      this.choices.map(\n                                                          mapOptions\n                                                      );\n\n                                                  this.update();\n                                                  this.maybeTruncateChoices();\n                                              }}\n                                          >\n                                              {this.getDisplayValue(i)}\n                                          </xpl-tag>\n                                      );\n                                  })\n                                : this.placeholder}\n                            {this.visibleChoices < Infinity &&\n                                `+ ${\n                                    this.selected.filter((a) => a).length -\n                                    this.visibleChoices\n                                } more`}\n                        </div>\n                        <button\n                            disabled={this.disabled}\n                            id={this.id}\n                            onKeyDown={(e: KeyboardEvent) => {\n                                if (e.key === 'Tab') this.keepFocus = true;\n                            }}\n                            onClick={() => {\n                                const { dropdown } = this;\n                                if (!this.disabled)\n                                    dropdown.isOpen = !dropdown.isOpen;\n                            }}\n                            type=\"button\"\n                        ></button>\n                    </div>\n                    {!this.disabled && (\n                        <xpl-dropdown\n                            options={this.choices}\n                            mode={this.mode}\n                            triggerId={this.id}\n                            update={() => {\n                                this.update();\n                                this.maybeTruncateChoices();\n                            }}\n                        ></xpl-dropdown>\n                    )}\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                </div>\n                <input type=\"hidden\" name={this.name} value={this.value} />\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -215,3 +215,4 @@ export class XplTable {
       }];
   }
 }
+//# sourceMappingURL=xpl-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-table.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-table/xpl-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Host,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    h,\n    Watch,\n} from '@stencil/core';\n\n@Component({\n    tag: 'xpl-table',\n})\nexport class XplTable {\n    @Prop() columns?: string[];\n    @Prop() data?: string[][];\n    @Prop() freeze?: boolean;\n    @Prop() multiselect?: boolean;\n    @Prop() striped?: boolean;\n\n    @State() areAllSelected: boolean = false;\n    @State() rowData: string[][];\n    @State() hasScrolled: boolean = false;\n    @State() selected: boolean[];\n\n    @Event() tableSelect: EventEmitter;\n\n    private container!: HTMLDivElement;\n\n    private selectAll = (e: Event) => {\n        const { target } = e;\n        if (!(target instanceof HTMLInputElement)) return;\n        const { checked } = target;\n        this.areAllSelected = checked;\n        this.selected = this.selected.map(() => checked);\n        this.onChange();\n    };\n\n    private selectOne = (e: Event, i: number) => {\n        const { target } = e;\n        if (!(target instanceof HTMLInputElement)) return;\n        const { checked } = target;\n        this.areAllSelected = false;\n        this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));\n        this.onChange();\n    };\n\n    private onChange = () => {\n        this.tableSelect.emit({\n            selected: this.selected,\n            areAllSelected: this.areAllSelected,\n        });\n    };\n\n    private onScroll = () => {\n        this.hasScrolled = this.container.scrollLeft > 0;\n    };\n\n    /**\n     * TODO: Need to figure out how this interplays with data\n     * received from an API/server\n     */\n    // private sortBy = (col: number, ascending = true) => {\n    //     this.rowData.sort((a, b) => {\n    //         const A = a[col];\n    //         const B = b[col];\n    //         if (typeof A === 'number' && typeof B === 'number') {\n    //             const f = ascending ? 1 : -1;\n    //             return A > B ? f : -f;\n    //         }\n    //         return -1;\n    //     });\n    //     this.rowData = Array.from(this.rowData);\n    //     this.render();\n    // };\n\n    private setData = () => {\n        this.rowData = this.data !== undefined ? Array.from(this.data) : [];\n        this.selected = new Array(this.rowData.length).fill(false);\n    };\n\n    @Watch('data')\n    watchData() {\n        this.setData();\n    }\n\n    componentWillLoad() {\n        this.areAllSelected = false;\n        this.setData();\n    }\n\n    render() {\n        let className = 'xpl-table';\n        if (this.striped) className += ' xpl-table--striped';\n        if (this.freeze) className += ' xpl-table--freeze';\n        if (this.hasScrolled) className += ' xpl-table--has-scrolled';\n\n        return (\n            <Host>\n                <div\n                    class=\"xpl-table-container\"\n                    onScroll={this.onScroll}\n                    ref={(el) => (this.container = el as HTMLDivElement)}\n                >\n                    <table class={className}>\n                        {this.columns && (\n                            <thead>\n                                {this.columns.map((column, i) => {\n                                    return (\n                                        <th>\n                                            {this.multiselect && i === 0 ? (\n                                                <label htmlFor=\"__xpl-table-th\">\n                                                    <input\n                                                        checked={\n                                                            this.areAllSelected\n                                                        }\n                                                        id=\"__xpl-table-th\"\n                                                        // appear indeterminate when at least one but not all\n                                                        // are selected\n                                                        indeterminate={\n                                                            !this\n                                                                .areAllSelected &&\n                                                            this.selected.some(\n                                                                (a) => a\n                                                            )\n                                                        }\n                                                        onChange={(e) => {\n                                                            this.selectAll(e);\n                                                        }}\n                                                        type=\"checkbox\"\n                                                    />\n                                                    {column}\n                                                </label>\n                                            ) : (\n                                                column\n                                            )}\n                                        </th>\n                                    );\n                                })}\n                            </thead>\n                        )}\n                        <tbody>\n                            {this.rowData.map((row, rowNum) => {\n                                return (\n                                    <tr\n                                        class={\n                                            this.selected &&\n                                            this.selected[rowNum]\n                                                ? 'xpl-table-row-selected'\n                                                : ''\n                                        }\n                                    >\n                                        {row.map((cell, i) => {\n                                            return (\n                                                <td>\n                                                    {this.multiselect &&\n                                                    i === 0 ? (\n                                                        <label\n                                                            htmlFor={\n                                                                '__xpl-table-row-' +\n                                                                rowNum\n                                                            }\n                                                        >\n                                                            <input\n                                                                id={\n                                                                    '__xpl-table-row-' +\n                                                                    rowNum\n                                                                }\n                                                                checked={\n                                                                    this\n                                                                        .selected[\n                                                                        rowNum\n                                                                    ]\n                                                                }\n                                                                type=\"checkbox\"\n                                                                onChange={(e) =>\n                                                                    this.selectOne(\n                                                                        e,\n                                                                        rowNum\n                                                                    )\n                                                                }\n                                                            />\n                                                            <div\n                                                                innerHTML={cell}\n                                                            />\n                                                        </label>\n                                                    ) : (\n                                                        <div innerHTML={cell} />\n                                                    )}\n                                                </td>\n                                            );\n                                        })}\n                                    </tr>\n                                );\n                            })}\n                        </tbody>\n                    </table>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -27,3 +27,4 @@ export class XplTag {
       }];
   }
 }
+//# sourceMappingURL=xpl-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-tag.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-tag/xpl-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAKxE,MAAM,OAAO,MAAM;EAGf,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC3B,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;QAED,eAAa,CACR;MACT,cACI,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,aAGI,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-tag',\n})\nexport class XplTag {\n    @Event() close: EventEmitter;\n\n    render() {\n        return (\n            <Host class=\"xpl-tag-container\">\n                <button\n                    class=\"xpl-tag\"\n                    onClick={() => {\n                        this.close.emit();\n                    }}\n                >\n                    <slot></slot>\n                </button>\n                <button\n                    class=\"xpl-tag__close\"\n                    onClick={() => {\n                        this.close.emit();\n                    }}\n                >\n                    &times;\n                </button>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -157,3 +157,4 @@ export class XplToggle {
     };
   }
 }
+//# sourceMappingURL=xpl-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-toggle.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-toggle/xpl-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AAKlC,MAAM,OAAO,SAAS;;;;;;;;mBAmBsB,SAAS;cAE3B,IAAI,EAAE;;EAE5B,MAAM;IACF,IAAI,kBAAkB,GAAG,sBAAsB,CAAC;IAChD,IAAI,IAAI,CAAC,QAAQ;MACb,kBAAkB,IAAI,iCAAiC,CAAC;IAE5D,IAAI,SAAS,GAAG,YAAY,CAAC;IAC7B,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;MAAE,SAAS,IAAI,oBAAoB,CAAC;IAEhE,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAE,kBAAkB;MAC1B,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACnC,aACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACvC,EACD,OAAO,EAAE,IAAI,CAAC,EAAE;QAEf,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,WAAW,IAAI,CACjB,aACI,KAAK,EAAE;YACH,iBAAiB,EAAE,IAAI;YACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;WAC7C,IAEA,IAAI,CAAC,WAAW,CACb,CACX,CACG,CACX;MACD,aACI,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,GACV;MACR,IAAI,CAAC,KAAK,IAAI,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACzD,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\n@Component({\n    tag: 'xpl-toggle',\n})\nexport class XplToggle {\n    @Prop() checked?: boolean;\n    /**\n     * The toggle's description appears *above* the toggle.\n     */\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    /**\n     * The toggle's heading appears *above* the toggle.\n     */\n    @Prop() heading?: string;\n    /**\n     * The toggle's label appears *to the right of* the toggle.\n     */\n    @Prop() label?: string;\n    @Prop() name?: string;\n    /**\n     * The size of the toggle -- `default` or `small`\n     */\n    @Prop() variant?: 'default' | 'small' = 'default';\n\n    @State() id: string = uuid();\n\n    render() {\n        let containerClassName = 'xpl-toggle-container';\n        if (this.disabled)\n            containerClassName += ' xpl-toggle-container--disabled';\n\n        let className = 'xpl-toggle';\n        if (this.variant === 'small') className += ' xpl-toggle--small';\n\n        return (\n            <Host class={containerClassName}>\n                {(this.heading || this.description) && (\n                    <label\n                        class={{\n                            'xpl-label': true,\n                            'xpl-label--disabled': this.disabled,\n                        }}\n                        htmlFor={this.id}\n                    >\n                        {this.heading}\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                )}\n                <input\n                    class={className}\n                    type=\"checkbox\"\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    id={this.id}\n                    name={this.name}\n                ></input>\n                {this.label && <label htmlFor={this.id}>{this.label}</label>}\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -93,3 +93,4 @@ export class XplUtilityBar {
       }];
   }
 }
+//# sourceMappingURL=xpl-utility-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-utility-bar.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-utility-bar/xpl-utility-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AAKvB,MAAM,OAAO,aAAa;;IAuBd,SAAI,GAAG;;KAEd,CAAC;;;gBATuB,IAAI;;EAErB,WAAW;IACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACjC,CAAC;EAMD,iBAAiB;IACb,IAAI,CAAC,IAAI;MACL,IAAI,CAAC,kBAAkB,KAAK,SAAS;QACjC,CAAC,CAAC,IAAI,CAAC,kBAAkB;QACzB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;EACxB,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,yBACe,wBAAwB,EACnC,KAAK,EAAC,iBAAiB;QAEtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACf;UACI,cACI,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GACnB;UACV,YAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,CACT,CAAC,CAAC,CAAC,CACA,YAAM,IAAI,EAAC,OAAO,GAAQ,CAC7B;QACD,YAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\n\n@Component({\n    tag: 'xpl-utility-bar',\n})\nexport class XplUtilityBar {\n    /**\n     * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)\n     */\n    @Event() navOpen: EventEmitter<boolean>;\n\n    /**\n     * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)\n     */\n    @Prop() navControl?: boolean;\n\n    /**\n     * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.\n     */\n    @Prop() isNavOpenAtStartup?: boolean;\n\n    @State() open: boolean = true;\n\n    private onNavToggle() {\n        this.open = !this.open;\n        this.navOpen.emit(this.open);\n    }\n\n    private bars = `\n        <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>\n    `;\n\n    componentWillLoad() {\n        this.open =\n            this.isNavOpenAtStartup !== undefined\n                ? this.isNavOpenAtStartup\n                : this.open;\n    }\n\n    render() {\n        return (\n            <Host>\n                <nav\n                    aria-label=\"utility navigation bar\"\n                    class=\"xpl-utility-bar\"\n                >\n                    {this.navControl ? (\n                        <div>\n                            <button\n                                class=\"xpl-utility-bar__nav-control\"\n                                onClick={() => this.onNavToggle()}\n                                innerHTML={`${this.bars}`}\n                            ></button>\n                            <slot name=\"aside\"></slot>\n                        </div>\n                    ) : (\n                        <slot name=\"aside\"></slot>\n                    )}\n                    <slot name=\"main\"></slot>\n                </nav>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/components/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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
+ * bundling, 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;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: 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;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+/**
+ * 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. Ensuring that 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;

package/dist/components/index.js

@@ -0,0 +1,81 @@
+import { XplApplicationShell } from './xpl-application-shell.js';
+import { XplAvatar } from './xpl-avatar.js';
+import { XplBackdrop } from './xpl-backdrop.js';
+import { XplBadge } from './xpl-badge.js';
+import { XplBreadcrumbItem } from './xpl-breadcrumb-item.js';
+import { XplBreadcrumbs } from './xpl-breadcrumbs.js';
+import { XplButton } from './xpl-button.js';
+import { XplButtonRow } from './xpl-button-row.js';
+import { XplCheckbox } from './xpl-checkbox.js';
+import { XplChoicelist } from './xpl-choicelist.js';
+import { XplContentArea } from './xpl-content-area.js';
+import { XplDivider } from './xpl-divider.js';
+import { XplDropdown } from './xpl-dropdown.js';
+import { XplDropdownGroup } from './xpl-dropdown-group.js';
+import { XplDropdownHeading } from './xpl-dropdown-heading.js';
+import { XplDropdownOption } from './xpl-dropdown-option.js';
+import { XplGrid } from './xpl-grid.js';
+import { XplGridItem } from './xpl-grid-item.js';
+import { XplInput } from './xpl-input.js';
+import { XplList } from './xpl-list.js';
+import { XplMainNav } from './xpl-main-nav.js';
+import { XplNavItem } from './xpl-nav-item.js';
+import { XplPagination } from './xpl-pagination.js';
+import { XplRadio } from './xpl-radio.js';
+import { XplSecondaryNav } from './xpl-secondary-nav.js';
+import { XplSelect } from './xpl-select.js';
+import { XplTable } from './xpl-table.js';
+import { XplTag } from './xpl-tag.js';
+import { XplToggle } from './xpl-toggle.js';
+import { XplUtilityBar } from './xpl-utility-bar.js';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+const globalScripts = () => {};
+
+//! Autogenerated index
+
+globalScripts();
+const defineCustomElements = (opts) => {
+  if (typeof customElements !== 'undefined') {
+    [
+      XplApplicationShell,
+      XplAvatar,
+      XplBackdrop,
+      XplBadge,
+      XplBreadcrumbItem,
+      XplBreadcrumbs,
+      XplButton,
+      XplButtonRow,
+      XplCheckbox,
+      XplChoicelist,
+      XplContentArea,
+      XplDivider,
+      XplDropdown,
+      XplDropdownGroup,
+      XplDropdownHeading,
+      XplDropdownOption,
+      XplGrid,
+      XplGridItem,
+      XplInput,
+      XplList,
+      XplMainNav,
+      XplNavItem,
+      XplPagination,
+      XplRadio,
+      XplSecondaryNav,
+      XplSelect,
+      XplTable,
+      XplTag,
+      XplToggle,
+      XplUtilityBar,
+    ].forEach(cmp => {
+      if (!customElements.get(cmp.is)) {
+        customElements.define(cmp.is, cmp, opts);
+      }
+    });
+  }
+};
+
+export { defineCustomElements };
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,aAAa,GAAG,MAAM,EAAE;;ACArC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["@stencil/core/internal/app-globals","@user-index-entrypoint"],"sourcesContent":["export const globalScripts = () => {};\n","//! Autogenerated index"],"version":3}