ku4web-components 6.5.6 → 6.5.7

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

@@ -1,82 +0,0 @@
-/** START | style resets **/
-button {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  -webkit-appearance: none;
-}
-
-/** END | style resets **/
-:host {
-  position: relative;
-  display: block;
-  width: 100%;
-  padding: 20px 30px;
-  background-color: #eee;
-  text-align: center;
-  color: #aaa;
-  cursor: pointer;
-}
-
-:host(:focus) {
-  background-color: #eee;
-  color: #666;
-  z-index: 2;
-}
-
-:host(:hover) {
-  background-color: #eee;
-  color: #666;
-}
-
-:host(:active) {
-  background-color: #fff;
-  color: #333;
-}
-
-:host([selected]) {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-  background-color: #fff;
-  color: #444;
-}
-
-button {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-@media only screen and (min-width: 768px) {
-  :host {
-    width: auto;
-    border-top: 1px solid #ccc;
-    border-right: 1px solid #ccc;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    background-color: #eee;
-  }
-
-  :host(:first-of-type) {
-    border-left: 1px solid #ccc;
-  }
-
-  :host([selected]) {
-    padding-bottom: 1px;
-    border-top: 1px solid #ccc;
-    border-bottom: none;
-  }
-
-  :host([selected]):after {
-    content: " ";
-    position: absolute;
-    display: block;
-    left: 0;
-    bottom: -1px;
-    width: 100%;
-    height: 1px;
-    box-sizing: border-box;
-    background-color: inherit;
-  }
-}

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

@@ -1,191 +0,0 @@
-import { Component, Element, Host, Prop, State, Method, Listen, Event, h, } from '@stencil/core';
-import uid from '../../capabilities/identity/uid';
-/**
- * @description ku4-tab
- */
-export class Ku4Tab {
-  constructor() {
-    /**
-     * Active when true
-     */
-    this.selected = false;
-  }
-  handleClick(e) {
-    this.tabClick.emit(e);
-  }
-  handleKeyUp(e) {
-    this.tabKeyUp.emit(e);
-  }
-  /**
-   * Set this tab as selected.
-   */
-  async select() {
-    this.selected = true;
-    this.panel.select();
-    this.host.focus();
-  }
-  /**
-   * Unset this tab as selected
-   */
-  async deselect() {
-    this.selected = false;
-    this.panel.deselect();
-  }
-  /**
-   * Connect this tab to a panel
-   * @param {HTMLElement} panel - The target ku4-tab-panel HTMLElement
-   */
-  async connect(panel) {
-    panel.connect(this);
-  }
-  get id() {
-    return this.host.id || uid();
-  }
-  /**
-   * @param {Ku4TabPanel} panel - panel to assign to this tab
-   * @internal
-   */
-  $assignPanel(panel) {
-    this.panel = panel;
-  }
-  render() {
-    const { selected, panel } = this;
-    return (h(Host, { id: this.host.id || uid(), role: "tab", type: "button", tabIndex: selected ? 0 : -1, "aria-controls": panel && panel.id, "aria-selected": selected ? 'true' : 'false' },
-      h("slot", null)));
-  }
-  static get is() { return "ku4-tab"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-tab.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-tab.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active when true"
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "panel": {}
-  }; }
-  static get events() { return [{
-      "method": "tabClick",
-      "name": "ku4TabClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fired when this tab is clicked."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "tabKeyUp",
-      "name": "ku4TabKeyup",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fired when this tab is keyup."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "select": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Set this tab as selected.",
-        "tags": []
-      }
-    },
-    "deselect": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Unset this tab as selected",
-        "tags": []
-      }
-    },
-    "connect": {
-      "complexType": {
-        "signature": "(panel: any) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "panel - The target ku4-tab-panel HTMLElement"
-              }],
-            "text": "- The target ku4-tab-panel HTMLElement"
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Connect this tab to a panel",
-        "tags": [{
-            "name": "param",
-            "text": "panel - The target ku4-tab-panel HTMLElement"
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keyup",
-      "method": "handleKeyUp",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

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

@@ -1,6 +0,0 @@
-:host {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}

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 {
-  handleTabClick({ target }) {
-    this.tabs.includes(target) && this.open(target);
-  }
-  handleTabKeyUp({ 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": [{
-                "name": "param",
-                "text": "tab - ku4-tab target to open."
-              }],
-            "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": "handleTabClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "ku4TabKeyup",
-      "method": "handleTabKeyUp",
-      "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": [{
-                "name": "param",
-                "text": "tab - Tab to connect to this panel"
-              }],
-            "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);
-  }
-}