ku4web-components 6.4.34 → 6.4.38

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

@@ -1,427 +0,0 @@
-import { Component, Prop, Watch, h } from '@stencil/core';
-import { Assert, string, wait } from 'ku4es-kernel';
-/**
- * @description ku4-mask
- */
-export class Ku4Mask {
-  constructor() {
-    this.charIndexes = [];
-    this.reverseCharIndexes = [];
-    this.previousValue = '';
-    this.currentValue = '';
-    this.touchStart = false;
-    /**
-     * Mask template
-     */
-    this.template = '';
-    /**
-     * A regex of characters to ban from
-     * entry. A user will not be able to input
-     * any character in this set of characters.
-     * E.g. ban="[()-]" will not allow a user to
-     * input (, ), or - into the target input.
-     */
-    this.ban = '';
-    /**
-     * A test pattern for the mask to allow or
-     * disallow characters at targeted points
-     * in the input. The pattern is a character
-     * separated value of regular expressions
-     * where the first character denotes the
-     * character separator at each subsequent
-     * value is a regular expression for the
-     * character at that indicated index.
-     * E.g. `pattern=",[345],,,[^abc]"` would mean
-     * that "," is the separator and that the
-     * first character must  be a 3, 4, or 5, and
-     * the fourth character cannot be an a, b or c.
-     */
-    this.pattern = '';
-    /**
-     * Mask Character
-     */
-    this.char = '_';
-    /**
-     * Hide mask
-     */
-    this.hidden = false;
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleTouchStart = this.handleTouchStart.bind(this);
-    this.init();
-  }
-  init() {
-    this.chars = this.char && new RegExp(this.char);
-    this.banned = this.ban && new RegExp(this.ban);
-    const pattern = this.pattern.replace(/[\s\n]/gm, '');
-    this.patterns = pattern.substr(1).split(pattern[0]).map((v) => {
-      try {
-        return v && new RegExp(v) || null;
-      }
-      catch (e) {
-        /**
-         * TODO: Remove try/catch when Safari supports lookbehinds.
-         * Safari does not support lookbehinds and blows up everything
-         * because of this. This try catch allows all masking behaviour
-         * to continue to work except for patterns that include lookbehinds.
-         */
-      }
-    });
-    this.charIndexes = this.template.split('')
-      .reduce((acc, char, i) => {
-      if (this.chars.test(char)) {
-        acc.push(i);
-      }
-      return acc;
-    }, []);
-    this.reverseCharIndexes = [...this.charIndexes].reverse();
-    return this;
-  }
-  templateHandler(newTemplate, oldTemplate) {
-    const { input, previousCharIndex, previousValue, currentValue, value, char } = this;
-    const previousLength = string.unmask(previousValue, oldTemplate, char).length;
-    const currentLength = string.unmask(currentValue, oldTemplate, char).length;
-    const nextIndex = previousLength < currentLength ? previousCharIndex + 1 : previousCharIndex;
-    this.init().value = string.mask(string.unmask(value, oldTemplate, char), newTemplate, char);
-    input.setSelectionRange(nextIndex, nextIndex);
-  }
-  charHandler(newChar, oldChar) {
-    const { value, template } = this;
-    this.init().value = string.mask(string.unmask(value, template, oldChar), template, newChar);
-  }
-  get previousCharIndex() {
-    return this.reverseCharIndexes.find(i => this.selectionStart > i) || this.charIndexes[0];
-  }
-  get value() {
-    return this.currentValue;
-  }
-  set value(value) {
-    const { chars, hidden, input } = this;
-    const indexOfChar = value.search(chars);
-    this.currentValue = value;
-    input.value = hidden && indexOfChar > -1 ? value.substring(0, indexOfChar) : value;
-  }
-  handleTouchStart() {
-    this.touchStart = true;
-  }
-  handleFocus() {
-    // Abort if the browser is IE11
-    // @ts-ignore - Leveraging documentMode to determine unsupported browser
-    if (window.document.documentMode) {
-      return;
-    }
-    const { input, template, char, chars, touchStart } = this;
-    this.value = string.mask(string.unmask(this.value, template, char), template, char);
-    wait(0).then(() => {
-      const index = input.value.search(chars);
-      const selection = index < 0 ? input.value.length : index;
-      this.input.setSelectionRange(index < 0 && !touchStart ? 0 : selection, selection);
-      this.touchStart = false;
-    });
-  }
-  handleKeyDown(e) {
-    // Abort if the browser is IE11
-    // @ts-ignore - Leveraging documentMode to determine unsupported browser
-    if (window.document.documentMode) {
-      return;
-    }
-    const { banned, hidden, template, char } = this;
-    if (e.key &&
-      e.key.length === 1 &&
-      banned &&
-      (banned.test(e.key) &&
-        !(e.altKey || e.ctrlKey || e.metaKey))) {
-      e.preventDefault();
-    }
-    this.previousValue = hidden ? string.mask(string.unmask(e.target.value, template, char), template, char) : e.target.value;
-    this.selectionStart = e.target.selectionStart;
-    this.selectionEnd = e.target.selectionEnd;
-  }
-  handleInput(e) {
-    // Abort if the browser is IE11
-    // @ts-ignore - Leveraging documentMode to determine unsupported browser
-    if (window.document.documentMode) {
-      return;
-    }
-    const { input, template, char, chars, previousValue, banned, selectionStart, selectionEnd, previousCharIndex, patterns, charIndexes, reverseCharIndexes } = this;
-    if (!chars.test(this.previousValue) &&
-      e.inputType !== 'insertFromPaste' &&
-      e.inputType !== 'deleteContentBackward' &&
-      e.inputType !== 'deleteContentForward' &&
-      selectionStart === selectionEnd) {
-      this.value = previousValue;
-      return;
-    }
-    if (e.inputType === 'insertFromPaste') {
-      try {
-        navigator.clipboard.readText()
-          .then((rawData) => {
-          const data = rawData.replace(new RegExp(banned, 'g'), '');
-          if (Assert.isNullOrEmpty(data)) {
-            this.value = previousValue;
-            input.setSelectionRange(selectionStart, selectionStart);
-            return;
-          }
-          if (!banned || !banned.test(data)) {
-            let nextValue = previousValue;
-            if (selectionStart < selectionEnd) {
-              const startValue = reverseCharIndexes.find(v => v <= selectionStart - 1);
-              const endValue = reverseCharIndexes.find(v => v <= selectionEnd - 1);
-              const startInsertIndex = charIndexes.findIndex(v => v === startValue);
-              const endInsertIndex = charIndexes.findIndex(v => v === endValue);
-              const unmasked = string.unmask(previousValue, template, char);
-              const newValue = unmasked.substring(0, startInsertIndex + 1) + unmasked.substring(endInsertIndex + 1, previousValue.length);
-              nextValue = string.mask(newValue, template, char);
-            }
-            const charIndex = charIndexes.find(v => v >= selectionStart);
-            const insertIndex = charIndexes.findIndex(v => v === charIndex);
-            const unmasked = string.unmask(nextValue, template, char);
-            nextValue = unmasked.substring(0, insertIndex) + data + unmasked.substring(insertIndex, previousValue.length);
-            this.value = string.mask(nextValue, template, char);
-            const index = charIndexes[insertIndex + data.length] || this.value.search(chars) || this.value.length;
-            input.setSelectionRange(index, index);
-          }
-        });
-        this.value = previousValue;
-        input.setSelectionRange(selectionStart, selectionStart);
-        return;
-      }
-      catch (e) {
-        this.value = previousValue;
-        input.setSelectionRange(selectionStart, selectionStart);
-        return;
-      }
-    }
-    if (e.inputType === 'deleteContentBackward') {
-      const startValue = reverseCharIndexes.find(v => v <= selectionStart - 1);
-      const endValue = reverseCharIndexes.find(v => v <= selectionEnd - 1);
-      const startInsertIndex = charIndexes.findIndex(v => v === startValue);
-      const endInsertIndex = charIndexes.findIndex(v => v === endValue);
-      const unmasked = string.unmask(previousValue, template, char);
-      if (startInsertIndex < endInsertIndex) {
-        const newValue = unmasked.substring(0, startInsertIndex + 1) + unmasked.substring(endInsertIndex + 1, previousValue.length);
-        this.value = string.mask(newValue, template, char);
-        newValue && startInsertIndex > -1
-          ? input.setSelectionRange(previousCharIndex + 1, previousCharIndex + 1)
-          : input.setSelectionRange(previousCharIndex, previousCharIndex);
-      }
-      else {
-        const newValue = unmasked.substring(0, startInsertIndex) + unmasked.substring(endInsertIndex + 1, previousValue.length);
-        this.value = string.mask(newValue, template, char);
-        input.setSelectionRange(previousCharIndex, previousCharIndex);
-      }
-      return;
-    }
-    if (e.inputType === 'deleteContentForward') {
-      const charIndex = charIndexes.find(v => v >= selectionStart);
-      const insertIndex = charIndexes.findIndex(v => v === charIndex);
-      const unmasked = string.unmask(previousValue, template, char);
-      const newValue = unmasked.substring(0, insertIndex) + unmasked.substring(insertIndex + 1, previousValue.length);
-      this.value = string.mask(newValue, template, char);
-      input.setSelectionRange(selectionStart, selectionStart);
-      return;
-    }
-    //Abort if auxiliary key is pressed.
-    if (e.altKey || e.ctrlKey || e.metaKey) {
-      return;
-    }
-    //Abort if disallowed character
-    if (!e.data) {
-      this.value = previousValue;
-      input.setSelectionRange(selectionStart, selectionStart);
-      return;
-    }
-    //Append
-    if (chars.test(previousValue.charAt(selectionStart)) ||
-      selectionStart === template.length) {
-      const unmasked = string.unmask(previousValue, template, char);
-      this.value = string.mask(unmasked + e.data, template, char);
-      const charIndex = this.value.search(chars);
-      const index = charIndex < 0 ? template.length : charIndex;
-      input.setSelectionRange(index, index);
-      const patternIndex = charIndexes.findIndex(v => v >= index);
-      const validationIndex = patternIndex < 0 ? charIndexes.length - 1 : patternIndex - 1;
-      this.validate(e.data, patterns[validationIndex]);
-    }
-    //Insert
-    else {
-      let nextValue = previousValue;
-      if (selectionStart < selectionEnd) {
-        const startValue = reverseCharIndexes.find(v => v <= selectionStart - 1);
-        const endValue = reverseCharIndexes.find(v => v <= selectionEnd - 1);
-        const startInsertIndex = charIndexes.findIndex(v => v === startValue);
-        const endInsertIndex = charIndexes.findIndex(v => v === endValue);
-        const unmasked = string.unmask(previousValue, template, char);
-        const newValue = unmasked.substring(0, startInsertIndex + 1) + unmasked.substring(endInsertIndex + 1, previousValue.length);
-        nextValue = string.mask(newValue, template, char);
-      }
-      const charIndex = charIndexes.find(v => v >= selectionStart);
-      const insertIndex = charIndexes.findIndex(v => v === charIndex);
-      const unmasked = string.unmask(nextValue, template, char);
-      nextValue = unmasked.substring(0, insertIndex) + e.data + unmasked.substring(insertIndex, previousValue.length);
-      const index = charIndexes.find(v => v > charIndex);
-      this.value = string.mask(nextValue, template, char);
-      input.setSelectionRange(index, index);
-      const patternIndex = charIndexes.findIndex(v => v >= index);
-      const validationIndex = patternIndex < 0 ? charIndexes.length - 1 : patternIndex - 1;
-      this.validate(e.data, patterns[validationIndex]);
-    }
-  }
-  validate(data, pattern) {
-    const { previousValue, input, value, selectionStart } = this;
-    if (Assert.exists(pattern) &&
-      !(pattern.test(data) || (/\(\?[!<=]/.test(pattern.toString()) && pattern.test(value)))) {
-      this.value = previousValue;
-      input.setSelectionRange(selectionStart, selectionStart);
-    }
-  }
-  componentWillLoad() {
-    this.input = document.getElementById(this.for);
-    if (Assert.exists(this.input)) {
-      this.input.addEventListener('focus', this.handleFocus);
-      this.input.addEventListener('keydown', this.handleKeyDown);
-      this.input.addEventListener('input', this.handleInput);
-      this.input.addEventListener('touchstart', this.handleTouchStart);
-    }
-    else {
-      // eslint-disable-next-line no-console
-      console.error('ku4-mask must have a valid `for` referencing target field `id`.');
-    }
-  }
-  disconnectedCallback() {
-    if (this.input && this.input.removeEventListener) {
-      this.input.removeEventListener('focus', this.handleFocus);
-      this.input.removeEventListener('keydown', this.handleKeyDown);
-      this.input.removeEventListener('input', this.handleInput);
-      this.input.removeEventListener('touchstart', this.handleTouchStart);
-    }
-  }
-  render() {
-    return h("slot", null);
-  }
-  static get is() { return "ku4-mask"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-mask.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-mask.css"]
-  }; }
-  static get properties() { return {
-    "for": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Mask for input having id of value"
-      },
-      "attribute": "for",
-      "reflect": false
-    },
-    "template": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Mask template"
-      },
-      "attribute": "template",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "ban": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A regex of characters to ban from\nentry. A user will not be able to input\nany character in this set of characters.\nE.g. ban=\"[()-]\" will not allow a user to\ninput (, ), or - into the target input."
-      },
-      "attribute": "ban",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "pattern": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A test pattern for the mask to allow or\ndisallow characters at targeted points\nin the input. The pattern is a character\nseparated value of regular expressions\nwhere the first character denotes the\ncharacter separator at each subsequent\nvalue is a regular expression for the\ncharacter at that indicated index.\nE.g. `pattern=\",[345],,,[^abc]\"` would mean\nthat \",\" is the separator and that the\nfirst character must  be a 3, 4, or 5, and\nthe fourth character cannot be an a, b or c."
-      },
-      "attribute": "pattern",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "char": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Mask Character"
-      },
-      "attribute": "char",
-      "reflect": false,
-      "defaultValue": "'_'"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hide mask"
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "template",
-      "methodName": "templateHandler"
-    }, {
-      "propName": "char",
-      "methodName": "charHandler"
-    }]; }
-}

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

@@ -1,85 +0,0 @@
-@keyframes ku4-modal-content-enter {
-  0% {
-    transform: var(--ku4-modal-content-animation-start-transform, scale(0.5));
-    opacity: var(--ku4-modal-content-animation-start-opacity, 0);
-  }
-  50% {
-    transform: var(--ku4-modal-content-animation-mid-transform, scale(1.2));
-    opacity: var(--ku4-modal-content-animation-mid-opacity, 0.8);
-  }
-  100% {
-    transform: var(--ku4-modal-content-animation-end-transform, scale(1));
-    opacity: var(--ku4-modal-content-animation-end-opacity, 1);
-  }
-}
-@keyframes ku4-modal-overlay-enter {
-  0% {
-    transform: var(--ku4-modal-overlay-animation-start-transform, none);
-    opacity: var(--ku4-modal-overlay-animation-start-opacity, 0);
-  }
-  50% {
-    transform: var(--ku4-modal-overlay-animation-mid-transform, none);
-    opacity: var(--ku4-modal-overlay-animation-mid-opacity, 0.35);
-  }
-  100% {
-    transform: var(--ku4-modal-overlay-animation-end-transform, none);
-    opacity: var(--ku4-modal-overlay-animation-end-opacity, 0.4);
-  }
-}
-:host {
-  position: fixed;
-  display: none;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  justify-content: center;
-  align-items: center;
-  background: transparent;
-  overflow: auto;
-  transform-style: var(--ku4-modal-transform-style, initial);
-}
-
-.ku4-modal-content {
-  position: relative;
-  top: 0;
-  left: 0;
-}
-
-.ku4-modal-overlay {
-  position: fixed;
-  display: flex;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background: var(--ku4-modal-overlay-background, #000);
-}
-
-:host([visible]) {
-  display: flex;
-  z-index: var(--ku4-modal-z-index, 5);
-}
-
-:host([visible]) .ku4-modal-content {
-  animation-name: ku4-modal-content-enter;
-  animation-duration: var(--ku4-modal-content-animation-duration, 0.4s);
-  animation-timing-function: var(--ku4-modal-content-animation-timing-function, ease);
-  transform: var(--ku4-modal-content-transform, none);
-  opacity: var(--ku4-modal-content-opacity, 1);
-  z-index: calc(var(--ku4-modal-z-index, 5) + 1);
-}
-
-:host([visible]) .ku4-modal-overlay {
-  animation-name: ku4-modal-overlay-enter;
-  animation-duration: var(--ku4-modal-overlay-animation-duration, 0.4s);
-  animation-timing-function: var(--ku4-modal-overlay-animation-timing-function, ease);
-  transform: var(--ku4-modal-overlay-transform, none);
-  opacity: var(--ku4-modal-overlay-opacity, 0.4);
-  z-index: calc(var(--ku4-modal-z-index, 5));
-}
-
-:host([visible=false]) {
-  display: none;
-}

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

@@ -1,186 +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;
-  }
-  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.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"
-    },
-    "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
-    }]; }
-}