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

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,31 @@
+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 };