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

package/dist/esm/xpl-dropdown-group_3.entry.js

@@ -0,0 +1,98 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3df6db84.js';
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const XplDropdownGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const { groupName, options } = this;
+    const hasOptions = options && options.length;
+    const mappedOptions = hasOptions &&
+      options.map((_a) => {
+        var { groupName } = _a, properties = __rest(_a, ["groupName"]);
+        return groupName ? (h("xpl-dropdown-group", Object.assign({ label: groupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
+      });
+    return (h(Host, { role: "group", "aria-label": groupName }, h("li", { class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { label: groupName }), h("ul", { class: "xpl-dropdown-list" }, mappedOptions || h("slot", { name: "options" })))));
+  }
+};
+
+const XplDropdownHeading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", null, this.label || h("slot", { name: "heading" }))));
+  }
+};
+
+const XplDropdownOption = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    this.dropdown = this.hostElement.closest('xpl-dropdown');
+  }
+  handleClick(ev) {
+    const { closeOnSelect, mode } = this.dropdown;
+    if (Boolean(ev.x && ev.y)) {
+      this.dropdown.handleSelect(ev, { component: this });
+      if (mode === 'single' && closeOnSelect)
+        this.dropdown.isOpen = false;
+    }
+  }
+  handleKeyup(ev) {
+    const { dropdown } = this;
+    const navigationKeys = [
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'Tab',
+    ];
+    const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
+    if (selectOnFocus && navigationKeys.includes(ev.key)) {
+      const hostElement = document.activeElement.closest('xpl-dropdown-option');
+      dropdown.handleSelect(ev, { component: { hostElement } });
+      if (mode === 'single' && closeOnSelect)
+        this.dropdown.isOpen = false;
+      return;
+    }
+    const selectionKeys = ['Escape', 'Enter'];
+    if (selectionKeys.includes(ev.key)) {
+      dropdown.handleSelect(ev, { component: this });
+      if (this.dropdown.closeOnSelect)
+        this.dropdown.isOpen = false;
+    }
+  }
+  connectedCallback() {
+    this.hostElement.addEventListener('click', this.handleClick.bind(this));
+    this.hostElement.addEventListener('keyup', this.handleKeyup.bind(this));
+  }
+  disconnectedCallback() {
+    this.hostElement.removeEventListener('click', this.handleClick);
+    this.hostElement.removeEventListener('keyup', this.handleKeyup);
+  }
+  render() {
+    const { label, isSelected, isDisabled } = this;
+    return (h(Host, { class: {
+        'xpl-dropdown-option': true,
+        'xpl-dropdown-option--disabled': isDisabled,
+        'xpl-dropdown-option--selected': isSelected,
+      }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected }, h("li", { class: "xpl-dropdown-list-item" }, label || h("slot", { name: "option" }))));
+  }
+  get hostElement() { return getElement(this); }
+};
+
+export { XplDropdownGroup as xpl_dropdown_group, XplDropdownHeading as xpl_dropdown_heading, XplDropdownOption as xpl_dropdown_option };

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

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3df6db84.js';
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const XplDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** text to display as heading */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.isOpen = false;
+    /** options that are listed */
+    this.closeOnSelect = true;
+    /** constant representing number of options that can be selected */
+    this.mode = 'single';
+    /** whether selection should be made when focusing on interactable element */
+    this.selectOnFocus = false;
+    this.handleClickOutside = ({ target }) => {
+      const { triggerId } = this;
+      const isTrigger = triggerId && target.id === triggerId;
+      const isInside = this.hostElement.contains(target);
+      if (!isInside && !isTrigger)
+        this.isOpen = false;
+    };
+  }
+  /**
+   * called on dropdown option click and keydown events  to update isSelected states
+   */
+  async handleSelect(e, { component }) {
+    const { hostElement, mode, options, update } = this;
+    const isSingle = mode === 'single';
+    const isMulti = mode === 'multi';
+    if (Boolean(options)) {
+      options
+        .reduce((acc, curr) => [
+        ...acc,
+        ...(curr.groupName ? curr.options : [curr]),
+      ], [])
+        .forEach((option) => {
+        const isMatch = option.label === component.hostElement.label;
+        if (isSingle) {
+          option.isSelected = isMatch;
+          component.hostElement.isSelected = option.isSelected;
+        }
+        else if (isMulti && isMatch) {
+          option.isSelected = !option.isSelected;
+          component.hostElement.isSelected = option.isSelected;
+        }
+      });
+      const mapOptions = (option) => {
+        option.options = option.groupName
+          ? option.options.map(mapOptions)
+          : undefined;
+        return option;
+      };
+      this.options = options.map(mapOptions);
+    }
+    else if (isSingle) {
+      const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
+      optionNodes.forEach((node) => (node.isSelected = node === component.hostElement));
+    }
+    else if (isMulti) {
+      component.isSelected = !component.isSelected;
+    }
+    if (Boolean(update))
+      update(e, { component: this });
+  }
+  componentWillLoad() {
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+  connectedCallback() {
+    document.addEventListener('mousedown', this.handleClickOutside.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+  render() {
+    let { isOpen } = this;
+    const { mode, options } = this;
+    const hasOptions = options && options.length;
+    const mappedOptions = hasOptions &&
+      options.map((_a) => {
+        var { groupName, options } = _a, properties = __rest(_a, ["groupName", "options"]);
+        return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: options }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
+      });
+    return (h(Host, { "aria-expanded": isOpen, class: {
+        'xpl-dropdown': true,
+        'xpl-dropdown--multi': mode === 'multi',
+        'xpl-dropdown--open': isOpen,
+      }, role: "listbox" }, h("ul", { class: "xpl-dropdown-list" }, mappedOptions || h("slot", { name: "options" }))));
+  }
+  get hostElement() { return getElement(this); }
+};
+
+const XplTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+  }
+  render() {
+    return (h(Host, { class: "xpl-tag-container" }, h("button", { class: "xpl-tag", onClick: () => {
+        this.close.emit();
+      } }, h("slot", null)), h("button", { class: "xpl-tag__close", onClick: () => {
+        this.close.emit();
+      } }, "\u00D7")));
+  }
+};
+
+export { XplDropdown as xpl_dropdown, XplTag as xpl_tag };

package/dist/esm/xpl-grid-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-899dba3b.js';
+import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
 
 const XplGridItem = class {
   constructor(hostRef) {
@@ -9,7 +9,7 @@ const XplGridItem = class {
     this.lg = 6;
   }
   render() {
-    let className = "xpl-grid-item";
+    let className = 'xpl-grid-item';
     className += ` xpl-grid-item-xs-${this.xs}`;
     className += ` xpl-grid-item-sm-${this.sm}`;
     className += ` xpl-grid-item-md-${this.md}`;

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

@@ -1,29 +1,29 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-899dba3b.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-3df6db84.js';
 
 const XplGrid = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
   componentDidLoad() {
-    const items = Array.from(this.container.querySelectorAll(".xpl-grid-item"));
+    const items = Array.from(this.container.querySelectorAll('.xpl-grid-item'));
     let lgCounter = 0, mdCounter = 0, smCounter = 0, xsCounter = 0;
-    items.forEach(item => {
-      lgCounter += +item.getAttribute("lg") || 6;
-      mdCounter += +item.getAttribute("md") || 6;
-      smCounter += +item.getAttribute("sm") || 6;
-      xsCounter += +item.getAttribute("xs") || 6;
+    items.forEach((item) => {
+      lgCounter += +item.getAttribute('lg') || 6;
+      mdCounter += +item.getAttribute('md') || 6;
+      smCounter += +item.getAttribute('sm') || 6;
+      xsCounter += +item.getAttribute('xs') || 6;
       if (lgCounter % 6 === 0)
-        item.classList.add("xpl-grid-item-lg-last");
+        item.classList.add('xpl-grid-item-lg-last');
       if (mdCounter % 6 === 0)
-        item.classList.add("xpl-grid-item-md-last");
+        item.classList.add('xpl-grid-item-md-last');
       if (smCounter % 6 === 0)
-        item.classList.add("xpl-grid-item-sm-last");
+        item.classList.add('xpl-grid-item-sm-last');
       if (xsCounter % 6 === 0)
-        item.classList.add("xpl-grid-item-xs-last");
+        item.classList.add('xpl-grid-item-xs-last');
     });
   }
   render() {
-    return (h(Host, { class: "xpl-grid" }));
+    return h(Host, { class: "xpl-grid" });
   }
   get container() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-899dba3b.js';
+import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
 import './regular-86225e9d.js';
 import { v as v4 } from './v4-929670b7.js';
 
@@ -2441,27 +2441,29 @@ if (typeof window !== "undefined") {
     window.flatpickr = flatpickr;
 }
 
-const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z' : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
+const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
+  ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
+  : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
 const XplInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
      * See https://flatpickr.js.org/formatting/
      */
-    this.dateFormat = "Y-m-d";
+    this.dateFormat = 'Y-m-d';
     /**
      * For datepicker inputs, whether to allow only a single
      * date or a range of dates. (Multiple non-consecutive
      * dates planned to be supported in the future.)
      */
-    this.mode = "single";
+    this.mode = 'single';
     /**
      * Whether to render as a singleline text input or
      * as a multiline textarea. (If `true`, `pre` and `post`
      * values will be ignored, if present.)
      */
     this.multiline = false;
-    this.type = "text";
+    this.type = 'text';
     this.characterCount = 0;
     this.passwordVisible = false;
   }
@@ -2469,14 +2471,15 @@ const XplInput = class {
     this.characterCount = this.input.value.length;
   }
   componentWillLoad() {
-    if (this._id === undefined || this._id === null || this._id === "")
+    if (this._id === undefined || this._id === null || this._id === '')
       this._id = v4();
     if (this.multiline && this.maxCharacterCount !== undefined) {
-      this.characterCount = this.value !== undefined ? this.value.length : 0;
+      this.characterCount =
+        this.value !== undefined ? this.value.length : 0;
     }
   }
   componentDidLoad() {
-    if (this.type === "date") {
+    if (this.type === 'date') {
       flatpickr(this.input, {
         allowInput: true,
         dateFormat: this.dateFormat,
@@ -2485,38 +2488,42 @@ const XplInput = class {
         minDate: this.min,
         mode: this.mode,
         nextArrow: arrowSvg(),
-        prevArrow: arrowSvg(true)
+        prevArrow: arrowSvg(true),
       });
     }
   }
   render() {
-    let className = "xpl-input";
+    let className = 'xpl-input';
     if (this.disabled)
-      className += " xpl-input--disabled";
+      className += ' xpl-input--disabled';
     let hasError = false;
     if (this.error !== undefined)
       hasError = true;
-    if (this.multiline && this.maxCharacterCount !== undefined && this.characterCount > this.maxCharacterCount)
+    if (this.multiline &&
+      this.maxCharacterCount !== undefined &&
+      this.characterCount > this.maxCharacterCount)
       hasError = true;
     if (hasError)
-      className += " xpl-input--error";
+      className += ' xpl-input--error';
     let type = this.type;
-    if (type === "password" && this.passwordVisible) {
-      type = "text";
-    }
-    return (h(Host, { class: className }, h("label", { class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", null, this.description)), h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre), !this.multiline ?
-      h("input", { autocomplete: this.type === "date" ? "off" : this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
-          this.input = el;
-        }, required: this.required, step: this.step, type: type, value: this.value }) :
-      h("textarea", { disabled: this.disabled, id: this._id, name: this.name, onInput: () => this.updateCharacterCount(), placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
-          this.input = el;
-        }, required: this.required }, this.value), this.type === "date" && h("span", { class: "xpl-input-calendar" }, h("i", { class: "far fa-calendar-alt" })), this.type === "password" && h("button", { class: "xpl-input-password", onClick: () => {
+    if (type === 'password' && this.passwordVisible) {
+      type = 'text';
+    }
+    return (h(Host, { class: className }, h("label", { class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", null, this.description)), h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && (h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre)), !this.multiline ? (h("input", { autocomplete: this.type === 'date' ? 'off' : this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+        this.input = el;
+      }, required: this.required, step: this.step, type: type, value: this.value })) : (h("textarea", { disabled: this.disabled, id: this._id, name: this.name, onInput: () => this.updateCharacterCount(), placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+        this.input = el;
+      }, required: this.required }, this.value)), this.type === 'date' && (h("span", { class: "xpl-input-calendar" }, h("i", { class: "far fa-calendar-alt" }))), this.type === 'password' && (h("button", { class: "xpl-input-password", onClick: () => {
         this.passwordVisible = !this.passwordVisible;
       }, role: "presentation" }, h("span", { class: "sr-only" }, "Toggle password visibility"), h("i", { class: "far fa-eye", style: {
-        display: this.passwordVisible ? "none" : "block"
+        display: this.passwordVisible
+          ? 'none'
+          : 'block',
       } }), h("i", { class: "far fa-eye-slash", style: {
-        display: this.passwordVisible ? "block" : "none"
-      } })), this.post && !this.multiline && h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post), this.multiline && this.maxCharacterCount !== undefined && h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount)), this.error !== undefined && this.error.length > 0 && h("label", { class: "xpl-input-error", htmlFor: this._id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error)));
+        display: this.passwordVisible
+          ? 'block'
+          : 'none',
+      } }))), this.post && !this.multiline && (h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)), this.multiline && this.maxCharacterCount !== undefined && (h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount))), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this._id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))));
   }
 };
 

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

@@ -1,28 +1,26 @@
-import { r as registerInstance, h, H as Host, F as Fragment } from './index-899dba3b.js';
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-3df6db84.js';
 import './regular-86225e9d.js';
 
-const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata }) => {
+const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {
   const hasRight = avatars || badges || subtext;
-  const inner = (h(Fragment, null, avatar && (avatar.slice(0, 1) === "/" || avatar.slice(0, 4) === "http" ?
-    h("xpl-avatar", { src: avatar, name: title }) :
-    h("xpl-avatar", { name: title }, avatar)), h("div", { class: "xpl-list-item-content" }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, title), metadata && (h("ul", { class: "xpl-list-item-metadata" }, metadata.map(d => {
-    if (typeof d === "string") {
+  const inner = (h(Fragment, null, avatar &&
+    (avatar.slice(0, 1) === '/' || avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: avatar, name: title })) : (h("xpl-avatar", { name: title }, avatar))), h("div", { class: "xpl-list-item-content" }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, title), metadata && (h("ul", { class: "xpl-list-item-metadata" }, metadata.map((d) => {
+    if (typeof d === 'string') {
       return h("li", null, d);
     }
     else {
-      return h("li", null, h("span", { class: `far fa-${d.icon}` }), " ", d.text);
+      return (h("li", null, h("span", { class: `far fa-${d.icon}` }), ' ', d.text));
     }
-  }))))), hasRight && (h("div", { class: "xpl-list-right" }, subtext && h("div", { class: "xpl-list-item-subtext" }, subtext), avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map(a => h("img", { src: a, alt: "" })))), badges && badges.map(b => {
-    if (typeof b === "string") {
-      return h("xpl-badge", null, b);
-    }
-    else {
-      return h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text);
-    }
-  }))))));
-  return href ?
-    h("a", { class: "xpl-list-item", href: href }, inner) :
-    h("div", { class: "xpl-list-item" }, inner);
+  }))))), hasRight && (h("div", { class: "xpl-list-right" }, subtext && (h("div", { class: "xpl-list-item-subtext" }, subtext)), avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map((a) => (h("img", { src: a, alt: "" }))))), badges &&
+    badges.map((b) => {
+      if (typeof b === 'string') {
+        return h("xpl-badge", null, b);
+      }
+      else {
+        return (h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text));
+      }
+    }))))));
+  return href ? (h("a", { class: "xpl-list-item", href: href }, inner)) : (h("div", { class: "xpl-list-item" }, inner));
 };
 const XplList = class {
   constructor(hostRef) {
@@ -52,7 +50,7 @@ const XplList = class {
     this.items = [];
   }
   render() {
-    return (h(Host, null, this.items.map(item => h(ListItemCpt, Object.assign({}, item)))));
+    return (h(Host, null, this.items.map((item) => (h(ListItemCpt, Object.assign({}, item))))));
   }
 };
 

package/dist/esm/xpl-main-nav.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
+
+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" })))));
+  }
+};
+
+export { XplMainNav as xpl_main_nav };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-899dba3b.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
 
 const XplPagination = class {
   constructor(hostRef) {
@@ -42,29 +42,29 @@ const XplPagination = class {
     if (numPages < 7)
       showing = [1, 2, 3, 4, 5, 6];
     if (this.current <= 3 || this.current >= numPages - 2) {
-      showing = [1, 2, 3, "...", numPages - 2, numPages - 1, numPages];
+      showing = [1, 2, 3, '...', numPages - 2, numPages - 1, numPages];
     }
     else {
       showing = [
         1,
-        "...",
+        '...',
         this.current - 1,
         this.current,
         this.current + 1,
-        "...",
+        '...',
         numPages,
       ];
     }
     const showingFirst = (this.current - 1) * this.perPage + 1;
     const showingLast = Math.min(showingFirst + this.perPage - 1, this.total);
-    return (h(Host, null, h("div", { class: "xpl-pagination" }, h("div", null, h("p", null, "Showing ", h("span", null, showingFirst), " to ", h("span", null, showingLast), " ", "of ", h("span", null, this.total), " results")), h("div", null, h("nav", { "aria-label": "Pagination" }, h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" }, h("span", null, "Previous"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))), showing.map((n) => {
-      if (n === "...") {
-        return h("span", { class: "xpl-pagination-ellipsis" }, "...");
+    return (h(Host, null, h("div", { class: "xpl-pagination" }, h("div", null, h("p", null, "Showing ", h("span", null, showingFirst), " to", ' ', h("span", null, showingLast), " of", ' ', h("span", null, this.total), " results")), h("div", null, h("nav", { "aria-label": "Pagination" }, h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" }, h("span", null, "Previous"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))), showing.map((n) => {
+      if (n === '...') {
+        return (h("span", { class: "xpl-pagination-ellipsis" }, "..."));
       }
       if (n === this.current) {
         return (h("button", { "aria-current": "page", class: "xpl-pagination-current" }, n));
       }
-      return h("button", { onClick: () => this._goto(n) }, n);
+      return (h("button", { onClick: () => this._goto(n) }, n));
     }), h("button", { onClick: this.goNext, class: "xpl-pagination-next" }, h("span", null, "Next"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clip-rule": "evenodd" }))))))));
   }
 };