ku4web-components 6.5.5 → 6.5.6

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

@@ -0,0 +1,82 @@
+/** 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

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

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

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

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

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

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

@@ -0,0 +1,116 @@
+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);
+  }
+}