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

package/dist/cjs/xpl-avatar_12.cjs.entry.js

@@ -2,13 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-acf3dd7a.js');
+const index = require('./index-e53b018b.js');
 const v4 = require('./v4-14140ff3.js');
 
 const XplAvatar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.color = undefined;
     this.disabled = false;
+    this.href = undefined;
+    this.name = undefined;
+    this.size = undefined;
+    this.src = undefined;
+    this.status = undefined;
+    this.target = undefined;
   }
   render() {
     let className = 'xpl-avatar';
@@ -24,6 +31,8 @@ const XplAvatar = class {
 const XplBadge = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.dot = undefined;
+    this.variant = undefined;
   }
   render() {
     let className = 'xpl-badge';
@@ -61,17 +70,15 @@ const XplBreadcrumbs = class {
 const XplButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * @property {"default" | "sm" | "xs"} - button size
-     */
+    this.disabled = undefined;
+    this.link = undefined;
+    this.iconOnly = undefined;
+    this.fullWidth = undefined;
+    this.name = undefined;
     this.size = 'default';
-    /**
-     * @property {"primary" | "secondary" | "subtle"} - button variant
-     */
+    this.type = undefined;
+    this.value = undefined;
     this.variant = 'primary';
-    /**
-     * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
-     */
     this.state = 'neutral';
   }
   componentDidRender() {
@@ -119,6 +126,14 @@ const XplCheckbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
+    this.checked = undefined;
+    this.description = undefined;
+    this.disabled = undefined;
+    this.indeterminate = undefined;
+    this.name = undefined;
+    this.required = undefined;
+    this.styled = undefined;
+    this.value = undefined;
     this.id = v4.v4();
   }
   render() {
@@ -139,9 +154,6 @@ const XplCheckbox = class {
 const XplContentArea = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * @property {string}  size  - The content-area size.
-     */
     this.size = 'wide';
   }
   render() {
@@ -153,9 +165,6 @@ const XplNavItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.navOpen = index.createEvent(this, "navOpen", 7);
-    /**
-     * @property {boolean} - Whether or not the item should control the main nav state on click
-     */
     this.navControl = false;
   }
   onNavToggle() {
@@ -176,6 +185,13 @@ const XplRadio = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.radioChange = index.createEvent(this, "radioChange", 7);
+    this.checked = undefined;
+    this.description = undefined;
+    this.disabled = undefined;
+    this.name = undefined;
+    this.required = undefined;
+    this.styled = undefined;
+    this.value = undefined;
     this.id = v4.v4();
   }
   render() {
@@ -206,8 +222,6 @@ const XplTable = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.tableSelect = index.createEvent(this, "tableSelect", 7);
-    this.areAllSelected = false;
-    this.hasScrolled = false;
     this.selectAll = (e) => {
       const { target } = e;
       if (!(target instanceof HTMLInputElement))
@@ -235,28 +249,43 @@ const XplTable = class {
     this.onScroll = () => {
       this.hasScrolled = this.container.scrollLeft > 0;
     };
+    /**
+     * TODO: Need to figure out how this interplays with data
+     * received from an API/server
+     */
+    // private sortBy = (col: number, ascending = true) => {
+    //     this.rowData.sort((a, b) => {
+    //         const A = a[col];
+    //         const B = b[col];
+    //         if (typeof A === 'number' && typeof B === 'number') {
+    //             const f = ascending ? 1 : -1;
+    //             return A > B ? f : -f;
+    //         }
+    //         return -1;
+    //     });
+    //     this.rowData = Array.from(this.rowData);
+    //     this.render();
+    // };
+    this.setData = () => {
+      this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+      this.selected = new Array(this.rowData.length).fill(false);
+    };
+    this.columns = undefined;
+    this.data = undefined;
+    this.freeze = undefined;
+    this.multiselect = undefined;
+    this.striped = undefined;
+    this.areAllSelected = false;
+    this.rowData = undefined;
+    this.hasScrolled = false;
+    this.selected = undefined;
+  }
+  watchData() {
+    this.setData();
   }
-  /**
-   * TODO: Need to figure out how this interplays with data
-   * received from an API/server
-   */
-  // private sortBy = (col: number, ascending = true) => {
-  //     this.rowData.sort((a, b) => {
-  //         const A = a[col];
-  //         const B = b[col];
-  //         if (typeof A === 'number' && typeof B === 'number') {
-  //             const f = ascending ? 1 : -1;
-  //             return A > B ? f : -f;
-  //         }
-  //         return -1;
-  //     });
-  //     this.rowData = Array.from(this.rowData);
-  //     this.render();
-  // };
   componentWillLoad() {
     this.areAllSelected = false;
-    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-    this.selected = new Array(this.rowData.length).fill(false);
+    this.setData();
   }
   render() {
     let className = 'xpl-table';
@@ -288,16 +317,21 @@ const XplTable = class {
       })));
     }))))));
   }
+  static get watchers() { return {
+    "data": ["watchData"]
+  }; }
 };
 
 const XplUtilityBar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.navOpen = index.createEvent(this, "navOpen", 7);
-    this.open = true;
     this.bars = `
         <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 xpl-utility-nav__bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
     `;
+    this.navControl = undefined;
+    this.isNavOpenAtStartup = undefined;
+    this.open = true;
   }
   onNavToggle() {
     this.open = !this.open;
@@ -326,3 +360,5 @@ exports.xpl_radio = XplRadio;
 exports.xpl_secondary_nav = XplSecondaryNav;
 exports.xpl_table = XplTable;
 exports.xpl_utility_bar = XplUtilityBar;
+
+//# sourceMappingURL=xpl-avatar_12.cjs.entry.js.map

package/dist/cjs/xpl-avatar_12.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-avatar.xpl-badge.xpl-breadcrumb-item.xpl-breadcrumbs.xpl-button.xpl-checkbox.xpl-content-area.xpl-nav-item.xpl-radio.xpl-secondary-nav.xpl-table.xpl-utility-bar.entry.cjs.js","mappings":"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","names":["h","Host","uuid"],"sources":["./src/components/components/xpl-avatar/xpl-avatar.tsx","./src/components/components/xpl-badge/xpl-badge.tsx","./src/components/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.tsx","./src/components/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.tsx","./src/components/components/xpl-button/xpl-button.tsx","./src/components/components/xpl-checkbox/xpl-checkbox.tsx","./src/components/components/xpl-content-area/xpl-content-area.tsx","./src/components/components/xpl-nav-item/xpl-nav-item.tsx","./src/components/components/xpl-radio/xpl-radio.tsx","./src/components/components/xpl-secondary-nav/xpl-secondary-nav.tsx","./src/components/components/xpl-table/xpl-table.tsx","./src/components/components/xpl-utility-bar/xpl-utility-bar.tsx"],"sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-avatar',\n})\nexport class XplAvatar {\n    @Prop() color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';\n    @Prop() disabled?: boolean = false;\n    @Prop() href?: string;\n    @Prop() name?: string;\n    @Prop() size?: 'md' | 'sm';\n    @Prop() src?: string;\n    @Prop() status?: 'active' | 'warning' | 'inactive';\n    @Prop() target?: string;\n\n    render() {\n        let className = 'xpl-avatar';\n        if (this.size) className += ` xpl-avatar--${this.size}`;\n        if (this.color) className += ` xpl-avatar--${this.color}`;\n\n        const inner = (\n            <div>\n                {this.src ? (\n                    <img alt={this.name} src={this.src} />\n                ) : (\n                    <div class=\"xpl-avatar__placeholder\">\n                        <slot></slot>\n                    </div>\n                )}\n                {this.status && (\n                    <div class={`xpl-avatar__dot--${this.status}`}></div>\n                )}\n            </div>\n        );\n\n        return (\n            <Host>\n                {this.href && !this.disabled ? (\n                    <a href={this.href} class={className} target={this.target}>\n                        {inner}\n                    </a>\n                ) : this.href && this.disabled ? (\n                    <div class={className + ' xpl-avatar--disabled'}>\n                        {inner}\n                    </div>\n                ) : (\n                    <div class={className}>{inner}</div>\n                )}\n            </Host>\n        );\n    }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-badge',\n})\nexport class XplBadge {\n    @Prop() dot?: boolean;\n    @Prop() variant?: 'success' | 'warning' | 'inactive' | 'error';\n\n    render() {\n        let className = 'xpl-badge';\n        if (this.dot) className += ' xpl-badge--dot';\n        if (this.variant) className += ' xpl-badge--' + this.variant;\n\n        return (\n            <Host>\n                <div class={className}>\n                    <slot></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot unnamed - content rendered inside <li>, should be link or button (styled as link)\n */\n@Component({\n    tag: 'xpl-breadcrumb-item',\n})\nexport class XplBreadcrumbItem {\n    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.\n    private chevron = `<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"chevron-right\" class=\"svg-inline--fa fa-chevron-right fa-w-10\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n        <path fill=\"currentColor\" d=\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\"></path>\n    </svg>\n    `;\n\n    render() {\n        return (\n            <Host class=\"xpl-breadcrumb-item\" role=\"listitem\">\n                <li role=\"none\">\n                    <slot></slot>\n                </li>\n                <span innerHTML={`${this.chevron}`} />\n            </Host>\n        );\n    }\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot unnamed - content rendered <ol>, should be a group of <li> or <xpl-breadcrumb-item>\n */\n@Component({\n    tag: 'xpl-breadcrumbs',\n})\nexport class XplBreadcrumbs {\n    render() {\n        return (\n            <Host>\n                <nav class=\"xpl-breadcrumbs\" aria-label=\"Breadcrumb\">\n                    <ol role=\"list\">\n                        <slot></slot>\n                    </ol>\n                </nav>\n            </Host>\n        );\n    }\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n@Component({\n    tag: 'xpl-button',\n})\nexport class XplButton {\n    @Element() el: HTMLXplButtonElement;\n    /**\n     * whether button should be disabled\n     */\n    @Prop() disabled?: boolean;\n    /**\n     * whether button should yield a slot for a link tag\n     */\n    @Prop() link?: boolean;\n    /**\n     * whether button should render icon only\n     */\n    @Prop() iconOnly?: boolean;\n    /**\n     * whether button should render with full width\n     */\n    @Prop() fullWidth?: boolean;\n    /**\n     * @property {string} - button name attribute\n     */\n    @Prop() name?: string;\n    /**\n     * @property {\"default\" | \"sm\" | \"xs\"} - button size\n     */\n    @Prop() size: 'default' | 'sm' | 'xs' = 'default';\n    /**\n     * @property {\"submit\" | \"reset\" | \"button\"} - button type attribute\n     */\n    @Prop() type?: 'submit' | 'reset' | 'button';\n    /**\n     * @property {string} - button value attribute\n     */\n    @Prop() value?: string;\n    /**\n     * @property {\"primary\" | \"secondary\" | \"subtle\"} - button variant\n     */\n    @Prop() variant: 'primary' | 'secondary' | 'subtle' = 'primary';\n    /**\n     * @property {\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red\n     */\n    @Prop() state: 'neutral' | 'warning' | 'success' = 'neutral';\n\n    componentDidRender() {\n        const attrs = this.el.attributes;\n        const dataAttrs = Object.keys(attrs)\n            .filter((k) => {\n                const propertyName = attrs[k].name;\n                if (propertyName) {\n                    return (\n                        propertyName.includes('data-test') ||\n                        propertyName.includes('aria-')\n                    );\n                }\n                return false;\n            })\n            .reduce((acc, k) => {\n                return { ...acc, [attrs[k].name]: attrs[k].value };\n            }, {});\n\n        const child = this.el.querySelector('button');\n        Object.keys(dataAttrs).forEach((k) => {\n            child.setAttribute(k, dataAttrs[k]);\n            this.el.removeAttribute(k);\n        });\n    }\n\n    render() {\n        let className = `xpl-button\n                    xpl-button--${this.size}\n                    xpl-button--${this.state}\n                    xpl-button--${this.variant}`;\n        if (this.iconOnly) className += ' xpl-button--icon-only';\n        if (this.fullWidth) className += ' xpl-button--full-width';\n        if (this.link && this.disabled)\n            className += ' xpl-button--link-disabled';\n\n        return (\n            <Host class={className}>\n                {\n                    /**\n                     * Conditionally render either an <slot> or <button> element\n                     * depending on if there's an `link` or not\n                     */\n                    this.link ? (\n                        <slot></slot>\n                    ) : (\n                        <button\n                            disabled={this.disabled}\n                            name={this.name}\n                            type={this.type}\n                            value={this.value}\n                        >\n                            <slot></slot>\n                        </button>\n                    )\n                }\n            </Host>\n        );\n    }\n}\n","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-checkbox',\n})\nexport class XplCheckbox {\n    @Prop() checked?: boolean;\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    @Prop() indeterminate?: 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() checkboxChange: EventEmitter;\n\n    private input!: HTMLInputElement;\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-checkbox\"\n                    type=\"checkbox\"\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    id={this.id}\n                    indeterminate={this.indeterminate}\n                    onChange={() =>\n                        this.checkboxChange.emit(this.input.checked)\n                    }\n                    name={this.name}\n                    ref={(el) => (this.input = el as HTMLInputElement)}\n                    required={this.required}\n                    value={this.value}\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","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-content-area',\n})\nexport class XplContentArea {\n    /**\n     * @property {string}  size  - The content-area size.\n     */\n    @Prop() size: 'wide' | 'narrow' | 'full' = 'wide';\n\n    render() {\n        return (\n            <Host>\n                <main\n                    class={`xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}`}\n                >\n                    <div class=\"xpl-content-area\">\n                        <slot></slot>\n                    </div>\n                </main>\n            </Host>\n        );\n    }\n}\n","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","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","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","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","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"],"version":3}

package/dist/cjs/xpl-backdrop.cjs.entry.js

@@ -2,15 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-acf3dd7a.js');
+const index = require('./index-0fdb260e.js');
 
 const XplBackdrop = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area.
-     * If false, the position will be fixed and cover the whole view area.
-     */
     this.relative = false;
   }
   render() {
@@ -23,3 +19,5 @@ const XplBackdrop = class {
 };
 
 exports.xpl_backdrop = XplBackdrop;
+
+//# sourceMappingURL=xpl-backdrop.cjs.entry.js.map

package/dist/cjs/xpl-backdrop.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-backdrop.entry.cjs.js","mappings":";;;;;;MAKa,WAAW;;;oBAKQ,KAAK;;EAEjC,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE;QACH,cAAc,EAAE,IAAI;QACpB,qBAAqB,EAAE,CAAC,IAAI,CAAC,QAAQ;QACrC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;OAC1C,iBACW,MAAM,GACd,EACV;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-backdrop/xpl-backdrop.tsx"],"sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-backdrop',\n})\nexport class XplBackdrop {\n    /**\n     * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area.\n     * If false, the position will be fixed and cover the whole view area.\n     */\n    @Prop() relative: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'xpl-backdrop': true,\n                    'xpl-backdrop--fixed': !this.relative,\n                    'xpl-backdrop--relative': this.relative,\n                }}\n                aria-hidden=\"true\"\n            ></Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-badge.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dot = undefined;
+    this.variant = undefined;
+  }
+  render() {
+    let className = 'xpl-badge';
+    if (this.dot)
+      className += ' xpl-badge--dot';
+    if (this.variant)
+      className += ' xpl-badge--' + this.variant;
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("slot", null))));
+  }
+};
+
+exports.xpl_badge = XplBadge;
+
+//# sourceMappingURL=xpl-badge.cjs.entry.js.map

package/dist/cjs/xpl-badge.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-badge.entry.cjs.js","mappings":";;;;;;MAKa,QAAQ;;;;;;EAIjB,MAAM;IACF,IAAI,SAAS,GAAG,WAAW,CAAC;IAC5B,IAAI,IAAI,CAAC,GAAG;MAAE,SAAS,IAAI,iBAAiB,CAAC;IAC7C,IAAI,IAAI,CAAC,OAAO;MAAE,SAAS,IAAI,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;IAE7D,QACIA,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAE,SAAS,IACjBA,qBAAa,CACX,CACH,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-badge/xpl-badge.tsx"],"sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-badge',\n})\nexport class XplBadge {\n    @Prop() dot?: boolean;\n    @Prop() variant?: 'success' | 'warning' | 'inactive' | 'error';\n\n    render() {\n        let className = 'xpl-badge';\n        if (this.dot) className += ' xpl-badge--dot';\n        if (this.variant) className += ' xpl-badge--' + this.variant;\n\n        return (\n            <Host>\n                <div class={className}>\n                    <slot></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-breadcrumb-item.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplBreadcrumbItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
+    this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+  }
+  render() {
+    return (index.h(index.Host, { class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { role: "none" }, index.h("slot", null)), index.h("span", { innerHTML: `${this.chevron}` })));
+  }
+};
+
+exports.xpl_breadcrumb_item = XplBreadcrumbItem;
+
+//# sourceMappingURL=xpl-breadcrumb-item.cjs.entry.js.map

package/dist/cjs/xpl-breadcrumb-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-breadcrumb-item.entry.cjs.js","mappings":";;;;;;MAQa,iBAAiB;EAH9B;;;IAKY,YAAO,GAAG;;;KAGjB,CAAC;GAYL;EAVG,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,UAAU,IAC7CD,gBAAI,IAAI,EAAC,MAAM,IACXA,qBAAa,CACZ,EACLA,kBAAM,SAAS,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAI,CACnC,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.tsx"],"sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot unnamed - content rendered inside <li>, should be link or button (styled as link)\n */\n@Component({\n    tag: 'xpl-breadcrumb-item',\n})\nexport class XplBreadcrumbItem {\n    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.\n    private chevron = `<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"chevron-right\" class=\"svg-inline--fa fa-chevron-right fa-w-10\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n        <path fill=\"currentColor\" d=\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\"></path>\n    </svg>\n    `;\n\n    render() {\n        return (\n            <Host class=\"xpl-breadcrumb-item\" role=\"listitem\">\n                <li role=\"none\">\n                    <slot></slot>\n                </li>\n                <span innerHTML={`${this.chevron}`} />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-breadcrumbs.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplBreadcrumbs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { role: "list" }, index.h("slot", null)))));
+  }
+};
+
+exports.xpl_breadcrumbs = XplBreadcrumbs;
+
+//# sourceMappingURL=xpl-breadcrumbs.cjs.entry.js.map

package/dist/cjs/xpl-breadcrumbs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-breadcrumbs.entry.cjs.js","mappings":";;;;;;MAQa,cAAc;;;;EACvB,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAC,iBAAiB,gBAAY,YAAY,IAChDA,gBAAI,IAAI,EAAC,MAAM,IACXA,qBAAa,CACZ,CACH,CACH,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.tsx"],"sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot unnamed - content rendered <ol>, should be a group of <li> or <xpl-breadcrumb-item>\n */\n@Component({\n    tag: 'xpl-breadcrumbs',\n})\nexport class XplBreadcrumbs {\n    render() {\n        return (\n            <Host>\n                <nav class=\"xpl-breadcrumbs\" aria-label=\"Breadcrumb\">\n                    <ol role=\"list\">\n                        <slot></slot>\n                    </ol>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-button-row.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-acf3dd7a.js');
+const index = require('./index-0fdb260e.js');
 
 const XplButtonRow = class {
   constructor(hostRef) {
@@ -13,6 +13,9 @@ const XplButtonRow = class {
     this.onPrimary = () => this.clickPrimary.emit();
     this.onSecondary = () => this.clickSecondary.emit();
     this.onTertiary = () => this.clickTertiary.emit();
+    this.primary = undefined;
+    this.secondary = undefined;
+    this.tertiary = undefined;
   }
   render() {
     return (index.h(index.Host, { class: "xpl-button-row" }, index.h("div", { class: "xpl-button-row-inner" }, index.h("div", { class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
@@ -20,3 +23,5 @@ const XplButtonRow = class {
 };
 
 exports.xpl_button_row = XplButtonRow;
+
+//# sourceMappingURL=xpl-button-row.cjs.entry.js.map

package/dist/cjs/xpl-button-row.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-button-row.entry.cjs.js","mappings":";;;;;;MAKa,YAAY;;;;;;IA+Bb,cAAS,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3C,gBAAW,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAC/C,eAAU,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;;;;;EAErD,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IACxBD,iBAAK,KAAK,EAAC,sBAAsB,IAC7BA,iBAAK,KAAK,EAAC,sBAAsB,IAC5B,IAAI,CAAC,SAAS,KACXA,wBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,SAAS,CACN,CAChB,CACC,EACNA,iBAAK,KAAK,EAAC,uBAAuB,IAC7B,IAAI,CAAC,QAAQ,KACVA,wBACI,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,IAEvB,IAAI,CAAC,QAAQ,CACL,CAChB,EACA,IAAI,CAAC,SAAS,KACXA,wBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,SAAS,CACN,CAChB,EACA,IAAI,CAAC,OAAO,KACTA,wBACI,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,IAEtB,IAAI,CAAC,OAAO,CACJ,CAChB,CACC,CACJ,CACH,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-button-row/xpl-button-row.tsx"],"sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-button-row',\n})\nexport class XplButtonRow {\n    /**\n     * The text for the primary button.\n     */\n    @Prop({ reflect: false }) primary: 'string';\n    /**\n     * The text for the secondary button. If left\n     * empty, will not render a secondary button.\n     */\n    @Prop({ reflect: false }) secondary: 'string';\n    /**\n     * The text for the tertiary button. If left\n     * empty, will not render a secondary button.\n     */\n    @Prop({ reflect: false }) tertiary: 'string';\n\n    /**\n     * Fires on the primary button.\n     * If not set, the button can act as a standard\n     * submit button for a form.\n     */\n    @Event() clickPrimary: EventEmitter;\n    /**\n     * Adds an event listener to the secondary button.\n     */\n    @Event() clickSecondary: EventEmitter;\n    /**\n     * Adds an event listener to the tertiary button.\n     */\n    @Event() clickTertiary: EventEmitter;\n\n    private onPrimary = () => this.clickPrimary.emit();\n    private onSecondary = () => this.clickSecondary.emit();\n    private onTertiary = () => this.clickTertiary.emit();\n\n    render() {\n        return (\n            <Host class=\"xpl-button-row\">\n                <div class=\"xpl-button-row-inner\">\n                    <div class=\"xpl-button-row__left\">\n                        {this.secondary && (\n                            <xpl-button\n                                variant=\"secondary\"\n                                type=\"button\"\n                                onClick={this.onSecondary}\n                            >\n                                {this.secondary}\n                            </xpl-button>\n                        )}\n                    </div>\n                    <div class=\"xpl-button-row__right\">\n                        {this.tertiary && (\n                            <xpl-button\n                                variant=\"subtle\"\n                                type=\"button\"\n                                onClick={this.onTertiary}\n                            >\n                                {this.tertiary}\n                            </xpl-button>\n                        )}\n                        {this.secondary && (\n                            <xpl-button\n                                variant=\"secondary\"\n                                type=\"button\"\n                                onClick={this.onSecondary}\n                            >\n                                {this.secondary}\n                            </xpl-button>\n                        )}\n                        {this.primary && (\n                            <xpl-button\n                                class=\"xpl-button-row__primary\"\n                                onClick={this.onPrimary}\n                            >\n                                {this.primary}\n                            </xpl-button>\n                        )}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-button.cjs.entry.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.disabled = undefined;
+    this.link = undefined;
+    this.iconOnly = undefined;
+    this.fullWidth = undefined;
+    this.name = undefined;
+    this.size = 'default';
+    this.type = undefined;
+    this.value = undefined;
+    this.variant = 'primary';
+    this.state = 'neutral';
+  }
+  componentDidRender() {
+    const attrs = this.el.attributes;
+    const dataAttrs = Object.keys(attrs)
+      .filter((k) => {
+      const propertyName = attrs[k].name;
+      if (propertyName) {
+        return (propertyName.includes('data-test') ||
+          propertyName.includes('aria-'));
+      }
+      return false;
+    })
+      .reduce((acc, k) => {
+      return Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value });
+    }, {});
+    const child = this.el.querySelector('button');
+    Object.keys(dataAttrs).forEach((k) => {
+      child.setAttribute(k, dataAttrs[k]);
+      this.el.removeAttribute(k);
+    });
+  }
+  render() {
+    let className = `xpl-button
+                    xpl-button--${this.size}
+                    xpl-button--${this.state}
+                    xpl-button--${this.variant}`;
+    if (this.iconOnly)
+      className += ' xpl-button--icon-only';
+    if (this.fullWidth)
+      className += ' xpl-button--full-width';
+    if (this.link && this.disabled)
+      className += ' xpl-button--link-disabled';
+    return (index.h(index.Host, { class: className }, 
+    /**
+     * Conditionally render either an <slot> or <button> element
+     * depending on if there's an `link` or not
+     */
+    this.link ? (index.h("slot", null)) : (index.h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.xpl_button = XplButton;
+
+//# sourceMappingURL=xpl-button.cjs.entry.js.map

package/dist/cjs/xpl-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-button.entry.cjs.js","mappings":";;;;;;MAIa,SAAS;;;;;;;;gBAyBsB,SAAS;;;mBAYK,SAAS;iBAIZ,SAAS;;EAE5D,kBAAkB;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;IACjC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;OAC/B,MAAM,CAAC,CAAC,CAAC;MACN,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;MACnC,IAAI,YAAY,EAAE;QACd,QACI,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC;UAClC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,EAChC;OACL;MACD,OAAO,KAAK,CAAC;KAChB,CAAC;OACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC;MACX,uCAAY,GAAG,KAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,IAAG;KACtD,EAAE,EAAE,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;MAC7B,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;MACpC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;KAC9B,CAAC,CAAC;GACN;EAED,MAAM;IACF,IAAI,SAAS,GAAG;kCACU,IAAI,CAAC,IAAI;kCACT,IAAI,CAAC,KAAK;kCACV,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC,IAAI,IAAI,CAAC,QAAQ;MAAE,SAAS,IAAI,wBAAwB,CAAC;IACzD,IAAI,IAAI,CAAC,SAAS;MAAE,SAAS,IAAI,yBAAyB,CAAC;IAC3D,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;MAC1B,SAAS,IAAI,4BAA4B,CAAC;IAE9C,QACIA,QAACC,UAAI,IAAC,KAAK,EAAE,SAAS;;;;;IAMd,IAAI,CAAC,IAAI,IACLD,qBAAa,KAEbA,oBACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAEjBA,qBAAa,CACR,CACZ,CAEF,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-button/xpl-button.tsx"],"sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n@Component({\n    tag: 'xpl-button',\n})\nexport class XplButton {\n    @Element() el: HTMLXplButtonElement;\n    /**\n     * whether button should be disabled\n     */\n    @Prop() disabled?: boolean;\n    /**\n     * whether button should yield a slot for a link tag\n     */\n    @Prop() link?: boolean;\n    /**\n     * whether button should render icon only\n     */\n    @Prop() iconOnly?: boolean;\n    /**\n     * whether button should render with full width\n     */\n    @Prop() fullWidth?: boolean;\n    /**\n     * @property {string} - button name attribute\n     */\n    @Prop() name?: string;\n    /**\n     * @property {\"default\" | \"sm\" | \"xs\"} - button size\n     */\n    @Prop() size: 'default' | 'sm' | 'xs' = 'default';\n    /**\n     * @property {\"submit\" | \"reset\" | \"button\"} - button type attribute\n     */\n    @Prop() type?: 'submit' | 'reset' | 'button';\n    /**\n     * @property {string} - button value attribute\n     */\n    @Prop() value?: string;\n    /**\n     * @property {\"primary\" | \"secondary\" | \"subtle\"} - button variant\n     */\n    @Prop() variant: 'primary' | 'secondary' | 'subtle' = 'primary';\n    /**\n     * @property {\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red\n     */\n    @Prop() state: 'neutral' | 'warning' | 'success' = 'neutral';\n\n    componentDidRender() {\n        const attrs = this.el.attributes;\n        const dataAttrs = Object.keys(attrs)\n            .filter((k) => {\n                const propertyName = attrs[k].name;\n                if (propertyName) {\n                    return (\n                        propertyName.includes('data-test') ||\n                        propertyName.includes('aria-')\n                    );\n                }\n                return false;\n            })\n            .reduce((acc, k) => {\n                return { ...acc, [attrs[k].name]: attrs[k].value };\n            }, {});\n\n        const child = this.el.querySelector('button');\n        Object.keys(dataAttrs).forEach((k) => {\n            child.setAttribute(k, dataAttrs[k]);\n            this.el.removeAttribute(k);\n        });\n    }\n\n    render() {\n        let className = `xpl-button\n                    xpl-button--${this.size}\n                    xpl-button--${this.state}\n                    xpl-button--${this.variant}`;\n        if (this.iconOnly) className += ' xpl-button--icon-only';\n        if (this.fullWidth) className += ' xpl-button--full-width';\n        if (this.link && this.disabled)\n            className += ' xpl-button--link-disabled';\n\n        return (\n            <Host class={className}>\n                {\n                    /**\n                     * Conditionally render either an <slot> or <button> element\n                     * depending on if there's an `link` or not\n                     */\n                    this.link ? (\n                        <slot></slot>\n                    ) : (\n                        <button\n                            disabled={this.disabled}\n                            name={this.name}\n                            type={this.type}\n                            value={this.value}\n                        >\n                            <slot></slot>\n                        </button>\n                    )\n                }\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-checkbox.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+const index$1 = require('./index-318d5fc7.js');
+
+const XplCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
+    this.checked = undefined;
+    this.description = undefined;
+    this.disabled = undefined;
+    this.indeterminate = undefined;
+    this.name = undefined;
+    this.required = undefined;
+    this.styled = undefined;
+    this.value = undefined;
+    this.id = index$1.v4();
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'xpl-checkbox-radio-container': true,
+        styled: this.styled,
+        disabled: this.disabled,
+      } }, index.h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: () => this.checkboxChange.emit(this.input.checked), name: this.name, ref: (el) => (this.input = el), required: this.required, value: this.value }), index.h("label", { class: {
+        'xpl-label': true,
+        'xpl-label--disabled': this.disabled,
+      }, htmlFor: this.id }, index.h("slot", null), this.description && (index.h("small", { class: {
+        'xpl-description': true,
+        'xpl-description--disabled': this.disabled,
+      } }, this.description)))));
+  }
+};
+
+exports.xpl_checkbox = XplCheckbox;
+
+//# sourceMappingURL=xpl-checkbox.cjs.entry.js.map

package/dist/cjs/xpl-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-checkbox.entry.cjs.js","mappings":";;;;;;;MAca,WAAW;;;;;;;;;;;;cAUEA,UAAI,EAAE;;EAO5B,MAAM;IACF,QACIC,QAACC,UAAI,IACD,KAAK,EAAE;QACH,8BAA8B,EAAE,IAAI;QACpC,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,IAEDD,mBACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,MACN,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAEhD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAClD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,GACZ,EACTA,mBACI,KAAK,EAAE;QACH,WAAW,EAAE,IAAI;QACjB,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACvC,EACD,OAAO,EAAE,IAAI,CAAC,EAAE,IAEhBA,qBAAa,EACZ,IAAI,CAAC,WAAW,KACbA,mBACI,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI;QACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;OAC7C,IAEA,IAAI,CAAC,WAAW,CACb,CACX,CACG,CACL,EACT;GACL;;;;;","names":["uuid","h","Host"],"sources":["./src/components/components/xpl-checkbox/xpl-checkbox.tsx"],"sourcesContent":["import {\n    Component,\n    Host,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\n@Component({\n    tag: 'xpl-checkbox',\n})\nexport class XplCheckbox {\n    @Prop() checked?: boolean;\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    @Prop() indeterminate?: 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() checkboxChange: EventEmitter;\n\n    private input!: HTMLInputElement;\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-checkbox\"\n                    type=\"checkbox\"\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    id={this.id}\n                    indeterminate={this.indeterminate}\n                    onChange={() =>\n                        this.checkboxChange.emit(this.input.checked)\n                    }\n                    name={this.name}\n                    ref={(el) => (this.input = el as HTMLInputElement)}\n                    required={this.required}\n                    value={this.value}\n                ></input>\n                <label\n                    class={{\n                        'xpl-label': true,\n                        'xpl-label--disabled': this.disabled,\n                    }}\n                    htmlFor={this.id}\n                >\n                    <slot></slot>\n                    {this.description && (\n                        <small\n                            class={{\n                                'xpl-description': true,\n                                'xpl-description--disabled': this.disabled,\n                            }}\n                        >\n                            {this.description}\n                        </small>\n                    )}\n                </label>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-choicelist.cjs.entry.js

@@ -2,11 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-acf3dd7a.js');
+const index = require('./index-0fdb260e.js');
 
 const XplChoicelist = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.choices = undefined;
+    this.description = undefined;
+    this.heading = undefined;
+    this.multi = undefined;
+    this.name = undefined;
+    this.styled = undefined;
+    this.selected = undefined;
   }
   componentWillLoad() {
     this.selected =
@@ -41,3 +48,5 @@ const XplChoicelist = class {
 };
 
 exports.xpl_choicelist = XplChoicelist;
+
+//# sourceMappingURL=xpl-choicelist.cjs.entry.js.map

package/dist/cjs/xpl-choicelist.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-choicelist.entry.cjs.js","mappings":";;;;;;MAMa,aAAa;;;;;;;;;;;EAiCtB,iBAAiB;IACb,IAAI,CAAC,QAAQ;MACT,IAAI,CAAC,OAAO,KAAK,SAAS;QAC1B,IAAI,CAAC,OAAO,KAAK,IAAI;QACrB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;UACjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;UAC7B,EAAE,CAAC;GAChB;EAED,MAAM;IACF,IAAI,SAAS,GAAG,gBAAgB,CAAC;IACjC,IAAI,IAAI,CAAC,MAAM;MAAE,SAAS,IAAI,yBAAyB,CAAC;IAExD,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,0BAA0B,IACjC,IAAI,CAAC,OAAO,KAAK,SAAS;MAC3B,IAAI,CAAC,WAAW,KAAK,SAAS,IAC1BD,iBAAK,KAAK,EAAC,wBAAwB,IAC9B,IAAI,CAAC,OAAO,IAAIA,oBAAK,IAAI,CAAC,OAAO,CAAM,EACvC,IAAI,CAAC,WAAW,IAAIA,mBAAI,IAAI,CAAC,WAAW,CAAK,CAC5C,IACN,IAAI,EACP,IAAI,CAAC,OAAO,KACTA,gBAAI,KAAK,EAAE,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CACb,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC;MAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IACpBA,0BACI,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,CAAC,CAElB;UACG,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;UACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAC7B,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CACnC,CAAC;SACL,IAEA,KAAK,CACK,KAEfA,uBACI,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,aAAa,EAAE;UACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAC7B,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CACpB,CAAC;SACL,IAEA,KAAK,CACE,CACf,CAAC;MAEF,IAAI,SAAS,GACT,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;UACzB,UAAU;UACV,EAAE,CAAC;MAEb,QACIA,gBAAI,KAAK,EAAE,SAAS,IACf,KAAK,EACL,QAAQ,KACLA,oBACK,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK;QAChB,MAAM,UAAU,GAAG,IAAI;WAClB,KAAK,IACNA,0BACI,WAAW,EACP,KAAK,CAAC,WAAW,IAGpB,KAAK,CAAC,KAAK,CACD,KAEfA,uBACI,WAAW,EACP,KAAK,CAAC,WAAW,IAGpB,KAAK,CAAC,KAAK,CACJ,CACf,CAAC;QACF,QACIA,oBAAK,UAAU,CAAM,EACvB;OACL,CAAC,CACD,CACR,CACA,EACP;KACL,CACJ,CACA,CACR,CACE,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-choicelist/xpl-choicelist.tsx"],"sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { Choice } from './choice';\n\n@Component({\n    tag: 'xpl-choicelist',\n})\nexport class XplChoicelist {\n    /**\n     * An array of choices to be displayed in the list.\n     * Each choice should be an object with keys:\n     * - `checked` [boolean] - whether to pre-check or not\n     * - `children` [Choice[]] - an array of child choices (recursive)\n     * - `description` [string]\n     * - `label` [string]\n     */\n    @Prop() choices: Choice[];\n    /**\n     * Descriptive text to be displayed above the choicelist.\n     */\n    @Prop() description?: string;\n    /**\n     * The title text to be displayed above the choicelist.\n     */\n    @Prop() heading?: string;\n    /**\n     * Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons.\n     */\n    @Prop() multi?: boolean;\n    /**\n     * The `name` to be associated with form data.\n     */\n    @Prop() name?: string;\n    /**\n     * If `true`, will include borders around the list and between individual choices.\n     */\n    @Prop() styled?: boolean;\n\n    @State() selected: boolean[];\n\n    componentWillLoad() {\n        this.selected =\n            this.choices !== undefined &&\n            this.choices !== null &&\n            this.choices.length > 0\n                ? this.choices.map(() => false)\n                : [];\n    }\n\n    render() {\n        let className = 'xpl-choicelist';\n        if (this.styled) className += ' xpl-choicelist--styled';\n\n        return (\n            <Host class=\"xpl-choicelist-container\">\n                {this.heading !== undefined ||\n                this.description !== undefined ? (\n                    <div class=\"xpl-choicelist-heading\">\n                        {this.heading && <h3>{this.heading}</h3>}\n                        {this.description && <p>{this.description}</p>}\n                    </div>\n                ) : null}\n                {this.choices && (\n                    <ul class={className}>\n                        {this.choices.map(\n                            ({ children, description, label }, i) => {\n                                const inner = this.multi ? (\n                                    <xpl-checkbox\n                                        description={description}\n                                        name={this.name}\n                                        onCheckboxChange={(e: {\n                                            detail: boolean;\n                                        }) => {\n                                            const { detail } = e;\n                                            this.selected = this.selected.map(\n                                                (v, j) => (i === j ? detail : v)\n                                            );\n                                        }}\n                                    >\n                                        {label}\n                                    </xpl-checkbox>\n                                ) : (\n                                    <xpl-radio\n                                        description={description}\n                                        name={this.name}\n                                        onRadioChange={() => {\n                                            this.selected = this.selected.map(\n                                                (_, j) => i === j\n                                            );\n                                        }}\n                                    >\n                                        {label}\n                                    </xpl-radio>\n                                );\n\n                                let className =\n                                    this.styled && this.selected[i]\n                                        ? 'selected'\n                                        : '';\n\n                                return (\n                                    <li class={className}>\n                                        {inner}\n                                        {children && (\n                                            <ul>\n                                                {children.map((child) => {\n                                                    const childInner = this\n                                                        .multi ? (\n                                                        <xpl-checkbox\n                                                            description={\n                                                                child.description\n                                                            }\n                                                        >\n                                                            {child.label}\n                                                        </xpl-checkbox>\n                                                    ) : (\n                                                        <xpl-radio\n                                                            description={\n                                                                child.description\n                                                            }\n                                                        >\n                                                            {child.label}\n                                                        </xpl-radio>\n                                                    );\n                                                    return (\n                                                        <li>{childInner}</li>\n                                                    );\n                                                })}\n                                            </ul>\n                                        )}\n                                    </li>\n                                );\n                            }\n                        )}\n                    </ul>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}