inputmaskElement.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import window from "./global/window";
  2. import Inputmask from "./inputmask";
  3. const document = window.document;
  4. // add check if it is supported by the browser
  5. // integrate shadowroot into maskcope
  6. if (
  7. document &&
  8. document.head &&
  9. document.head.attachShadow &&
  10. window.customElements &&
  11. window.customElements.get("input-mask") === undefined
  12. ) {
  13. class InputmaskElement extends HTMLElement {
  14. constructor() {
  15. super();
  16. const attributeNames = this.getAttributeNames(),
  17. shadow = this.attachShadow({ mode: "closed" });
  18. this.input = document.createElement("input");
  19. this.input.type = "text";
  20. shadow.appendChild(this.input);
  21. for (const attr in attributeNames) {
  22. if (Object.prototype.hasOwnProperty.call(attributeNames, attr)) {
  23. this.input.setAttribute(
  24. attributeNames[attr],
  25. this.getAttribute(attributeNames[attr])
  26. );
  27. }
  28. }
  29. const im = new Inputmask();
  30. im.dataAttribute = "";
  31. im.mask(this.input);
  32. }
  33. attributeChangedCallback(attrName, oldVal, newVal) {
  34. this.input.setAttribute(attrName, newVal);
  35. }
  36. // bind value
  37. get value() {
  38. return this.input.value;
  39. }
  40. set value(value) {
  41. this.input.value = value;
  42. }
  43. }
  44. window.customElements.define("input-mask", InputmaskElement);
  45. }