ku4web-components 6.5.5 → 6.5.6

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

@@ -0,0 +1,408 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+/**
+ * @description ku4-grid
+ */
+export class Ku4Grid {
+  constructor() {
+    //<editor-fold desc="columns">
+    /**
+     * Number of columns to render at extra-small (optional).
+     */
+    this.columnsXs = 1;
+    //</editor-fold>
+    //<editor-fold desc="offset-left">
+    /**
+     * Number of columns to offset left at extra-small (optional).
+     */
+    this.offsetLeftXs = 0;
+    //</editor-fold>
+    //<editor-fold desc="offset-right">
+    /**
+     * Number of columns to offset right (optional).
+     */
+    this.offsetRight = 0;
+    //</editor-fold>
+    //<editor-fold desc="offset">
+    /**
+     * Number of columns to offset left and right at extra-small (optional).
+     */
+    this.offsetXs = 0;
+  }
+  //</editor-fold>
+  get columnClass() {
+    const { columnsXs, columnsSm, columnsMd, columnsLg } = this;
+    const value = [];
+    if (columnsXs && !Number.isNaN(columnsXs)) {
+      value.push(`columns-xs-${columnsXs}`);
+    }
+    if (columnsSm && !Number.isNaN(columnsSm)) {
+      value.push(`columns-sm-${columnsSm}`);
+    }
+    if (columnsMd && !Number.isNaN(columnsMd)) {
+      value.push(`columns-md-${columnsMd}`);
+    }
+    if (columnsLg && !Number.isNaN(columnsLg)) {
+      value.push(`columns-lg-${columnsLg}`);
+    }
+    return value.join(' ');
+  }
+  get offsetLeftClass() {
+    const { offsetLeftXs, offsetLeftSm, offsetLeftMd, offsetLeftLg } = this;
+    const value = [];
+    if (offsetLeftXs && !Number.isNaN(offsetLeftXs)) {
+      value.push(`offset-left-xs-${offsetLeftXs}`);
+    }
+    if (offsetLeftSm && !Number.isNaN(offsetLeftSm)) {
+      value.push(`offset-left-sm-${offsetLeftSm}`);
+    }
+    if (offsetLeftMd && !Number.isNaN(offsetLeftMd)) {
+      value.push(`offset-left-md-${offsetLeftMd}`);
+    }
+    if (offsetLeftLg && !Number.isNaN(offsetLeftLg)) {
+      value.push(`offset-left-lg-${offsetLeftLg}`);
+    }
+    return value.join(' ');
+  }
+  get offsetRightClass() {
+    const { offsetRightXs, offsetRightSm, offsetRightMd, offsetRightLg } = this;
+    const value = [];
+    if (offsetRightXs && !Number.isNaN(offsetRightXs)) {
+      value.push(`offset-right-xs-${offsetRightXs}`);
+    }
+    if (offsetRightSm && !Number.isNaN(offsetRightSm)) {
+      value.push(`offset-right-sm-${offsetRightSm}`);
+    }
+    if (offsetRightMd && !Number.isNaN(offsetRightMd)) {
+      value.push(`offset-right-md-${offsetRightMd}`);
+    }
+    if (offsetRightLg && !Number.isNaN(offsetRightLg)) {
+      value.push(`offset-right-lg-${offsetRightLg}`);
+    }
+    return value.join(' ');
+  }
+  get offsetClass() {
+    const { offsetXs, offsetSm, offsetMd, offsetLg } = this;
+    const value = [];
+    if (offsetXs && !Number.isNaN(offsetXs)) {
+      value.push(`offset-xs-${offsetXs}`);
+    }
+    if (offsetSm && !Number.isNaN(offsetSm)) {
+      value.push(`offset-sm-${offsetSm}`);
+    }
+    if (offsetMd && !Number.isNaN(offsetMd)) {
+      value.push(`offset-md-${offsetMd}`);
+    }
+    if (offsetLg && !Number.isNaN(offsetLg)) {
+      value.push(`offset-lg-${offsetLg}`);
+    }
+    return value.join(' ');
+  }
+  render() {
+    const { columnClass, offsetClass, offsetLeftClass, offsetRightClass, } = this;
+    return (h(Host, { class: `${columnClass} ${offsetLeftClass} ${offsetRightClass} ${offsetClass}` },
+      h("slot", null)));
+  }
+  static get is() { return "ku4-grid"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-grid.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-grid.css"]
+  }; }
+  static get properties() { return {
+    "columnsXs": {
+      "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": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to render at extra-small (optional)."
+      },
+      "attribute": "columns-xs",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "columnsSm": {
+      "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": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to render at small (optional)."
+      },
+      "attribute": "columns-sm",
+      "reflect": false
+    },
+    "columnsMd": {
+      "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": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to render at medium (optional)."
+      },
+      "attribute": "columns-md",
+      "reflect": false
+    },
+    "columnsLg": {
+      "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": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to render at large (optional)."
+      },
+      "attribute": "columns-lg",
+      "reflect": false
+    },
+    "offsetLeftXs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left at extra-small (optional)."
+      },
+      "attribute": "offset-left-xs",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "offsetLeftSm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left at small (optional)."
+      },
+      "attribute": "offset-left-sm",
+      "reflect": false
+    },
+    "offsetLeftMd": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left at medium (optional)."
+      },
+      "attribute": "offset-left-md",
+      "reflect": false
+    },
+    "offsetLeftLg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset at large (optional)."
+      },
+      "attribute": "offset-left-lg",
+      "reflect": false
+    },
+    "offsetRight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset right (optional)."
+      },
+      "attribute": "offset-right",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "offsetRightXs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset at extra-small (optional)."
+      },
+      "attribute": "offset-right-xs",
+      "reflect": false
+    },
+    "offsetRightSm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset right at small (optional)."
+      },
+      "attribute": "offset-right-sm",
+      "reflect": false
+    },
+    "offsetRightMd": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset right at medium (optional)."
+      },
+      "attribute": "offset-right-md",
+      "reflect": false
+    },
+    "offsetRightLg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset right at large (optional)."
+      },
+      "attribute": "offset-right-lg",
+      "reflect": false
+    },
+    "offsetXs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left and right at extra-small (optional)."
+      },
+      "attribute": "offset-xs",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "offsetSm": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left and right at small (optional)."
+      },
+      "attribute": "offset-sm",
+      "reflect": false
+    },
+    "offsetMd": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left and right at medium (optional)."
+      },
+      "attribute": "offset-md",
+      "reflect": false
+    },
+    "offsetLg": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 1 | 2 | 3 | 4 | 5",
+        "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Number of columns to offset left and right at large (optional)."
+      },
+      "attribute": "offset-lg",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,36 @@
+:host {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+::slotted(*) {
+  padding: 6px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background-color: #fff;
+  font-size: 18px;
+  -webkit-appearance: none;
+}
+
+label {
+  position: absolute;
+  display: var(--ku4-label-display, inline);
+  top: var(--ku4-label-top, -6px);
+  left: var(--ku4-label-left, 8px);
+  padding: var(--ku4-label-padding, 0 4px);
+  font-size: inherit;
+  line-height: inherit;
+  background-color: var(--ku4-label-background-color, inherit);
+  color: inherit;
+  z-index: 1;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+}
+
+label.empty {
+  opacity: 0;
+  transition: all 0.1s ease;
+}

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

@@ -0,0 +1,115 @@
+import { Component, Host, Prop, State, Element, h } from '@stencil/core';
+import { Assert, identity, wait } from 'ku4es-kernel';
+/**
+ * @description ku4-label
+ */
+export class Ku4Label {
+  constructor() {
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+  }
+  handleFocus() {
+    wait(100).then(() => { this.empty = Assert.isNullOrEmpty(this.field.value); });
+  }
+  handleChange() {
+    this.empty = Assert.isNullOrEmpty(this.field.value);
+  }
+  handleInput() {
+    this.empty = Assert.isNullOrEmpty(this.field.value);
+  }
+  handleKeyUp() {
+    this.empty = Assert.isNullOrEmpty(this.field.value);
+  }
+  handleReset() {
+    this.empty = true;
+  }
+  componentWillLoad() {
+    this.field = this.host.querySelector('input, select, textarea');
+    this.empty = Assert.isNullOrEmpty(this.field.value);
+    this.placeholder = this.field.getAttribute('placeholder');
+    this.field.addEventListener('focus', this.handleFocus);
+    this.field.addEventListener('change', this.handleChange);
+    this.field.addEventListener('input', this.handleInput);
+    this.field.addEventListener('keyup', this.handleKeyUp);
+    const labelledby = this.field.getAttribute('aria-labelledby');
+    const id = this.host.getAttribute('id') || identity.uid();
+    this.host.setAttribute('id', id);
+    if (Assert.isNullOrEmpty(labelledby)) {
+      this.field.setAttribute('aria-labelledby', id);
+    }
+    if (Assert.isFunction(this.host.closest)) {
+      this.form = this.host.closest('form');
+      if (this.form && this.form.addEventListener) {
+        this.form.addEventListener('reset', this.handleReset);
+      }
+    }
+  }
+  disconnectedCallback() {
+    if (this.field && this.field.removeEventListener) {
+      this.field.removeEventListener('focus', this.handleFocus);
+      this.field.removeEventListener('change', this.handleChange);
+      this.field.removeEventListener('input', this.handleInput);
+      this.field.removeEventListener('keyup', this.handleKeyUp);
+      if (this.form && this.form.removeEventListener) {
+        this.form.removeEventListener('reset', this.handleReset);
+      }
+    }
+  }
+  render() {
+    const { empty, value, placeholder } = this;
+    return (h(Host, null,
+      h("label", { htmlFor: this.for, class: `${empty ? 'empty' : ''}` }, value || placeholder),
+      h("slot", null)));
+  }
+  static get is() { return "ku4-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-label.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-label.css"]
+  }; }
+  static get properties() { return {
+    "for": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the id attribute of the input that this\nis the label for."
+      },
+      "attribute": "for",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optional Label value. This value is driven\nby the input placeholder attribute by default."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "empty": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}