ku4web-components 6.4.82 → 6.4.85

package/dist/collection/components/ku4-table/ku4-table.js

@@ -0,0 +1,120 @@
+import { Component, Prop, Element, h } from '@stencil/core';
+/**
+ * @description ku4-table
+ */
+export class Ku4Table {
+  constructor() {
+    /**
+     * The member to stack on at extra-small views.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.stackXs = '';
+    /**
+     * The member to stack on at small views.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.stackSm = '';
+  }
+  stack() {
+    const theadHeaders = [].slice.call(this.host.querySelectorAll('thead th'));
+    const tbodyHeaders = [].slice.call(this.host.querySelectorAll('tbody th'));
+    const tfootHeaders = [].slice.call(this.host.querySelectorAll('tfoot th'));
+    const hasBodyHeaders = tbodyHeaders.length > 0;
+    const headerRows = this.host.querySelector('thead tr :first-child');
+    if (hasBodyHeaders) {
+      headerRows.classList.add('ku4-head-header');
+    }
+    theadHeaders.forEach((th, i) => {
+      // eslint-disable-next-line no-param-reassign
+      th.style.order = i + (!hasBodyHeaders);
+    });
+    [].slice.call(this.host.querySelectorAll('tbody tr')).forEach((tr, i) => {
+      [].slice.call(tr.querySelectorAll('td')).forEach((element, j) => {
+        // eslint-disable-next-line no-param-reassign
+        element.style.order = j + 1;
+        try {
+          const columnHeader = theadHeaders[j + hasBodyHeaders];
+          const rowHeader = tbodyHeaders[i];
+          element.setAttribute('data-ku4-column-header', columnHeader.getAttribute('data-ku4-stack-header') || columnHeader.textContent);
+          element.setAttribute('data-ku4-row-header', rowHeader.getAttribute('data-ku4-stack-header') || rowHeader.textContent);
+        }
+        catch (e) { /*Fail silently*/ }
+      });
+    });
+    [].slice.call(this.host.querySelectorAll('tfoot tr')).forEach((tr, i) => {
+      [].slice.call(tr.querySelectorAll('td')).forEach((element, j) => {
+        // eslint-disable-next-line no-param-reassign
+        element.style.order = j + 1;
+        try {
+          const columnHeader = theadHeaders[j + hasBodyHeaders];
+          const rowHeader = tfootHeaders[i];
+          element.setAttribute('data-ku4-column-header', columnHeader.getAttribute('data-ku4-stack-header') || columnHeader.textContent);
+          element.setAttribute('data-ku4-row-header', rowHeader.getAttribute('data-ku4-stack-header') || rowHeader.textContent);
+        }
+        catch (e) { /*Fail silently*/ }
+      });
+    });
+  }
+  componentDidLoad() {
+    this.stack();
+    this.mutationObserver = new MutationObserver(() => this.stack());
+    this.mutationObserver.observe(this.host, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    try {
+      this.mutationObserver.disconnect();
+    }
+    catch (e) {
+      /** Fail silently **/
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "ku4-table"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-table.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-table.css"]
+  }; }
+  static get properties() { return {
+    "stackXs": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'column' | 'row' | ''",
+        "resolved": "\"\" | \"column\" | \"row\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The member to stack on at extra-small views."
+      },
+      "attribute": "stack-xs",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "stackSm": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'column' | 'row' | ''",
+        "resolved": "\"\" | \"column\" | \"row\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The member to stack on at small views."
+      },
+      "attribute": "stack-sm",
+      "reflect": true,
+      "defaultValue": "''"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/ku4-tooltip/ku4-tooltip.css

@@ -0,0 +1,56 @@
+:host {
+  position: fixed;
+  display: none;
+  opacity: 0;
+  z-index: 2;
+  background-color: #fff;
+  border: solid 1px #ccc;
+}
+
+:host([visible]) {
+  display: block;
+  opacity: 1;
+  transition: opacity 0.4s;
+}
+
+:host .arrow {
+  position: absolute;
+  width: var(--ku4-tooltip-arrow-size, 14px);
+  height: var(--ku4-tooltip-arrow-size, 14px);
+  background-color: inherit;
+  transform: rotate(45deg);
+  border: inherit;
+  box-shadow: var(--ku4-tooltip-arrow-box-shadow, none);
+}
+
+:host .content {
+  position: relative;
+}
+
+:host([top]) .arrow {
+  top: calc(100% - var(--ku4-tooltip-arrow-offset, 7px));
+  left: calc(50% - var(--ku4-tooltip-arrow-offset, 7px));
+  border-top: none !important;
+  border-left: none !important;
+}
+
+:host([left]) .arrow {
+  top: calc(50% - var(--ku4-tooltip-arrow-offset, 7px));
+  left: calc(100% - var(--ku4-tooltip-arrow-offset, 7px));
+  border-left: none !important;
+  border-bottom: none !important;
+}
+
+:host([bottom]) .arrow {
+  left: calc(50% - var(--ku4-tooltip-arrow-offset, 7px));
+  bottom: calc(100% - var(--ku4-tooltip-arrow-offset, 7px));
+  border-bottom: none !important;
+  border-right: none !important;
+}
+
+:host([right]) .arrow {
+  top: calc(50% - var(--ku4-tooltip-arrow-offset, 7px));
+  right: calc(100% - var(--ku4-tooltip-arrow-offset, 7px));
+  border-top: none !important;
+  border-right: none !important;
+}

package/dist/collection/components/ku4-tooltip/ku4-tooltip.js

@@ -0,0 +1,274 @@
+import { Component, Prop, Element, Method, Host, h } from '@stencil/core';
+import { debounce, Rectangle, Timeout } from 'ku4es-kernel';
+/**
+ * @description ku4-tooltip
+ */
+export class Ku4Tooltip {
+  constructor() {
+    this.isShowing = false;
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this._show = this._show.bind(this);
+    this._hide = this._hide.bind(this);
+    this._toggle = this._toggle.bind(this);
+    this.hideTimeout = new Timeout(200).onTimeout(this._hide);
+  }
+  /**
+   * Show tooltip on target element.
+   * @param {HTMLElement} element - Element to show tooltip on
+   */
+  async show(element) {
+    this.hideTimeout.clear();
+    if (this.host.contains(element)) {
+      return;
+    }
+    else {
+      this.isShowing = true;
+      this.host.setAttribute('visible', 'true');
+      this.calcualatePosition(element);
+      this.scrollListener = debounce(() => this.calcualatePosition(element));
+      window.addEventListener('scroll', this.scrollListener, { passive: true });
+    }
+  }
+  /**
+   * Hide tool tip.
+   */
+  async hide() {
+    this.hideTimeout.clear().start();
+  }
+  _show(e) {
+    this.show(e.target);
+  }
+  _hide() {
+    window.removeEventListener('scroll', this.scrollListener);
+    this.host.removeAttribute('visible');
+    this.isShowing = false;
+  }
+  _toggle(e) {
+    this.isShowing ? this._hide() : this._show(e);
+  }
+  calcualatePosition(target) {
+    const { left, top, width, height } = target.getBoundingClientRect();
+    const { left: hleft, top: htop, width: hwidth, height: hheight } = this.host.getBoundingClientRect();
+    const targetBox = new Rectangle(left, top, width, height);
+    const hostBox = new Rectangle(hleft, htop, hwidth, hheight);
+    /**
+     * The measurements aren't quite lining up with center. They are off by a small bit
+     * Need to figure out why.
+     * Also the Arrow is not lining up. Looks like some small margin mistakes fix.
+     * Could also stand to figure out a way to support an arrow that is white with a border.
+     */
+    if (this.top) {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x / 2 - hostBox.dimensions.x / 2}px`;
+      this.host.style.top = `${targetBox.origin.y - hostBox.dimensions.y - 15}px`;
+    }
+    else if (this.left) {
+      this.host.style.left = `${targetBox.origin.x - hostBox.dimensions.x - 15}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y / 2 - hostBox.dimensions.y / 2}px`;
+    }
+    else if (this.bottom) {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x / 2 - hostBox.dimensions.x / 2}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y + 15}px`;
+    }
+    else if (this.right) {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x + 15}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y / 2 - hostBox.dimensions.y / 2}px`;
+    }
+    else {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x / 2 - hostBox.dimensions.x / 2}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y + 15}px`;
+    }
+  }
+  componentWillLoad() {
+    const { debug, element, host, top, left, bottom, right } = this;
+    if (!(top || left || bottom || right)) {
+      this.host.setAttribute('bottom', '');
+    }
+    document.querySelectorAll(element).forEach((element) => {
+      host.addEventListener('mouseover', this._show);
+      element.addEventListener('mouseover', this._show);
+      element.addEventListener('touchstart', this._toggle, { passive: true });
+      if (debug) {
+        return;
+      }
+      host.addEventListener('mouseout', this.hide);
+      element.addEventListener('mouseout', this.hide);
+    });
+  }
+  disconnectedCallback() {
+    const { debug, element, hideTimeout, host } = this;
+    document.querySelectorAll(element).forEach((element) => {
+      host.removeEventListener('mouseover', this._show);
+      element.removeEventListener('mouseover', this._show);
+      element.removeEventListener('touchstart', this._toggle);
+      if (debug) {
+        return;
+      }
+      host.removeEventListener('mouseout', this.hide);
+      element.removeEventListener('mouseout', this.hide);
+    });
+    hideTimeout.clear();
+  }
+  render() {
+    return (h(Host, { role: "tooltip" },
+      h("div", { class: "arrow" }),
+      h("div", { class: "content" },
+        h("slot", null))));
+  }
+  static get is() { return "ku4-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-tooltip.css"]
+  }; }
+  static get properties() { return {
+    "element": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Query selector of element(s) to tie to\nthis tooltip."
+      },
+      "attribute": "element",
+      "reflect": false
+    },
+    "top": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin tooltip to top of target element"
+      },
+      "attribute": "top",
+      "reflect": false
+    },
+    "left": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin tooltip to left of target element"
+      },
+      "attribute": "left",
+      "reflect": false
+    },
+    "bottom": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin tooltip to bottom of target element"
+      },
+      "attribute": "bottom",
+      "reflect": false
+    },
+    "right": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin tooltip to right of target element"
+      },
+      "attribute": "right",
+      "reflect": false
+    },
+    "debug": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prevents tooltip show/hide behavior. Instead,\ntooltip will always show. This is useful for\ncustom style development and debugging."
+      },
+      "attribute": "debug",
+      "reflect": false
+    }
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(element: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "element - Element to show tooltip on"
+              }],
+            "text": "- Element to show tooltip on"
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Show tooltip on target element.",
+        "tags": [{
+            "name": "param",
+            "text": "element - Element to show tooltip on"
+          }]
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hide tool tip.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/ku4-validation/ku4-validation.css

@@ -0,0 +1,19 @@
+:host {
+  visibility: hidden !important;
+}
+
+:host([invalid]) {
+  visibility: visible !important;
+}
+
+:host([disabled]) {
+  visibility: hidden !important;
+}
+
+:host([invalid][disabled]) {
+  visibility: hidden !important;
+}
+
+:host([invalid][hidden]) {
+  visibility: hidden !important;
+}