@xplortech/apollo-core 0.5.2 → 1.0.0-beta.0

package/dist/apollo-core/p-9c5ca308.entry.js

@@ -1 +0,0 @@
-import{r as s,c as i,h as t,H as l}from"./p-8b6633c7.js";import{v as e}from"./p-ad90fe4d.js";const h=class{constructor(t){s(this,t),this.checkboxChange=i(this,"checkboxChange",7),this.id=e()}render(){return t(l,{class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},t("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:s=>this.input=s,required:this.required,value:this.value}),t("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},t("slot",null),this.description&&t("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},a=class{constructor(t){s(this,t),this.radioChange=i(this,"radioChange",7),this.id=e()}render(){return t(l,{class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},t("input",{class:"xpl-radio",type:"radio",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name,required:this.required,value:this.value,onChange:()=>this.radioChange.emit(!0)}),t("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},t("slot",null),this.description&&t("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}};export{h as xpl_checkbox,a as xpl_radio}

package/dist/apollo-core/p-bd4a7e3c.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as e,H as i}from"./p-8b6633c7.js";const h=class{constructor(e){t(this,e),this.tableSelect=s(this,"tableSelect",7),this.areAllSelected=!1,this.hasScrolled=!1,this.selectAll=t=>{const{target:s}=t;if(!(s instanceof HTMLInputElement))return;const{checked:e}=s;this.areAllSelected=e,this.selected=this.selected.map((()=>e)),this.onChange()},this.selectOne=(t,s)=>{const{target:e}=t;if(!(e instanceof HTMLInputElement))return;const{checked:i}=e;this.areAllSelected=!1,this.selected=this.selected.map(((t,e)=>e===s?i:t)),this.onChange()},this.onChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onScroll=()=>{this.hasScrolled=this.container.scrollLeft>0},this.sortBy=(t,s=!0)=>{this.rowData.sort(((e,i)=>{const h=e[t],l=i[t];if("number"==typeof h&&"number"==typeof l){const t=s?1:-1;return h>l?t:-t}return-1})),this.rowData=Array.from(this.rowData),this.render()}}componentWillLoad(){this.areAllSelected=!1,this.rowData=void 0!==this.data?Array.from(this.data):[],this.selected=new Array(this.rowData.length).fill(!1)}render(){let t="xpl-table";return this.striped&&(t+=" xpl-table--striped"),this.freeze&&(t+=" xpl-table--freeze"),this.hasScrolled&&(t+=" xpl-table--has-scrolled"),e(i,null,e("div",{class:"xpl-table-container",onScroll:this.onScroll,ref:t=>this.container=t},e("table",{class:t},this.columns&&e("thead",null,this.columns.map(((t,s)=>e("th",null,this.multiselect&&0===s?e("label",{htmlFor:"__xpl-table-th"},e("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onChange:t=>{this.selectAll(t)},type:"checkbox"}),t):t)))),e("tbody",null,this.rowData.map(((t,s)=>e("tr",{class:this.selected&&this.selected[s]?"xpl-table-row-selected":""},t.map(((t,i)=>e("td",null,this.multiselect&&0===i?e("label",{htmlFor:"__xpl-table-row-"+s},e("input",{id:"__xpl-table-row-"+s,checked:this.selected[s],type:"checkbox",onChange:t=>this.selectOne(t,s)}),e("div",{innerHTML:t})):e("div",{innerHTML:t})))))))))))}};export{h as xpl_table}

package/dist/apollo-core/p-dab8e7a1.entry.js

@@ -1 +0,0 @@
-import{r as s,c as t,h as l,H as c}from"./p-8b6633c7.js";const o=class{constructor(l){s(this,l),this.close=t(this,"close",7)}render(){return l(c,{class:"xpl-tag-container"},l("button",{class:"xpl-tag",onClick:()=>{this.close.emit()}},l("slot",null)),l("button",{class:"xpl-tag__close",onClick:()=>{this.close.emit()}},"×"))}};export{o as xpl_tag}

package/dist/cjs/xpl-application-shell_11.cjs.entry.js

@@ -1,230 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-944adb2e.js');
-require('./regular-872f5226.js');
-
-const XplApplicationShell = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
-     */
-    this.withSubnav = false;
-    /**
-   * @property {boolean} - Whether or not the Grid should have space for a utility bar
-   */
-    this.withUtility = true;
-    /**
-     * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
-     */
-    this.navWidth = 'default';
-    /**
-     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
-     */
-    this.navOpen = true;
-  }
-  closeNavOnMobile() {
-    if (window.innerWidth <= 640) {
-      this.navOpen = false;
-    }
-  }
-  navToggleHandler() {
-    this.navOpen = !this.navOpen;
-  }
-  navWithHandler(event) {
-    this.navWidth = event.detail;
-  }
-  onWindowResize() {
-    this.closeNavOnMobile();
-  }
-  connectedCallback() {
-    this.closeNavOnMobile();
-  }
-  render() {
-    let applicationShellClasses = "xpl-application-shell";
-    if (this.withUtility)
-      applicationShellClasses += " xpl-application-shell--with_utility";
-    let navClasses = "xpl-application-shell__nav";
-    navClasses += (this.navOpen) ? ` xpl-application-shell__nav--${this.navWidth}--open` : ` xpl-application-shell__nav--${this.navWidth}`;
-    return (index.h(index.Host, { class: applicationShellClasses }, index.h("div", { class: navClasses }, index.h("slot", { name: "nav" })), index.h("div", { class: "xpl-application-shell__subnav" }, index.h("slot", { name: "subnav" })), index.h("div", { class: "xpl-application-shell__utility" }, index.h("slot", { name: "utility" })), index.h("div", { class: "xpl-application-shell__content" }, index.h("slot", { name: "content" })), index.h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: { "xpl-application-shell__backdrop--open": this.navOpen }, relative: true })));
-  }
-};
-
-const XplAvatar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.disabled = false;
-  }
-  render() {
-    let className = "xpl-avatar";
-    if (this.size)
-      className += ` xpl-avatar--${this.size}`;
-    if (this.color)
-      className += ` xpl-avatar--${this.color}`;
-    const inner = (index.h("div", null, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { class: `xpl-avatar__dot--${this.status}` })));
-    return (index.h(index.Host, null, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (index.h("div", { class: className }, inner))));
-  }
-};
-
-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() {
-    return (index.h(index.Host, { class: {
-        'xpl-backdrop': true,
-        'xpl-backdrop--fixed': !this.relative,
-        'xpl-backdrop--relative': this.relative
-      }, "aria-hidden": "true" }));
-  }
-};
-
-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}` })));
-  }
-  ;
-};
-
-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)))));
-  }
-  ;
-};
-
-const XplButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = "default";
-    this.variant = "primary";
-  }
-  render() {
-    let className = "xpl-button";
-    if (this.variant === "secondary")
-      className += " xpl-button--secondary";
-    if (this.variant === "subtle")
-      className += " xpl-button--subtle";
-    if (this.variant === "warning")
-      className += " xpl-button--warning";
-    if (this.size === "sm")
-      className += " xpl-button--sm";
-    if (this.size === "xs")
-      className += " xpl-button--xs";
-    if (this.iconOnly)
-      className += " xpl-button--icon-only";
-    const icon = this.icon ? (index.h("i", { class: `far fa-${this.icon} ${this.iconTrailing ? "trailing" : this.iconOnly ? "" : "leading"}` })) : null;
-    return (index.h(index.Host, { role: "button" }, 
-    /**
-     * Conditionally render either an <a> or <button> element
-     * depending on if there's an `href` or not
-     */
-    this.href ? (index.h("a", { class: className, href: this.href, role: "button" }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon)) : (index.h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon))));
-  }
-};
-
-const XplContentArea = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-      * @property {string}  size  - The content-area size.
-    */
-    this.size = "wide";
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { class: "xpl-content-area" }, index.h("slot", null)))));
-  }
-};
-
-const XplMainNav = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.navWidth = index.createEvent(this, "navWidth", 7);
-    /**
-     * @property {string}  width  - The width of the Main Nav.
-     */
-    this.width = "default";
-  }
-  navWidthHandler() {
-    this.navWidth.emit(this.width);
-  }
-  connectedCallback() {
-    this.navWidthHandler();
-  }
-  componentDidUpdate() {
-    this.navWidthHandler();
-  }
-  render() {
-    return (index.h(index.Host, { class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", null, index.h("header", { "aria-label": "Sidebar Header" }, index.h("slot", { name: "logo" }), index.h("slot", { name: "brand-name" })), index.h("div", { class: "xpl-main-nav__main_section" }, index.h("slot", { name: "navigation" })), index.h("footer", { class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { name: "footer" })))));
-  }
-};
-
-const XplNavItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, { class: "xpl-nav-item", role: "listitem" }, index.h("slot", { name: "link" }, index.h("slot", { name: "icon" }), index.h("slot", null))));
-  }
-};
-
-const XplSecondaryNav = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, { class: "xpl-secondary-nav" }, index.h("nav", { "aria-label": "Secondary Nav" }, index.h("slot", null))));
-  }
-};
-
-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>
-    `;
-  }
-  onNavToggle() {
-    this.open = !this.open;
-    this.navOpen.emit(this.open);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl
-      ?
-        index.h("div", null, index.h("button", { onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), index.h("slot", { name: "aside" }))
-      :
-        index.h("slot", { name: "aside" }), index.h("slot", { name: "main" }))));
-  }
-};
-
-exports.xpl_application_shell = XplApplicationShell;
-exports.xpl_avatar = XplAvatar;
-exports.xpl_backdrop = XplBackdrop;
-exports.xpl_breadcrumb_item = XplBreadcrumbItem;
-exports.xpl_breadcrumbs = XplBreadcrumbs;
-exports.xpl_button = XplButton;
-exports.xpl_content_area = XplContentArea;
-exports.xpl_main_nav = XplMainNav;
-exports.xpl_nav_item = XplNavItem;
-exports.xpl_secondary_nav = XplSecondaryNav;
-exports.xpl_utility_bar = XplUtilityBar;

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

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-944adb2e.js');
-
-const XplBadge = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  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;

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

@@ -1,51 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-944adb2e.js');
-const v4 = require('./v4-14140ff3.js');
-
-const XplCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
-    this.id = v4.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))));
-  }
-};
-
-const XplRadio = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.radioChange = index.createEvent(this, "radioChange", 7);
-    this.id = v4.v4();
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        "xpl-checkbox-radio-container": true,
-        "styled": this.styled,
-        "disabled": this.disabled,
-      } }, index.h("input", { class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, value: this.value, onChange: () => this.radioChange.emit(true) }), 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;
-exports.xpl_radio = XplRadio;

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

@@ -1,89 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-944adb2e.js');
-
-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))
-        return;
-      const { checked } = target;
-      this.areAllSelected = checked;
-      this.selected = this.selected.map(() => checked);
-      this.onChange();
-    };
-    this.selectOne = (e, i) => {
-      const { target } = e;
-      if (!(target instanceof HTMLInputElement))
-        return;
-      const { checked } = target;
-      this.areAllSelected = false;
-      this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));
-      this.onChange();
-    };
-    this.onChange = () => {
-      this.tableSelect.emit({
-        selected: this.selected,
-        areAllSelected: this.areAllSelected,
-      });
-    };
-    this.onScroll = () => {
-      this.hasScrolled = this.container.scrollLeft > 0;
-    };
-    /**
-     * TODO: Need to figure out how this interplays with data
-     * received from an API/server
-     */
-    this.sortBy = (col, 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);
-  }
-  render() {
-    let className = "xpl-table";
-    if (this.striped)
-      className += " xpl-table--striped";
-    if (this.freeze)
-      className += " xpl-table--freeze";
-    if (this.hasScrolled)
-      className += " xpl-table--has-scrolled";
-    return (index.h(index.Host, null, index.h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("table", { class: className }, this.columns && (index.h("thead", null, this.columns.map((column, i) => {
-      return (index.h("th", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-th" }, index.h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
-        // appear indeterminate when at least one but not all
-        // are selected
-        indeterminate: !this.areAllSelected &&
-          this.selected.some((a) => a), onChange: (e) => {
-          this.selectAll(e);
-        }, type: "checkbox" }), column)) : (column)));
-    }))), index.h("tbody", null, this.rowData.map((row, rowNum) => {
-      return (index.h("tr", { class: this.selected && this.selected[rowNum]
-          ? "xpl-table-row-selected"
-          : "" }, row.map((cell, i) => {
-        return (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-row-" + rowNum }, index.h("input", { id: "__xpl-table-row-" + rowNum, checked: this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))));
-      })));
-    }))))));
-  }
-};
-
-exports.xpl_table = XplTable;

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

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-944adb2e.js');
-
-const XplTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.close = index.createEvent(this, "close", 7);
-  }
-  render() {
-    return (index.h(index.Host, { class: "xpl-tag-container" }, index.h("button", { class: "xpl-tag", onClick: () => {
-        this.close.emit();
-      } }, index.h("slot", null)), index.h("button", { class: "xpl-tag__close", onClick: () => {
-        this.close.emit();
-      } }, "\u00D7")));
-  }
-};
-
-exports.xpl_tag = XplTag;

package/dist/esm/xpl-application-shell_11.entry.js

@@ -1,216 +0,0 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-899dba3b.js';
-import './regular-86225e9d.js';
-
-const XplApplicationShell = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
-     */
-    this.withSubnav = false;
-    /**
-   * @property {boolean} - Whether or not the Grid should have space for a utility bar
-   */
-    this.withUtility = true;
-    /**
-     * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
-     */
-    this.navWidth = 'default';
-    /**
-     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
-     */
-    this.navOpen = true;
-  }
-  closeNavOnMobile() {
-    if (window.innerWidth <= 640) {
-      this.navOpen = false;
-    }
-  }
-  navToggleHandler() {
-    this.navOpen = !this.navOpen;
-  }
-  navWithHandler(event) {
-    this.navWidth = event.detail;
-  }
-  onWindowResize() {
-    this.closeNavOnMobile();
-  }
-  connectedCallback() {
-    this.closeNavOnMobile();
-  }
-  render() {
-    let applicationShellClasses = "xpl-application-shell";
-    if (this.withUtility)
-      applicationShellClasses += " xpl-application-shell--with_utility";
-    let navClasses = "xpl-application-shell__nav";
-    navClasses += (this.navOpen) ? ` xpl-application-shell__nav--${this.navWidth}--open` : ` xpl-application-shell__nav--${this.navWidth}`;
-    return (h(Host, { class: applicationShellClasses }, h("div", { class: navClasses }, h("slot", { name: "nav" })), h("div", { class: "xpl-application-shell__subnav" }, h("slot", { name: "subnav" })), h("div", { class: "xpl-application-shell__utility" }, h("slot", { name: "utility" })), h("div", { class: "xpl-application-shell__content" }, h("slot", { name: "content" })), h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: { "xpl-application-shell__backdrop--open": this.navOpen }, relative: true })));
-  }
-};
-
-const XplAvatar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.disabled = false;
-  }
-  render() {
-    let className = "xpl-avatar";
-    if (this.size)
-      className += ` xpl-avatar--${this.size}`;
-    if (this.color)
-      className += ` xpl-avatar--${this.color}`;
-    const inner = (h("div", null, this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" }, h("slot", null))), this.status && h("div", { class: `xpl-avatar__dot--${this.status}` })));
-    return (h(Host, null, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (h("div", { class: className }, inner))));
-  }
-};
-
-const XplBackdrop = class {
-  constructor(hostRef) {
-    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() {
-    return (h(Host, { class: {
-        'xpl-backdrop': true,
-        'xpl-backdrop--fixed': !this.relative,
-        'xpl-backdrop--relative': this.relative
-      }, "aria-hidden": "true" }));
-  }
-};
-
-const XplBreadcrumbItem = class {
-  constructor(hostRef) {
-    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 (h(Host, { class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { role: "none" }, h("slot", null)), h("span", { innerHTML: `${this.chevron}` })));
-  }
-  ;
-};
-
-const XplBreadcrumbs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { role: "list" }, h("slot", null)))));
-  }
-  ;
-};
-
-const XplButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = "default";
-    this.variant = "primary";
-  }
-  render() {
-    let className = "xpl-button";
-    if (this.variant === "secondary")
-      className += " xpl-button--secondary";
-    if (this.variant === "subtle")
-      className += " xpl-button--subtle";
-    if (this.variant === "warning")
-      className += " xpl-button--warning";
-    if (this.size === "sm")
-      className += " xpl-button--sm";
-    if (this.size === "xs")
-      className += " xpl-button--xs";
-    if (this.iconOnly)
-      className += " xpl-button--icon-only";
-    const icon = this.icon ? (h("i", { class: `far fa-${this.icon} ${this.iconTrailing ? "trailing" : this.iconOnly ? "" : "leading"}` })) : null;
-    return (h(Host, { role: "button" }, 
-    /**
-     * Conditionally render either an <a> or <button> element
-     * depending on if there's an `href` or not
-     */
-    this.href ? (h("a", { class: className, href: this.href, role: "button" }, !this.iconTrailing && icon, this.iconOnly ? (h("span", { class: "sr-only" }, h("slot", null))) : (h("slot", null)), this.iconTrailing && icon)) : (h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value }, !this.iconTrailing && icon, this.iconOnly ? (h("span", { class: "sr-only" }, h("slot", null))) : (h("slot", null)), this.iconTrailing && icon))));
-  }
-};
-
-const XplContentArea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-      * @property {string}  size  - The content-area size.
-    */
-    this.size = "wide";
-  }
-  render() {
-    return (h(Host, null, h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { class: "xpl-content-area" }, h("slot", null)))));
-  }
-};
-
-const XplMainNav = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.navWidth = createEvent(this, "navWidth", 7);
-    /**
-     * @property {string}  width  - The width of the Main Nav.
-     */
-    this.width = "default";
-  }
-  navWidthHandler() {
-    this.navWidth.emit(this.width);
-  }
-  connectedCallback() {
-    this.navWidthHandler();
-  }
-  componentDidUpdate() {
-    this.navWidthHandler();
-  }
-  render() {
-    return (h(Host, { class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", null, h("header", { "aria-label": "Sidebar Header" }, h("slot", { name: "logo" }), h("slot", { name: "brand-name" })), h("div", { class: "xpl-main-nav__main_section" }, h("slot", { name: "navigation" })), h("footer", { class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { name: "footer" })))));
-  }
-};
-
-const XplNavItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: "xpl-nav-item", role: "listitem" }, h("slot", { name: "link" }, h("slot", { name: "icon" }), h("slot", null))));
-  }
-};
-
-const XplSecondaryNav = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: "xpl-secondary-nav" }, h("nav", { "aria-label": "Secondary Nav" }, h("slot", null))));
-  }
-};
-
-const XplUtilityBar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.navOpen = 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>
-    `;
-  }
-  onNavToggle() {
-    this.open = !this.open;
-    this.navOpen.emit(this.open);
-  }
-  render() {
-    return (h(Host, null, h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl
-      ?
-        h("div", null, h("button", { onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), h("slot", { name: "aside" }))
-      :
-        h("slot", { name: "aside" }), h("slot", { name: "main" }))));
-  }
-};
-
-export { XplApplicationShell as xpl_application_shell, XplAvatar as xpl_avatar, XplBackdrop as xpl_backdrop, XplBreadcrumbItem as xpl_breadcrumb_item, XplBreadcrumbs as xpl_breadcrumbs, XplButton as xpl_button, XplContentArea as xpl_content_area, XplMainNav as xpl_main_nav, XplNavItem as xpl_nav_item, XplSecondaryNav as xpl_secondary_nav, XplUtilityBar as xpl_utility_bar };

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

@@ -1,17 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-899dba3b.js';
-
-const XplBadge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    let className = "xpl-badge";
-    if (this.dot)
-      className += " xpl-badge--dot";
-    if (this.variant)
-      className += " xpl-badge--" + this.variant;
-    return (h(Host, null, h("div", { class: className }, h("slot", null))));
-  }
-};
-
-export { XplBadge as xpl_badge };