ku4web-components 6.4.34 → 6.4.38

package/dist/collection/components/ku4-tab-list/ku4-tab-list.js

@@ -1,118 +0,0 @@
-import { Component, Host, Element, Listen, Method, h } from '@stencil/core';
-import { Key } from 'ku4es-ui-kernel';
-import uid from '../../capabilities/identity/uid';
-/**
- * @description ku4-tab-list
- */
-export class Ku4TabList {
-  handleHpTabClick({ target }) {
-    this.tabs.includes(target) && this.open(target);
-  }
-  handleHpTabKeyUp({ target, detail: e }) {
-    if (!(this.tabs.includes(target))) {
-      return;
-    }
-    if (Key.left.didFire(e)) {
-      this.open(this.previous(target));
-    }
-    if (Key.right.didFire(e)) {
-      this.open(this.next(target));
-    }
-  }
-  /**
-   * Open a ku4-tab in this ku4-tab-list.
-   * @param {Ku4Tab} tab - ku4-tab target to open.
-   */
-  async open(tab) {
-    return this.reset().select(tab);
-  }
-  select(tab) {
-    tab.select();
-    return this;
-  }
-  deselect(tab) {
-    tab.deselect();
-    return this;
-  }
-  reset() {
-    this.tabs.forEach(tab => this.deselect(tab));
-    return this;
-  }
-  previous(tab) {
-    const { tabs, tabs: { length } } = this;
-    const index = tabs.indexOf(tab) - 1;
-    return tabs[index > -1 ? index : length - 1];
-  }
-  next(tab) {
-    const { tabs, tabs: { length } } = this;
-    const index = tabs.indexOf(tab) + 1;
-    return tabs[index < length ? index : 0];
-  }
-  componentDidRender() {
-    const tabs = [];
-    const panels = [];
-    [].slice.call(this.host.children).forEach((child) => {
-      if (child.tagName === 'KU4-TAB') {
-        tabs.push(child);
-      }
-      if (child.tagName === 'KU4-TAB-PANEL') {
-        panels.push(child);
-      }
-    });
-    this.tabs = tabs;
-    this.tabs.forEach((tab, index) => tab.connect(panels[index]));
-  }
-  render() {
-    return (h(Host, { id: this.host.id || uid(), role: "tablist", "aria-owns": this.host.id || uid() },
-      h("slot", null)));
-  }
-  static get is() { return "ku4-tab-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-tab-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-tab-list.css"]
-  }; }
-  static get methods() { return {
-    "open": {
-      "complexType": {
-        "signature": "(tab: any) => Promise<this>",
-        "parameters": [{
-            "tags": [{
-                "text": "tab - ku4-tab target to open.",
-                "name": "param"
-              }],
-            "text": "- ku4-tab target to open."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<this>"
-      },
-      "docs": {
-        "text": "Open a ku4-tab in this ku4-tab-list.",
-        "tags": [{
-            "name": "param",
-            "text": "tab - ku4-tab target to open."
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "ku4TabClick",
-      "method": "handleHpTabClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "ku4TabKeyup",
-      "method": "handleHpTabKeyUp",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/ku4-tab-panel/ku4-tab-panel.css

@@ -1,26 +0,0 @@
-:host {
-  -webkit-backface-visibility: hidden;
-  display: block;
-  width: 100%;
-  height: auto;
-  max-height: 0;
-  transition: max-height 0.4s, padding 0.6s;
-  overflow: auto;
-}
-
-@media only screen and (min-width: 768px) {
-  :host {
-    display: none;
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    max-height: initial !important;
-    transition: none;
-    order: 2;
-  }
-
-  :host([selected]) {
-    display: block;
-    max-height: initial !important;
-    transition: none;
-  }
-}

package/dist/collection/components/ku4-tab-panel/ku4-tab-panel.js

@@ -1,166 +0,0 @@
-import { Component, Element, Host, Prop, State, Method, h, Listen } from '@stencil/core';
-import uid from '../../capabilities/identity/uid';
-/**
- * @description ku4-tab-panel
- */
-export class Ku4TabPanel {
-  constructor() {
-    /**
-     * Set true to display panel
-     */
-    this.selected = false;
-    this.maxHeight = this.selected ? 'none' : '0px';
-  }
-  handleTransitionEnd() {
-    this.maxHeight = this.selected ? 'none' : '0px';
-  }
-  /**
-   * Set this panel as selected.
-   */
-  async select() {
-    if (this.selected) {
-      return;
-    }
-    this.selected = true;
-    if (this.hasTransition) {
-      this.maxHeight = `${this.host.scrollHeight}px`;
-    }
-    else {
-      this.handleTransitionEnd();
-    }
-  }
-  /**
-   * Unset this panel as selected.
-   */
-  async deselect() {
-    if (!this.selected) {
-      return;
-    }
-    this.selected = false;
-    this.host.style.maxHeight = `${this.host.scrollHeight}px`;
-    if (this.hasTransition) {
-      this.maxHeight = '0px';
-    }
-    else {
-      this.handleTransitionEnd();
-    }
-  }
-  /**
-   * Connect this panel to a tab.
-   * @param {Ku4Tab} tab - Tab to connect to this panel
-   */
-  async connect(tab) {
-    tab.$assignPanel(this);
-    this.tab = tab;
-  }
-  get hasTransition() {
-    const transition = window
-      .getComputedStyle(this.host)
-      .getPropertyValue('transition');
-    return !/none/.test(transition);
-  }
-  render() {
-    const { selected, tab, maxHeight } = this;
-    return (h(Host, { role: "tabpanel", id: this.host.id || uid(), "aria-hidden": selected ? 'false' : 'true', "aria-labelledby": tab && tab.id, tabIndex: selected ? 0 : -1, style: { maxHeight } },
-      h("slot", null)));
-  }
-  static get is() { return "ku4-tab-panel"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-tab-panel.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-tab-panel.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set true to display panel"
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "maxHeight": {},
-    "tab": {}
-  }; }
-  static get methods() { return {
-    "select": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Set this panel as selected.",
-        "tags": []
-      }
-    },
-    "deselect": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Unset this panel as selected.",
-        "tags": []
-      }
-    },
-    "connect": {
-      "complexType": {
-        "signature": "(tab: any) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "text": "tab - Tab to connect to this panel",
-                "name": "param"
-              }],
-            "text": "- Tab to connect to this panel"
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Connect this panel to a tab.",
-        "tags": [{
-            "name": "param",
-            "text": "tab - Tab to connect to this panel"
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "transitionend",
-      "method": "handleTransitionEnd",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

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

@@ -1,116 +0,0 @@
-ku4-table {
-  position: relative;
-  display: block;
-}
-@media only screen and (min-width: 1px) and (max-width: 767px) {
-  @supports (display: contents) {
-    ku4-table[stack-xs=column] table {
-      display: flex;
-      flex-direction: column;
-    }
-    ku4-table[stack-xs=column] thead,
-ku4-table[stack-xs=column] tbody,
-ku4-table[stack-xs=column] tfoot,
-ku4-table[stack-xs=column] tr {
-      display: contents;
-    }
-    ku4-table[stack-xs=column] thead .ku4-head-header {
-      display: none;
-    }
-    ku4-table[stack-xs=column] tbody th,
-ku4-table[stack-xs=column] tfoot th {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      line-height: 0;
-      font-size: 0;
-    }
-    ku4-table[stack-xs=column] tbody td,
-ku4-table[stack-xs=column] tfoot td {
-      display: flex;
-    }
-    ku4-table[stack-xs=column] tbody td:before,
-ku4-table[stack-xs=column] tfoot td:before {
-      content: attr(data-ku4-row-header);
-    }
-  }
-  ku4-table[stack-xs=row] table {
-    display: flex;
-    flex-direction: column;
-  }
-  ku4-table[stack-xs=row] thead th,
-ku4-table[stack-xs=row] thead td {
-    display: none;
-  }
-  ku4-table[stack-xs=row] thead,
-ku4-table[stack-xs=row] tbody,
-ku4-table[stack-xs=row] tfoot,
-ku4-table[stack-xs=row] tr,
-ku4-table[stack-xs=row] th,
-ku4-table[stack-xs=row] td {
-    display: block;
-  }
-  ku4-table[stack-xs=row] tbody td:before,
-ku4-table[stack-xs=row] tfoot td:before {
-    content: attr(data-ku4-column-header);
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  @supports (display: contents) {
-    ku4-table[stack-sm=column] table {
-      display: flex;
-      flex-direction: column;
-    }
-    ku4-table[stack-sm=column] thead,
-ku4-table[stack-sm=column] tbody,
-ku4-table[stack-sm=column] tfoot,
-ku4-table[stack-sm=column] tr {
-      display: contents;
-    }
-    ku4-table[stack-sm=column] thead .ku4-head-header {
-      display: none;
-    }
-    ku4-table[stack-sm=column] tbody th,
-ku4-table[stack-sm=column] tfoot th {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      line-height: 0;
-      font-size: 0;
-    }
-    ku4-table[stack-sm=column] tbody td,
-ku4-table[stack-sm=column] tfoot td {
-      display: flex;
-    }
-    ku4-table[stack-sm=column] tbody td:before,
-ku4-table[stack-sm=column] tfoot td:before {
-      content: attr(data-ku4-row-header);
-    }
-  }
-  ku4-table[stack-sm=row] table {
-    display: flex;
-    flex-direction: column;
-  }
-  ku4-table[stack-sm=row] thead th,
-ku4-table[stack-sm=row] thead td {
-    display: none;
-  }
-  ku4-table[stack-sm=row] thead,
-ku4-table[stack-sm=row] tbody,
-ku4-table[stack-sm=row] tfoot,
-ku4-table[stack-sm=row] tr,
-ku4-table[stack-sm=row] th,
-ku4-table[stack-sm=row] td {
-    display: block;
-  }
-  ku4-table[stack-sm=row] tbody td:before,
-ku4-table[stack-sm=row] tfoot td:before {
-    content: attr(data-ku4-column-header);
-  }
-}

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;
-}