ku4web-components 6.4.80 → 6.4.83

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

@@ -0,0 +1,208 @@
+import { Component, Prop, Host, Watch, Listen, Method, Event, Element, h } from '@stencil/core';
+import { Assert } from 'ku4es-kernel';
+import { Document, Key } from 'ku4es-ui-kernel';
+/**
+ * @description ku4-modal
+ */
+export class Ku4Modal {
+  constructor() {
+    /**
+     * Visible when true
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.visible = false;
+    /**
+     * Will not dismiss by clicking and touching outside when false;
+     */
+    this.dismissable = true;
+  }
+  handleVisibility(value) {
+    if (value) {
+      Document.preventScroll();
+      if (Assert.exists(this.trap)) {
+        this.trap.activate();
+      }
+    }
+    else {
+      Document.resumeScroll();
+      if (Assert.exists(this.trap)) {
+        this.trap.deactivate();
+      }
+    }
+  }
+  handleKeyUp(e) {
+    if (this.visible && Key.esc.didFire(e)) {
+      this.dismiss();
+    }
+  }
+  /**
+   * Display modal
+   */
+  async display() {
+    this.visible = true;
+    this.didDisplay.emit(this);
+  }
+  /**
+   * Dismiss modal
+   */
+  async dismiss() {
+    this.visible = false;
+    this.didDismiss.emit(this);
+  }
+  componentDidLoad() {
+    try {
+      this.trap = this.host.querySelector('ku4-focus-trap') ||
+        (document.querySelector(this.focusTrap));
+      this.handleVisibility(this.visible);
+    }
+    catch (e) {
+      throw new Error(`Cannot connect ku4-focus-trap: ${e.messsage}`);
+    }
+  }
+  render() {
+    return (h(Host, { role: "dialog", "aria-modal": "true" },
+      h("section", { class: "ku4-modal-content" },
+        h("slot", null)),
+      h("section", { class: "ku4-modal-overlay", onClick: () => this.dismissable && this.dismiss(), "aria-hidden": "true" })));
+  }
+  static get is() { return "ku4-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-modal.css"]
+  }; }
+  static get properties() { return {
+    "visible": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visible when true"
+      },
+      "attribute": "visible",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "dismissable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will not dismiss by clicking and touching outside when false;"
+      },
+      "attribute": "dismissable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "focusTrap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An optional querySelector of an associated ku4-focus-trap that should\nbe activated when this ku4-modal is display and deactivated when\nthis ku4-modal is didDismiss."
+      },
+      "attribute": "focus-trap",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "didDisplay",
+      "name": "display",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when modal is displayed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "didDismiss",
+      "name": "dismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when modal is dismissed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "display": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Display modal",
+        "tags": []
+      }
+    },
+    "dismiss": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Dismiss modal",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "visible",
+      "methodName": "handleVisibility"
+    }]; }
+  static get listeners() { return [{
+      "name": "keyup",
+      "method": "handleKeyUp",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,14 @@
+:host {
+  -webkit-backface-visibility: hidden;
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 0;
+  transition: max-height 0.4s, padding 0.6s;
+  overflow: hidden;
+}
+
+:host([open]) {
+  padding-top: inherit;
+  padding-bottom: inherit;
+}

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

@@ -0,0 +1,119 @@
+import { Component, Host, Prop, Watch, State, Method, h, Element, Listen } from '@stencil/core';
+/**
+ * @description ku4-panel
+ */
+export class Ku4Panel {
+  constructor() {
+    /**
+     * Set true to display panel
+     */
+    this.open = false;
+    this.maxHeight = this.open ? 'none' : '0px';
+  }
+  openHandler(value) {
+    if (value) {
+      this.maxHeight = `${this.host.scrollHeight}px`;
+    }
+    else {
+      this.host.style.maxHeight = `${this.host.scrollHeight}px`;
+      this.maxHeight = '0px';
+    }
+  }
+  handleTransitionEnd() {
+    this.maxHeight = this.open ? 'none' : '0px';
+  }
+  /**
+   * Toggle panel state
+   */
+  async toggle() {
+    this.open = !this.open;
+  }
+  /**
+   * Close panel
+   */
+  async close() {
+    this.open = false;
+  }
+  render() {
+    const { open, maxHeight } = this;
+    return (h(Host, { "aria-hidden": open ? 'false' : 'true', tabIndex: open ? 0 : -1, style: { maxHeight } },
+      h("slot", null)));
+  }
+  static get is() { return "ku4-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-panel.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set true to display panel"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "maxHeight": {}
+  }; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle panel state",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close panel",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "transitionend",
+      "method": "handleTransitionEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,23 @@
+:host {
+  position: relative;
+  display: block;
+  width: 200px;
+  height: 120px;
+  border: solid 2px #aaa;
+  box-sizing: border-box;
+  overflow: hidden;
+  object-fit: cover;
+}
+
+img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+::slotted(*) {
+  position: relative;
+}

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

@@ -0,0 +1,266 @@
+import { Component, Prop, State, Watch, Method, Host, h } from '@stencil/core';
+import { Assert } from 'ku4es-kernel';
+import { Device } from 'ku4es-ui-kernel';
+import { image } from 'ku4es-ui-data';
+function portraitOrientation() {
+  const { orientation } = Device;
+  return (orientation === Device.landscapePrimary ? 8
+    : orientation === Device.landscapeSecondary ? 6
+      : orientation === Device.portraitPrimary ? 1
+        : orientation === Device.portraitSecondary ? 3
+          : undefined);
+}
+/**
+ * @description ku4-preview
+ */
+export class Ku4Preview {
+  constructor() {
+    this.handleChange = this.handleChange.bind(this);
+  }
+  orientationHandler() {
+    this.orient(this.orientation);
+  }
+  /**
+   * Read data out of this preview
+   */
+  async read() {
+    return this.input.files;
+  }
+  handleChange() {
+    this.status = 'loading';
+    let value;
+    if (Assert.exists(this.orientation)) {
+      value = this.orientation;
+    }
+    else if (this.capture === 'portrait') {
+      value = portraitOrientation();
+    }
+    else if (this.capture === 'landscape') {
+      value = undefined;
+    }
+    else {
+      value = Device.orientation === Device.portraitPrimary
+        ? portraitOrientation()
+        : undefined;
+    }
+    this.orient(value);
+  }
+  orient(orientation) {
+    image.dataUrlFromFile(this.input.files[0], {
+      crossDomain: true,
+      resolution: { x: this.resolutionX, y: this.resolutionY },
+      orientation
+    })
+      .then((dataUrl) => {
+      this.currentSrc = dataUrl;
+      this.status = 'loaded';
+    })
+      .catch(() => {
+      this.status = 'error';
+      this.currentSrc = null;
+    });
+  }
+  componentWillLoad() {
+    this.input = document.getElementById(this.for);
+    this.input.addEventListener('change', this.handleChange);
+  }
+  disconnectedCallback() {
+    this.input.removeEventListener('change', this.handleChange);
+  }
+  render() {
+    return (h(Host, null,
+      h("img", { src: this.currentSrc || this.src, alt: this.alt || 'preview image', onError: ({ target }) => { target.src = this.altsrc; } }),
+      h("slot", null)));
+  }
+  static get is() { return "ku4-preview"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ku4-preview.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ku4-preview.css"]
+  }; }
+  static get properties() { return {
+    "for": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Preview for input having id of value"
+      },
+      "attribute": "for",
+      "reflect": false
+    },
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The default image src"
+      },
+      "attribute": "src",
+      "reflect": false
+    },
+    "altsrc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An alternate fallback src for when src does not load.\nUseful when this component is used e.g. as a profile image"
+      },
+      "attribute": "altsrc",
+      "reflect": false
+    },
+    "orientation": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 6 | 8",
+        "resolved": "1 | 6 | 8",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "EXIF orientation. This will override\nany set capture value. (optional)"
+      },
+      "attribute": "orientation",
+      "reflect": false
+    },
+    "resolutionX": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Maximum display x resolution (optional).\nThis will have no effect on the uploaded file\nonly on preview display. It can be very useful\nto set maximum display resolutions to\nsignificantly increase load times for large files."
+      },
+      "attribute": "resolution-x",
+      "reflect": false
+    },
+    "resolutionY": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Maximum display y resolution (optional).\nThis will have no effect on the uploaded file\nonly on preview display. It can be very useful\nto set maximum display resolutions to\nsignificantly increase load times for large files."
+      },
+      "attribute": "resolution-y",
+      "reflect": false
+    },
+    "capture": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'portrait' | 'landscape'",
+        "resolved": "\"landscape\" | \"portrait\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Force a 'portrait' or 'landscape' capture\norientation. This is unlikely necessary, but\nuseful for those who want to implement specific\ncustom capture orientation logic. (optional)"
+      },
+      "attribute": "capture",
+      "reflect": false
+    },
+    "status": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'loading' | 'loaded' | 'error'",
+        "resolved": "\"error\" | \"loaded\" | \"loading\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates load status of target asset (readonly)"
+      },
+      "attribute": "status",
+      "reflect": true
+    },
+    "alt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Alt text"
+      },
+      "attribute": "alt",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "currentSrc": {}
+  }; }
+  static get methods() { return {
+    "read": {
+      "complexType": {
+        "signature": "() => Promise<FileList>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FileList": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<FileList>"
+      },
+      "docs": {
+        "text": "Read data out of this preview",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "orientation",
+      "methodName": "orientationHandler"
+    }]; }
+}

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