ku4web-components 6.5.6 → 6.5.7

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

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

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

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

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