ku4web-components 6.4.85 → 6.4.87

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

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

@@ -1,14 +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: hidden;
-}
-
-:host([open]) {
-  padding-top: inherit;
-  padding-bottom: inherit;
-}

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

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

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

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

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