ku4web-components 6.5.5 → 6.5.6

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

@@ -0,0 +1,288 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+/**
+ * @description ku4-col
+ */
+export class Ku4Col {
+  constructor() {
+    /**
+     * Start position of column at extra-small (optional).
+     */
+    this.startXs = 0;
+    /**
+     * Number of columns to span left and right at extra-small (optional).
+     */
+    this.spanXs = 1;
+  }
+  get startClass() {
+    const { startXs, startSm, startMd, startLg } = this;
+    const value = [];
+    if (startXs && !Number.isNaN(startXs)) {
+      value.push(`start-xs-${startXs}`);
+    }
+    if (startSm && !Number.isNaN(startSm)) {
+      value.push(`start-sm-${startSm}`);
+    }
+    if (startMd && !Number.isNaN(startMd)) {
+      value.push(`start-md-${startMd}`);
+    }
+    if (startLg && !Number.isNaN(startLg)) {
+      value.push(`start-lg-${startLg}`);
+    }
+    return value.join(' ');
+  }
+  get spanClass() {
+    const { spanXs, spanSm, spanMd, spanLg } = this;
+    const value = [];
+    if (spanXs && !Number.isNaN(spanXs)) {
+      value.push(`span-xs-${spanXs}`);
+    }
+    if (spanSm && !Number.isNaN(spanSm)) {
+      value.push(`span-sm-${spanSm}`);
+    }
+    if (spanMd && !Number.isNaN(spanMd)) {
+      value.push(`span-md-${spanMd}`);
+    }
+    if (spanLg && !Number.isNaN(spanLg)) {
+      value.push(`span-lg-${spanLg}`);
+    }
+    return value.join(' ');
+  }
+  get orderClass() {
+    const { orderXs, orderSm, orderMd, orderLg } = this;
+    const value = [];
+    if (orderXs && !Number.isNaN(orderXs)) {
+      value.push(`order-xs-${orderXs}`);
+    }
+    if (orderSm && !Number.isNaN(orderSm)) {
+      value.push(`order-sm-${orderSm}`);
+    }
+    if (orderMd && !Number.isNaN(orderMd)) {
+      value.push(`order-md-${orderMd}`);
+    }
+    if (orderLg && !Number.isNaN(orderLg)) {
+      value.push(`order-lg-${orderLg}`);
+    }
+    return value.join(' ');
+  }
+  render() {
+    const { startClass, spanClass, orderClass } = this;
+    return (h(Host, { class: `${startClass} ${spanClass} ${orderClass}` },
+      h("slot", null)));
+  }
+  static get is() { return "ku4-col"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-col.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-col.css"]
+  }; }
+  static get properties() { return {
+    "startXs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "0 | 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Start position of column at extra-small (optional)."
+      },
+      "attribute": "start-xs",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "startSm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "0 | 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Start position of column at small (optional)."
+      },
+      "attribute": "start-sm",
+      "reflect": false
+    },
+    "startMd": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "0 | 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Start position of column at medium (optional)."
+      },
+      "attribute": "start-md",
+      "reflect": false
+    },
+    "startLg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "0 | 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Start position of column at large (optional)."
+      },
+      "attribute": "start-lg",
+      "reflect": false
+    },
+    "spanXs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to span left and right at extra-small (optional)."
+      },
+      "attribute": "span-xs",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "spanSm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to span left and right at extra-small (optional)."
+      },
+      "attribute": "span-sm",
+      "reflect": false
+    },
+    "spanMd": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to span left and right at medium (optional)."
+      },
+      "attribute": "span-md",
+      "reflect": false
+    },
+    "spanLg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to span left and right at large (optional)."
+      },
+      "attribute": "span-lg",
+      "reflect": false
+    },
+    "orderXs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Order of column at extra-small (optional)."
+      },
+      "attribute": "order-xs",
+      "reflect": false
+    },
+    "orderSm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Order of column at small (optional)."
+      },
+      "attribute": "order-sm",
+      "reflect": false
+    },
+    "orderMd": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Order of column at medium (optional)."
+      },
+      "attribute": "order-md",
+      "reflect": false
+    },
+    "orderLg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+        "resolved": "1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Order of column at large (optional)."
+      },
+      "attribute": "order-lg",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,56 @@
+:host {
+  position: fixed;
+  box-sizing: border-box;
+  overflow: hidden;
+  z-index: 1;
+}
+
+:host([top]),
+:host([bottom]) {
+  width: 100%;
+  height: 0;
+  transition: height 0.4s;
+}
+
+:host([left]),
+:host([right]) {
+  width: 0;
+  height: 100%;
+  transition: width 0.4s;
+}
+
+:host([top][open]),
+:host([bottom][open]) {
+  height: 100%;
+}
+
+:host([left][open]),
+:host([right][open]) {
+  width: 100%;
+}
+
+:host([top][open=false]),
+:host([bottom][open=false]) {
+  height: 0;
+}
+
+:host([left][open=false]),
+:host([right][open=false]) {
+  width: 0;
+}
+
+:host([top]),
+:host([left]) {
+  top: 0;
+  left: 0;
+}
+
+:host([bottom]) {
+  left: 0;
+  bottom: 0;
+}
+
+:host([right]) {
+  right: 0;
+  bottom: 0;
+}

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

@@ -0,0 +1,163 @@
+import { Component, Prop, Method, Host, h } from '@stencil/core';
+/**
+ * @description ku4-drawer
+ */
+export class Ku4Drawer {
+  constructor() {
+    /**
+     * Open size of this drawer (any valid CSS width or height value)
+     */
+    this.size = '20%';
+  }
+  /**
+   * Toggle drawer
+   */
+  async toggle() {
+    this.open = !this.open;
+  }
+  get sizeValue() {
+    const { bottom, top, right, size } = this;
+    switch (true) {
+      case bottom: return { 'max-height': size };
+      case top: return { 'max-height': size };
+      case right: return { 'max-width': size };
+      default: return { 'max-width': size };
+    }
+  }
+  render() {
+    const { sizeValue, open } = this;
+    return (h(Host, { style: sizeValue, "aria-hidden": open ? 'false' : 'true' },
+      h("slot", null)));
+  }
+  static get is() { return "ku4-drawer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-drawer.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-drawer.css"]
+  }; }
+  static get properties() { return {
+    "bottom": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin drawer to bottom"
+      },
+      "attribute": "bottom",
+      "reflect": true
+    },
+    "left": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin drawer to left"
+      },
+      "attribute": "left",
+      "reflect": true
+    },
+    "right": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin drawer to right"
+      },
+      "attribute": "right",
+      "reflect": true
+    },
+    "top": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pin drawer to top"
+      },
+      "attribute": "top",
+      "reflect": true
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Open size of this drawer (any valid CSS width or height value)"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'20%'"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display drawer"
+      },
+      "attribute": "open",
+      "reflect": true
+    }
+  }; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle drawer",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,70 @@
+import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { Assert } from 'ku4es-kernel';
+/**
+ * @description ku4-feature
+ */
+export class Ku4Feature {
+  constructor() {
+    /**
+     * A function or method that returns a boolean.
+     * A return value of true will turn on the this
+     * feature. (optional)
+     */
+    this.policy = '';
+    this.enabled = false;
+    const policy = this.policy.trim();
+    this.featurePolicy = Assert.isNullOrEmpty(policy)
+      ? () => false
+      : new Function((/^return/.test(policy) ? policy : `return ${policy}`));
+  }
+  componentWillLoad() {
+    const { on, featurePolicy } = this;
+    on || featurePolicy.call(this.host)
+      ? this.render = () => h("slot", null)
+      : this.host.parentNode.removeChild(this.host);
+  }
+  render() { return h(Host, null); }
+  static get is() { return "ku4-feature"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "on": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will display when true. This takes precedence\nover any passed policy. (optional)"
+      },
+      "attribute": "on",
+      "reflect": false
+    },
+    "policy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A function or method that returns a boolean.\nA return value of true will turn on the this\nfeature. (optional)"
+      },
+      "attribute": "policy",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "enabled": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/ku4-focus-trap/ku4-focus-trap.css

@@ -0,0 +1,3 @@
+:host {
+  position: static;
+}