@xplortech/apollo-core 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/apollo-core/xpl-choicelist.entry.js

@@ -1,39 +0,0 @@
-import { r as registerInstance, h, e as Host } from './index-5b4a209e.js';
-
-const XplChoicelist = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentWillLoad() {
-    this.selected =
-      this.choices !== undefined &&
-        this.choices !== null &&
-        this.choices.length > 0
-        ? this.choices.map(() => false)
-        : [];
-  }
-  render() {
-    let className = 'xpl-choicelist';
-    if (this.styled)
-      className += ' xpl-choicelist--styled';
-    return (h(Host, { class: "xpl-choicelist-container" }, this.heading !== undefined ||
-      this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { class: className }, this.choices.map(({ children, description, label }, i) => {
-      const inner = this.multi ? (h("xpl-checkbox", { description: description, name: this.name, onCheckboxChange: (e) => {
-          const { detail } = e;
-          this.selected = this.selected.map((v, j) => (i === j ? detail : v));
-        } }, label)) : (h("xpl-radio", { description: description, name: this.name, onRadioChange: () => {
-          this.selected = this.selected.map((_, j) => i === j);
-        } }, label));
-      let className = this.styled && this.selected[i]
-        ? 'selected'
-        : '';
-      return (h("li", { class: className }, inner, children && (h("ul", null, children.map((child) => {
-        const childInner = this
-          .multi ? (h("xpl-checkbox", { description: child.description }, child.label)) : (h("xpl-radio", { description: child.description }, child.label));
-        return (h("li", null, childInner));
-      })))));
-    })))));
-  }
-};
-
-export { XplChoicelist as xpl_choicelist };

package/dist/apollo-core/xpl-content-area.entry.js

@@ -1,16 +0,0 @@
-import { r as registerInstance, h, e as Host } from './index-5b4a209e.js';
-
-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)))));
-  }
-};
-
-export { XplContentArea as xpl_content_area };

package/dist/apollo-core/xpl-divider.entry.js

@@ -1,14 +0,0 @@
-import { r as registerInstance, h, e as Host } from './index-5b4a209e.js';
-
-const XplDivider = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    let className = 'xpl-divider';
-    className += ` xpl-divider--${this.tier}`;
-    return (h(Host, { class: className }, h("span", null, h("slot", null))));
-  }
-};
-
-export { XplDivider as xpl_divider };

package/dist/apollo-core/xpl-dropdown-group.entry.js

@@ -1,31 +0,0 @@
-import { r as registerInstance, h, e as Host } from './index-5b4a209e.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" })))));
-  }
-};
-
-export { XplDropdownGroup as xpl_dropdown_group };

package/dist/apollo-core/xpl-dropdown-heading.entry.js

@@ -1,12 +0,0 @@
-import { r as registerInstance, h, e as Host } from './index-5b4a209e.js';
-
-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" }))));
-  }
-};
-
-export { XplDropdownHeading as xpl_dropdown_heading };

package/dist/apollo-core/xpl-dropdown-option.entry.js

@@ -1,61 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-5b4a209e.js';
-
-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 { XplDropdownOption as xpl_dropdown_option };

package/dist/apollo-core/xpl-dropdown.entry.js

@@ -1,104 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-5b4a209e.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); }
-};
-
-export { XplDropdown as xpl_dropdown };

package/dist/apollo-core/xpl-grid-item.entry.js

@@ -1,21 +0,0 @@
-import { r as registerInstance, h, e as Host } from './index-5b4a209e.js';
-
-const XplGridItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.xs = 6;
-    this.sm = 6;
-    this.md = 6;
-    this.lg = 6;
-  }
-  render() {
-    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}`;
-    className += ` xpl-grid-item-lg-${this.lg}`;
-    return (h(Host, { class: className }, h("slot", null)));
-  }
-};
-
-export { XplGridItem as xpl_grid_item };

package/dist/apollo-core/xpl-grid.entry.js

@@ -1,31 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-5b4a209e.js';
-
-const XplGrid = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    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;
-      if (lgCounter % 6 === 0)
-        item.classList.add('xpl-grid-item-lg-last');
-      if (mdCounter % 6 === 0)
-        item.classList.add('xpl-grid-item-md-last');
-      if (smCounter % 6 === 0)
-        item.classList.add('xpl-grid-item-sm-last');
-      if (xsCounter % 6 === 0)
-        item.classList.add('xpl-grid-item-xs-last');
-    });
-  }
-  render() {
-    return h(Host, { class: "xpl-grid" });
-  }
-  get container() { return getElement(this); }
-};
-
-export { XplGrid as xpl_grid };