ku4web-components 6.5.5 → 6.5.6

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

@@ -0,0 +1,459 @@
+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.handleBlur = this.handleBlur.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;
+    const inputUnmasked = string.unmask(input.value, template, char);
+    const valueUnmasked = string.unmask(this.value, template, char);
+    this.value = inputUnmasked !== valueUnmasked
+      ? string.mask(inputUnmasked, template, char)
+      : string.mask(valueUnmasked, 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;
+    });
+  }
+  handleBlur() {
+    const { template, char } = this;
+    if (Assert.isEmpty(string.unmask(this.value, template, char))) {
+      this.value = '';
+    }
+  }
+  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.type === 'input' && !e.inputType) &&
+      e.inputType !== 'insertFromPaste' &&
+      e.inputType !== 'deleteContentBackward' &&
+      e.inputType !== 'deleteContentForward' &&
+      e.inputType !== 'deleteByCut' &&
+      selectionStart === selectionEnd) {
+      this.value = previousValue;
+      return;
+    }
+    if (e.inputType === 'insertFromPaste') {
+      try {
+        navigator.clipboard.readText()
+          .then((rawData) => {
+          const unmask = string.unmask(rawData, template, char);
+          const data = unmask.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' || e.inputType === 'deleteByCut') {
+      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) {
+      if (e.type === 'input' && !e.inputType) {
+        const { value } = e.target;
+        const charIndex = charIndexes.find(v => v >= selectionStart);
+        const insertIndex = charIndexes.findIndex(v => v === charIndex);
+        const unmasked = string.unmask(value, template, char);
+        const allowed = value.replace(new RegExp(banned, 'g'), '');
+        const nextValue = unmasked.substring(0, insertIndex) + allowed;
+        const index = charIndexes.find(v => v > charIndex);
+        const patternIndex = charIndexes.findIndex(v => v >= index);
+        const validationIndex = patternIndex < 0 ? charIndexes.length - 1 : patternIndex - 1;
+        this.value = string.mask(nextValue, template, char);
+        this.validate(nextValue, patterns[validationIndex]);
+      }
+      else {
+        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('blur', this.handleBlur);
+      this.input.addEventListener('keydown', this.handleKeyDown);
+      this.input.addEventListener('input', this.handleInput);
+      this.input.addEventListener('ku4-mask-input', this.handleInput);
+      this.input.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+    }
+    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('blur', this.handleBlur);
+      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

@@ -0,0 +1,85 @@
+@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;
+}