@xplortech/apollo-core 0.5.3 → 1.0.0-beta.1

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -0,0 +1,110 @@
+import { Component, Element, Host, h, Prop } from '@stencil/core';
+export class XplDropdownOption {
+  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" }))));
+  }
+  static get is() { return "xpl-dropdown-option"; }
+  static get properties() { return {
+    "isDisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "whether option is disabled"
+      },
+      "attribute": "disabled",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "text to display for option"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "isSelected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "whether option is selected"
+      },
+      "attribute": "selected",
+      "reflect": true
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/xpl-dropdown/xpl-dropdown.js

@@ -0,0 +1,260 @@
+var __rest = (this && this.__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;
+};
+import { Component, Element, Host, h, Method, Prop } from '@stencil/core';
+export class XplDropdown {
+  constructor() {
+    /** 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" }))));
+  }
+  static get is() { return "xpl-dropdown"; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "text to display as heading"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "closeOnSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "options that are listed"
+      },
+      "attribute": "close-on-select",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'single' | 'multi'",
+        "resolved": "\"multi\" | \"single\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "constant representing number of options that can be selected"
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "'single'"
+    },
+    "options": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DropdownItem[]",
+        "resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
+        "references": {
+          "DropdownItem": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "options that are listed"
+      }
+    },
+    "selectOnFocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "whether selection should be made when focusing on interactable element"
+      },
+      "attribute": "select-on-focus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "triggerId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "the id for the element that triggers the open state"
+      },
+      "attribute": "trigger-id",
+      "reflect": false
+    },
+    "update": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(e: Event, { component: XplDropdown }) => void",
+        "resolved": "(e: Event, { component: XplDropdown }: { component: any; }) => void",
+        "references": {
+          "Event": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "call back function invoked when a selection is made"
+      }
+    }
+  }; }
+  static get methods() { return {
+    "handleSelect": {
+      "complexType": {
+        "signature": "(e: Event, { component }: { component: any; }) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Event": {
+            "location": "global"
+          },
+          "DropdownItem": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "called on dropdown option click and keydown events  to update isSelected states",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/xpl-grid/xpl-grid.js

@@ -0,0 +1,26 @@
+import { Component, Host, h, Element } from '@stencil/core';
+export class XplGrid {
+  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" });
+  }
+  static get is() { return "xpl-grid"; }
+  static get elementRef() { return "container"; }
+}

package/dist/collection/components/xpl-grid-item/xpl-grid-item.js

@@ -0,0 +1,93 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class XplGridItem {
+  constructor() {
+    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)));
+  }
+  static get is() { return "xpl-grid-item"; }
+  static get properties() { return {
+    "xs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "xs",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "sm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sm",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "md": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "md",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "lg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "lg",
+      "reflect": false,
+      "defaultValue": "6"
+    }
+  }; }
+}