@nectary/components 4.12.1 → 5.0.0

package/input/index.js

@@ -1,11 +1,15 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-import { requestSubmitForm, setFormValue } from '../utils/form';
-import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input-wrapper{position:relative;flex:1;flex-basis:0;min-width:0;align-self:stretch}#input{all:initial;width:100%;height:100%;padding:0 12px;box-sizing:border-box;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder)!important;color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input-mask{display:none;position:absolute;inset:0;padding:0 12px;pointer-events:none;color:var(--sinch-comp-input-color-default-text-placeholder);white-space:pre;height:fit-content;margin:auto 0;overflow:hidden}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([disabled]) #border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input-wrapper:focus-within+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}#input-mask,:host([mask]) #input{font:var(--sinch-sys-font-body-monospace-m)}:host([mask]) #input-mask{display:block}:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within)+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]:not(:placeholder-shown){font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input-wrapper>#input,#icon-wrapper.empty~#input-wrapper>#input-mask{padding-left:12px}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><div id="input-wrapper"><div id="input-mask"></div><input id="input" type="text"/></div><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
-import { deleteContentBackward, deleteContentForward, getMaskSymbols, inputTypes, insertText, beginMaskedComposition, endMaskedComposition, splitValueAndMask, getMergedValueSliced, insertFromPaste } from './utils';
-const template = document.createElement('template');
+import { Context, subscribeContext } from "../utils/context.js";
+import { getBooleanAttribute, updateAttribute, isAttrEqual, isAttrTrue, updateBooleanAttribute, updateLiteralAttribute, getAttribute, getLiteralAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { isElementFocused } from "../utils/slot.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { setFormValue, requestSubmitForm } from "../utils/form.js";
+import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
+import { splitValueAndMask, inputTypes, beginMaskedComposition, endMaskedComposition, deleteContentForward, deleteContentBackward, insertFromPaste, insertText, getMergedValueSliced, getMaskSymbols } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  all: initial;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--sinch-local-shape-radius);\n  width: 100%;\n  height: var(--sinch-local-size);\n  background-color: var(--sinch-comp-input-color-default-background-initial);\n\n  /* Default values */\n  --sinch-local-size: var(--sinch-comp-input-size-container-m);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-m);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-m);\n}\n\n:host([data-size="l"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-l);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-l);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-l);\n}\n\n:host([data-size="m"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-m);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-m);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-m);\n}\n\n:host([data-size="s"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-s);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-s);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-s);\n}\n\n#input-wrapper {\n  position: relative;\n  flex: 1;\n  flex-basis: 0;\n  min-width: 0;\n  align-self: stretch;\n}\n\n#input {\n  all: initial;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  box-sizing: border-box;\n  font: var(--sinch-comp-input-font-input);\n  color: var(--sinch-comp-input-color-default-text-initial);\n}\n\n#input::placeholder {\n  font: var(--sinch-comp-input-font-placeholder) !important;\n  color: var(--sinch-comp-input-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-input-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-input-color-disabled-text-initial);\n}\n\n#input-mask {\n  display: none;\n  position: absolute;\n  inset: 0;\n  padding: 0 12px;\n  pointer-events: none;\n  color: var(--sinch-comp-input-color-default-text-placeholder);\n  white-space: pre;\n  height: fit-content;\n  margin: auto 0;\n  overflow: hidden;\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-input-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([disabled]) #border {\n  border-color: var(--sinch-comp-input-color-disabled-border-initial);\n}\n\n#input-wrapper:focus-within + #border {\n  border-color: var(--sinch-comp-input-color-default-border-focus);\n  border-width: 2px;\n}\n\n:host([mask]) #input,\n#input-mask {\n  font: var(--sinch-sys-font-body-monospace-m);\n}\n\n:host([mask]) #input-mask {\n  display: block;\n}\n\n:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within) + #border {\n  border-color: var(--sinch-comp-input-color-invalid-border-initial);\n}\n\n#input[type="password"]:not(:placeholder-shown) {\n  font-size: 1.5em;\n  letter-spacing: 0.1em;\n}\n\n#icon-wrapper {\n  position: relative;\n  height: 100%;\n}\n\n#icon {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  left: 12px;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n\n  --sinch-global-color-icon: var(--sinch-comp-input-color-default-icon-initial);\n}\n\n:host([disabled]) #icon {\n  --sinch-global-color-icon: var(--sinch-comp-input-color-disabled-icon-initial);\n}\n\n#icon-wrapper.empty {\n  display: none;\n}\n\n#icon-wrapper.empty ~ #input-wrapper > #input,\n#icon-wrapper.empty ~ #input-wrapper > #input-mask {\n  padding-left: 12px;\n}\n\n#icon-wrapper:not(.empty) ~ #input-wrapper > #input,\n#icon-wrapper:not(.empty) ~ #input-wrapper > #input-mask {\n  padding-left: calc(var(--sinch-global-size-icon) + 20px);\n}\n\n#right {\n  display: flex;\n  flex-direction: row;\n  align-self: stretch;\n  align-items: center;\n  gap: 4px;\n  padding-right: 4px;\n}\n\n#right.empty {\n  display: none;\n}\n\n#left {\n  display: flex;\n  flex-direction: row;\n  align-self: stretch;\n  align-items: center;\n  gap: 4px;\n  padding-left: 4px;\n}\n\n#left.empty {\n  display: none;\n}\n</style>\n\n<div id="wrapper">\n  <div id="left">\n    <slot name="left"></slot>\n  </div>\n  <div id="icon-wrapper">\n    <div id="icon">\n      <slot name="icon"></slot>\n    </div>\n  </div>\n  <div id="input-wrapper">\n    <div id="input-mask"></div>\n    <input id="input" type="text"/>\n  </div>\n  <div id="border"></div>\n  <div id="right">\n    <slot name="right"></slot>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Input extends NectaryElement {
+class Input extends NectaryElement {
   #$input;
   #$inputMask;
   #$iconSlot;
@@ -18,7 +22,7 @@ export class Input extends NectaryElement {
   #selectionStart = 0;
   #selectionEnd = 0;
   #isCompositionInProgress = false;
-  #compositionBeginValue = '';
+  #compositionBeginValue = "";
   #wasClearedByMask = false;
   #controller = null;
   #sizeContext;
@@ -27,55 +31,53 @@ export class Input extends NectaryElement {
   static formAssociated = true;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow({ delegatesFocus: true });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    this.#$input = shadowRoot.querySelector('#input');
-    this.#$inputMask = shadowRoot.querySelector('#input-mask');
+    this.#$input = shadowRoot.querySelector("#input");
+    this.#$inputMask = shadowRoot.querySelector("#input-mask");
     this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
-    this.#$iconWrapper = shadowRoot.querySelector('#icon-wrapper');
+    this.#$iconWrapper = shadowRoot.querySelector("#icon-wrapper");
     this.#$rightSlot = shadowRoot.querySelector('slot[name="right"]');
-    this.#$rightWrapper = shadowRoot.querySelector('#right');
+    this.#$rightWrapper = shadowRoot.querySelector("#right");
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
-    this.#$leftWrapper = shadowRoot.querySelector('#left');
-    this.#$wrapper = shadowRoot.querySelector('#wrapper');
-    this.#sizeContext = new Context(this.#$wrapper, 'size');
+    this.#$leftWrapper = shadowRoot.querySelector("#left");
+    this.#$wrapper = shadowRoot.querySelector("#wrapper");
+    this.#sizeContext = new Context(this.#$wrapper, "size");
     this.#controller = new AbortController();
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'textbox');
-    this.#internals.role = 'textbox';
+    this.setAttribute("role", "textbox");
+    this.#internals.role = "textbox";
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
     const options = {
       signal: this.#controller.signal
     };
-    this.#$input.addEventListener('keydown', this.#onKeyDown, options);
-    this.#$input.addEventListener('input', this.#onInput, options);
-    this.#$input.addEventListener('cut', this.#onCut, options);
-    this.#$input.addEventListener('copy', this.#onCopy, options);
-    this.#$input.addEventListener('paste', this.#onPaste, options);
-    this.#$input.addEventListener('compositionstart', this.#onCompositionStart, options);
-    this.#$input.addEventListener('compositionend', this.#onCompositionEnd, options);
-    this.#$input.addEventListener('focus', this.#onInputFocus, options);
-    this.#$input.addEventListener('blur', this.#onInputBlur, options);
-    this.#$input.addEventListener('wheel', this.#onWheel, options);
-    this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange, options);
-    this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, options);
-    this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange, options);
-    this.addEventListener('-change', this.#onChangeReactHandler, options);
-    this.addEventListener('-focus', this.#onFocusReactHandler, options);
-    this.addEventListener('-blur', this.#onBlurReactHandler, options);
-    this.addEventListener('-copy', this.#onCopyReactHandler, options);
-    this.addEventListener('-cut', this.#onCutReactHandler, options);
-    this.addEventListener('-paste', this.#onPasteReactHandler, options);
-    this.addEventListener('-wheel', this.#onWheelReactHandler, options);
+    this.#$input.addEventListener("keydown", this.#onKeyDown, options);
+    this.#$input.addEventListener("input", this.#onInput, options);
+    this.#$input.addEventListener("cut", this.#onCut, options);
+    this.#$input.addEventListener("copy", this.#onCopy, options);
+    this.#$input.addEventListener("paste", this.#onPaste, options);
+    this.#$input.addEventListener("compositionstart", this.#onCompositionStart, options);
+    this.#$input.addEventListener("compositionend", this.#onCompositionEnd, options);
+    this.#$input.addEventListener("focus", this.#onInputFocus, options);
+    this.#$input.addEventListener("blur", this.#onInputBlur, options);
+    this.#$input.addEventListener("wheel", this.#onWheel, options);
+    this.#$iconSlot.addEventListener("slotchange", this.#onIconSlotChange, options);
+    this.#$leftSlot.addEventListener("slotchange", this.#onLeftSlotChange, options);
+    this.#$rightSlot.addEventListener("slotchange", this.#onRightSlotChange, options);
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-focus", this.#onFocusReactHandler, options);
+    this.addEventListener("-blur", this.#onBlurReactHandler, options);
+    this.addEventListener("-copy", this.#onCopyReactHandler, options);
+    this.addEventListener("-cut", this.#onCutReactHandler, options);
+    this.addEventListener("-paste", this.#onPasteReactHandler, options);
+    this.addEventListener("-wheel", this.#onWheelReactHandler, options);
     this.#sizeContext.listen(this.#controller.signal);
-    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
+    subscribeContext(this, "size", this.#onContextSize, this.#controller.signal);
     this.#onIconSlotChange();
     this.#onLeftSlotChange();
     this.#onRightSlotChange();
@@ -90,20 +92,22 @@ export class Input extends NectaryElement {
     setFormValue(this.#internals, this.#$input.value);
   }
   formResetCallback() {
-    this.#$input.value = '';
-    setFormValue(this.#internals, '');
+    this.#$input.value = "";
+    setFormValue(this.#internals, "");
   }
   formStateRestoreCallback(state) {
-    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, 'data-form-state-restore') === false) {
+    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
       return;
     }
     if (state !== null) {
-      const value = typeof state === 'string' ? state : state.get(this.name);
-      this.#$input.value = value?.toString() ?? '';
-      setFormValue(this.#internals, value?.toString() ?? '');
+      const value = typeof state === "string" ? state : state.get(this.name);
+      this.#$input.value = value?.toString() ?? "";
+      setFormValue(this.#internals, value?.toString() ?? "");
     }
   }
-  #onKeyDown = e => {
+  // This handler mimicks the behavior (with some exceptions) of the implicit form submission logic from the HTML spec:
+  // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
+  #onKeyDown = (e) => {
     const form = this.#internals.form;
     if (form === null) {
       return;
@@ -111,190 +115,190 @@ export class Input extends NectaryElement {
     if (form.disabled === true) {
       return;
     }
-    if (e.key === 'Enter') {
-      const submitSelectors = ['sinch-button[form-type="submit"]'];
-      const formSubmitters = Array.from(form.querySelectorAll(submitSelectors.join(',')));
-      const formSubmitter = formSubmitters.find(submitter => !submitter.disabled) ?? null;
+    if (e.key === "Enter") {
+      const submitSelectors = [
+        'sinch-button[form-type="submit"]'
+      ];
+      const formSubmitters = Array.from(form.querySelectorAll(submitSelectors.join(",")));
+      const formSubmitter = formSubmitters.find((submitter) => !submitter.disabled) ?? null;
       if (formSubmitter !== null) {
         requestSubmitForm(form, formSubmitter);
       }
     }
   };
   static get observedAttributes() {
-    return ['name', 'type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'autofocus', 'data-size', 'aria-label'];
+    return [
+      "name",
+      "type",
+      "value",
+      "placeholder",
+      "mask",
+      "invalid",
+      "disabled",
+      "size",
+      "autocomplete",
+      "autofocus",
+      "data-size",
+      "aria-label"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'name':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
-          }
-          updateAttribute(this.#$input, 'name', newVal);
-          break;
-        }
-      case 'type':
-        {
-          updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
-          updateAttribute(this.#$input, 'spellcheck', newVal === 'password' ? 'false' : null);
-          break;
+      case "name": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
         }
-      case 'value':
-        {
-          const nextVal = newVal ?? '';
-          const prevVal = this.#$input.value;
-          if (this.#wasClearedByMask) {
-            this.#wasClearedByMask = false;
-            if (nextVal.length === 0) {
-              break;
-            }
-          }
-          if (this.#maskSymbols !== null) {
-            const {
-              value,
-              placeholder
-            } = splitValueAndMask(nextVal, this.#maskSymbols);
-            this.#$input.value = value;
-            setFormValue(this.#internals, value);
-            this.#$inputMask.textContent = placeholder;
-            if (isElementFocused(this.#$input)) {
-              this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
-            }
+        updateAttribute(this.#$input, "name", newVal);
+        break;
+      }
+      case "type": {
+        updateLiteralAttribute(this.#$input, inputTypes, "type", newVal);
+        updateAttribute(this.#$input, "spellcheck", newVal === "password" ? "false" : null);
+        break;
+      }
+      case "value": {
+        const nextVal = newVal ?? "";
+        const prevVal = this.#$input.value;
+        if (this.#wasClearedByMask) {
+          this.#wasClearedByMask = false;
+          if (nextVal.length === 0) {
             break;
           }
-          if (nextVal !== prevVal) {
-            this.#$input.value = nextVal;
-            setFormValue(this.#internals, nextVal);
-            if (isElementFocused(this.#$input)) {
-              this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
-            }
-          }
-          break;
-        }
-      case 'placeholder':
-        {
-          this.#updatePlaceholder();
-          break;
-        }
-      case 'mask':
-        {
-          this.#updateMask();
-          break;
-        }
-      case 'invalid':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
-          }
-          const isInvalid = isAttrTrue(newVal);
-          this.ariaInvalid = isInvalid.toString();
-          this.#$input.ariaInvalid = this.ariaInvalid;
-          this.#internals.ariaInvalid = this.ariaInvalid;
-          updateBooleanAttribute(this, name, isInvalid);
-          break;
         }
-      case 'disabled':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
+        if (this.#maskSymbols !== null) {
+          const { value, placeholder } = splitValueAndMask(nextVal, this.#maskSymbols);
+          this.#$input.value = value;
+          setFormValue(this.#internals, value);
+          this.#$inputMask.textContent = placeholder;
+          if (isElementFocused(this.#$input)) {
+            this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
           }
-          const isDisabled = isAttrTrue(newVal);
-          this.#$input.disabled = isDisabled;
-          updateBooleanAttribute(this, name, isDisabled);
           break;
         }
-      case 'autofocus':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
+        if (nextVal !== prevVal) {
+          this.#$input.value = nextVal;
+          setFormValue(this.#internals, nextVal);
+          if (isElementFocused(this.#$input)) {
+            this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
           }
-          const isAutofocus = isAttrTrue(newVal);
-          this.#$input.autofocus = isAutofocus;
-          updateBooleanAttribute(this, name, isAutofocus);
-          break;
-        }
-      case 'size':
-        {
-          updateAttribute(this, 'data-size', newVal);
-          break;
         }
-      case 'data-size':
-        {
-          this.#onSizeUpdate();
-          break;
+        break;
+      }
+      case "placeholder": {
+        this.#updatePlaceholder();
+        break;
+      }
+      case "mask": {
+        this.#updateMask();
+        break;
+      }
+      case "invalid": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
         }
-      case 'autocomplete':
-        {
-          updateAttribute(this.#$input, name, newVal);
-          break;
+        const isInvalid = isAttrTrue(newVal);
+        this.ariaInvalid = isInvalid.toString();
+        this.#$input.ariaInvalid = this.ariaInvalid;
+        this.#internals.ariaInvalid = this.ariaInvalid;
+        updateBooleanAttribute(this, name, isInvalid);
+        break;
+      }
+      case "disabled": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
         }
-      case 'aria-label':
-        {
-          this.#$input.ariaLabel = newVal;
-          this.#internals.ariaLabel = newVal;
-          break;
+        const isDisabled = isAttrTrue(newVal);
+        this.#$input.disabled = isDisabled;
+        updateBooleanAttribute(this, name, isDisabled);
+        break;
+      }
+      case "autofocus": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
         }
+        const isAutofocus = isAttrTrue(newVal);
+        this.#$input.autofocus = isAutofocus;
+        updateBooleanAttribute(this, name, isAutofocus);
+        break;
+      }
+      case "size": {
+        updateAttribute(this, "data-size", newVal);
+        break;
+      }
+      case "data-size": {
+        this.#onSizeUpdate();
+        break;
+      }
+      case "autocomplete": {
+        updateAttribute(this.#$input, name, newVal);
+        break;
+      }
+      case "aria-label": {
+        this.#$input.ariaLabel = newVal;
+        this.#internals.ariaLabel = newVal;
+        break;
+      }
     }
   }
   set name(value) {
-    updateAttribute(this, 'name', value);
+    updateAttribute(this, "name", value);
   }
   get name() {
-    return getAttribute(this, 'name', '');
+    return getAttribute(this, "name", "");
   }
   set type(value) {
-    updateAttribute(this, 'type', value);
+    updateAttribute(this, "type", value);
   }
   get type() {
-    return getLiteralAttribute(this, inputTypes, 'type', 'text');
+    return getLiteralAttribute(this, inputTypes, "type", "text");
   }
   set value(value) {
-    updateAttribute(this, 'value', value);
+    updateAttribute(this, "value", value);
   }
   get value() {
-    return getAttribute(this, 'value', '');
+    return getAttribute(this, "value", "");
   }
   set mask(value) {
-    updateAttribute(this, 'mask', value);
+    updateAttribute(this, "mask", value);
   }
   get mask() {
-    return getAttribute(this, 'mask');
+    return getAttribute(this, "mask");
   }
   set placeholder(value) {
-    updateAttribute(this, 'placeholder', value);
+    updateAttribute(this, "placeholder", value);
   }
   get placeholder() {
-    return getAttribute(this, 'placeholder');
+    return getAttribute(this, "placeholder");
   }
   set invalid(isInvalid) {
-    updateBooleanAttribute(this, 'invalid', isInvalid);
+    updateBooleanAttribute(this, "invalid", isInvalid);
   }
   get invalid() {
-    return getBooleanAttribute(this, 'invalid');
+    return getBooleanAttribute(this, "invalid");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set autofocus(isAutofocus) {
-    updateBooleanAttribute(this, 'autofocus', isAutofocus);
+    updateBooleanAttribute(this, "autofocus", isAutofocus);
   }
   get autofocus() {
-    return getBooleanAttribute(this, 'autofocus');
+    return getBooleanAttribute(this, "autofocus");
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeValues, 'size', size);
+    updateLiteralAttribute(this, sizeValues, "size", size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
   }
   set autocomplete(value) {
-    updateAttribute(this, 'autocomplete', value);
+    updateAttribute(this, "autocomplete", value);
   }
   get autocomplete() {
-    return getAttribute(this, 'autocomplete', '');
+    return getAttribute(this, "autocomplete", "");
   }
   get selectionStart() {
     return this.#$input.selectionStart;
@@ -327,7 +331,7 @@ export class Input extends NectaryElement {
     this.#$input.blur();
   }
   #setSelectionRange = (start, end, direction) => {
-    if (this.type !== 'number') {
+    if (this.type !== "number") {
       this.#$input.setSelectionRange(start, end, direction);
     }
   };
@@ -339,31 +343,23 @@ export class Input extends NectaryElement {
       if (selectionStart === this.#$input.value.length) {
         return;
       }
-      const {
-        value,
-        placeholder
-      } = beginMaskedComposition(this.#$input.value, this.#maskSymbols, selectionStart);
+      const { value, placeholder } = beginMaskedComposition(this.#$input.value, this.#maskSymbols, selectionStart);
       this.#$input.value = value;
       this.#setSelectionRange(selectionStart, selectionStart);
       this.#$inputMask.textContent = placeholder;
       this.#compositionBeginValue = value;
     }
   };
-  #onCompositionEnd = e => {
+  #onCompositionEnd = (e) => {
     this.#isCompositionInProgress = false;
     if (this.#maskSymbols !== null) {
       const value = this.#$input.value;
       const wasValueInserted = value.length !== this.#compositionBeginValue.length;
       const res = endMaskedComposition(value, e.data, this.#maskSymbols, this.#$input.selectionStart, wasValueInserted);
-      this.#compositionBeginValue = '';
+      this.#compositionBeginValue = "";
       if (res !== null) {
-        const {
-          value,
-          placeholder,
-          mergedValue,
-          cursorPos
-        } = res;
-        this.#$input.value = value;
+        const { value: value2, placeholder, mergedValue, cursorPos } = res;
+        this.#$input.value = value2;
         this.#setSelectionRange(cursorPos, cursorPos);
         this.#$inputMask.textContent = placeholder;
         if (mergedValue.length > 0) {
@@ -379,7 +375,7 @@ export class Input extends NectaryElement {
       this.#onInput();
     }
   };
-  #onMaskBeforeInput = e => {
+  #onMaskBeforeInput = (e) => {
     this.#handleMaskBeforeInput(e.inputType, e.data);
     e.preventDefault();
   };
@@ -388,36 +384,27 @@ export class Input extends NectaryElement {
     const selectionEnd = this.#$input.selectionEnd ?? 0;
     let res = null;
     switch (inputType) {
-      case 'insertText':
-        {
-          res = insertText(this.#$input.value, data, this.#maskSymbols, selectionStart, selectionEnd);
-          break;
-        }
-      case 'insertFromPaste':
-        {
-          res = insertFromPaste(this.#$input.value, data, this.#maskSymbols, selectionStart, selectionEnd);
-          break;
-        }
-      case 'deleteByCut':
-      case 'deleteContent':
-      case 'deleteContentBackward':
-        {
-          res = deleteContentBackward(this.#$input.value, this.#maskSymbols, selectionStart, selectionEnd);
-          break;
-        }
-      case 'deleteContentForward':
-        {
-          res = deleteContentForward(this.#$input.value, this.#maskSymbols, selectionStart, selectionEnd);
-          break;
-        }
+      case "insertText": {
+        res = insertText(this.#$input.value, data, this.#maskSymbols, selectionStart, selectionEnd);
+        break;
+      }
+      case "insertFromPaste": {
+        res = insertFromPaste(this.#$input.value, data, this.#maskSymbols, selectionStart, selectionEnd);
+        break;
+      }
+      case "deleteByCut":
+      case "deleteContent":
+      case "deleteContentBackward": {
+        res = deleteContentBackward(this.#$input.value, this.#maskSymbols, selectionStart, selectionEnd);
+        break;
+      }
+      case "deleteContentForward": {
+        res = deleteContentForward(this.#$input.value, this.#maskSymbols, selectionStart, selectionEnd);
+        break;
+      }
     }
     if (res !== null) {
-      const {
-        value,
-        placeholder,
-        mergedValue,
-        cursorPos
-      } = res;
+      const { value, placeholder, mergedValue, cursorPos } = res;
       this.#$input.value = value;
       this.#setSelectionRange(cursorPos, cursorPos);
       this.#$inputMask.textContent = placeholder;
@@ -435,29 +422,27 @@ export class Input extends NectaryElement {
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
     switch (inputType) {
-      case 'insertFromPaste':
-        {
-          if (data === null) {
-            return;
-          }
-          const value = this.value;
-          const cursorPos = selectionStart + data.length;
-          const nextValue = value.substring(0, selectionStart) + data + value.substring(selectionEnd);
-          this.#selectionStart = cursorPos;
-          this.#selectionEnd = cursorPos;
-          this.#dispatchChangeEvent(nextValue);
-          break;
-        }
-      case 'deleteByCut':
-        {
-          const value = this.value;
-          const cursorPos = selectionStart;
-          const nextValue = value.substring(0, selectionStart) + value.substring(selectionEnd);
-          this.#selectionStart = cursorPos;
-          this.#selectionEnd = cursorPos;
-          this.#dispatchChangeEvent(nextValue);
-          break;
+      case "insertFromPaste": {
+        if (data === null) {
+          return;
         }
+        const value = this.value;
+        const cursorPos = selectionStart + data.length;
+        const nextValue = value.substring(0, selectionStart) + data + value.substring(selectionEnd);
+        this.#selectionStart = cursorPos;
+        this.#selectionEnd = cursorPos;
+        this.#dispatchChangeEvent(nextValue);
+        break;
+      }
+      case "deleteByCut": {
+        const value = this.value;
+        const cursorPos = selectionStart;
+        const nextValue = value.substring(0, selectionStart) + value.substring(selectionEnd);
+        this.#selectionStart = cursorPos;
+        this.#selectionEnd = cursorPos;
+        this.#dispatchChangeEvent(nextValue);
+        break;
+      }
     }
   }
   #onInput = () => {
@@ -473,7 +458,7 @@ export class Input extends NectaryElement {
     if (prevValue !== nextValue) {
       const nextSelectionStart = this.#$input.selectionStart;
       const nextSelectionEnd = this.#$input.selectionEnd;
-      if (this.hasAttribute('value')) {
+      if (this.hasAttribute("value") === true) {
         this.#$input.value = prevValue;
         this.#setSelectionRange(this.#selectionStart, this.#selectionEnd);
       }
@@ -483,17 +468,14 @@ export class Input extends NectaryElement {
     }
   };
   #onWheel = () => {
-    this.dispatchEvent(new CustomEvent('-wheel'));
+    this.dispatchEvent(
+      new CustomEvent("-wheel")
+    );
   };
   #onMaskInputAutofillChange = () => {
     const nextVal = this.#$input.value;
     if (this.#maskSymbols !== null) {
-      const {
-        value,
-        placeholder,
-        mergedValue,
-        cursorPos
-      } = splitValueAndMask(nextVal, this.#maskSymbols);
+      const { value, placeholder, mergedValue, cursorPos } = splitValueAndMask(nextVal, this.#maskSymbols);
       this.#$input.value = value;
       this.#setSelectionRange(cursorPos, cursorPos);
       this.#$inputMask.textContent = placeholder;
@@ -506,7 +488,7 @@ export class Input extends NectaryElement {
       }
     }
   };
-  #onCopy = e => {
+  #onCopy = (e) => {
     const value = this.#$input.value;
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
@@ -515,14 +497,14 @@ export class Input extends NectaryElement {
     }
     const copiedValue = this.#maskSymbols === null ? value.substring(selectionStart, selectionEnd) : getMergedValueSliced(value, this.#maskSymbols, selectionStart, selectionEnd);
     let replacedValue = null;
-    const replaceWith = value => {
-      replacedValue = value ?? null;
+    const replaceWith = (value2) => {
+      replacedValue = value2 ?? null;
     };
     if (this.#maskSymbols !== null) {
       e.preventDefault();
-      e.clipboardData.setData('text/plain', copiedValue);
+      e.clipboardData.setData("text/plain", copiedValue);
     }
-    const event = new CustomEvent('-copy', {
+    const event = new CustomEvent("-copy", {
       detail: {
         value: copiedValue,
         replaceWith
@@ -534,10 +516,10 @@ export class Input extends NectaryElement {
       e.preventDefault();
     }
     if (replacedValue !== null) {
-      e.clipboardData.setData('text/plain', replacedValue);
+      e.clipboardData.setData("text/plain", replacedValue);
     }
   };
-  #onCut = e => {
+  #onCut = (e) => {
     const value = this.#$input.value;
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
@@ -546,14 +528,14 @@ export class Input extends NectaryElement {
     }
     const copiedValue = this.#maskSymbols === null ? value.substring(selectionStart, selectionEnd) : getMergedValueSliced(value, this.#maskSymbols, selectionStart, selectionEnd);
     let replacedValue = null;
-    const replaceWith = value => {
-      replacedValue = value ?? null;
+    const replaceWith = (value2) => {
+      replacedValue = value2 ?? null;
     };
     if (this.#maskSymbols !== null) {
       e.preventDefault();
-      e.clipboardData.setData('text/plain', copiedValue);
+      e.clipboardData.setData("text/plain", copiedValue);
     }
-    const event = new CustomEvent('-cut', {
+    const event = new CustomEvent("-cut", {
       detail: {
         value: copiedValue,
         replaceWith
@@ -565,21 +547,21 @@ export class Input extends NectaryElement {
       e.preventDefault();
     }
     if (replacedValue !== null) {
-      e.clipboardData.setData('text/plain', replacedValue);
+      e.clipboardData.setData("text/plain", replacedValue);
       if (this.#maskSymbols !== null) {
-        this.#handleMaskBeforeInput('deleteByCut', null);
+        this.#handleMaskBeforeInput("deleteByCut", null);
       } else {
-        this.#handleBeforeInput('deleteByCut', null);
+        this.#handleBeforeInput("deleteByCut", null);
       }
     }
   };
-  #onPaste = e => {
-    const pasteValue = e.clipboardData?.getData('text/plain') ?? '';
-    let replacedValue = '';
-    const replaceWith = value => {
-      replacedValue = value ?? '';
+  #onPaste = (e) => {
+    const pasteValue = e.clipboardData?.getData("text/plain") ?? "";
+    let replacedValue = "";
+    const replaceWith = (value) => {
+      replacedValue = value ?? "";
     };
-    const event = new CustomEvent('-paste', {
+    const event = new CustomEvent("-paste", {
       detail: {
         value: pasteValue,
         replaceWith
@@ -595,120 +577,116 @@ export class Input extends NectaryElement {
     }
     e.preventDefault();
     if (this.#maskSymbols !== null) {
-      this.#handleMaskBeforeInput('insertFromPaste', replacedValue);
+      this.#handleMaskBeforeInput("insertFromPaste", replacedValue);
     } else {
-      this.#handleBeforeInput('insertFromPaste', replacedValue);
+      this.#handleBeforeInput("insertFromPaste", replacedValue);
     }
   };
   #dispatchMaskClearChangeEvent() {
     this.#wasClearedByMask = true;
-    this.#dispatchChangeEvent('');
+    this.#dispatchChangeEvent("");
   }
   #dispatchChangeEvent(value) {
     if (value === this.value) {
       return;
     }
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: value
-    }));
+    this.dispatchEvent(
+      new CustomEvent("-change", {
+        detail: value
+      })
+    );
   }
-  #onContextSize = e => {
-    if (this.hasAttribute('size')) {
+  #onContextSize = (e) => {
+    if (this.hasAttribute("size") === true) {
       return;
     }
     switch (e.detail) {
-      case 'l':
-        {
-          this.setAttribute('data-size', 'm');
-          break;
-        }
-      default:
-        {
-          this.setAttribute('data-size', 's');
-        }
+      case "l": {
+        this.setAttribute("data-size", "m");
+        break;
+      }
+      default: {
+        this.setAttribute("data-size", "s");
+      }
     }
   };
   #updateMask() {
     if (this.mask !== null) {
       if (this.#maskSymbols === null) {
-        this.#$input.addEventListener('beforeinput', this.#onMaskBeforeInput, {
-          signal: this.#controller.signal
-        });
-        this.#$input.addEventListener('change', this.#onMaskInputAutofillChange, {
-          signal: this.#controller.signal
-        });
+        this.#$input.addEventListener("beforeinput", this.#onMaskBeforeInput, { signal: this.#controller.signal });
+        this.#$input.addEventListener("change", this.#onMaskInputAutofillChange, { signal: this.#controller.signal });
       }
       this.#maskSymbols = getMaskSymbols(this.mask);
-      const {
-        value,
-        placeholder
-      } = splitValueAndMask(this.#$input.value, this.#maskSymbols);
+      const { value, placeholder } = splitValueAndMask(this.#$input.value, this.#maskSymbols);
       this.#$input.value = value;
       this.#$inputMask.textContent = placeholder;
     } else {
       this.#maskSymbols = null;
-      this.#$input.removeEventListener('beforeinput', this.#onMaskBeforeInput);
-      this.#$input.removeEventListener('change', this.#onMaskInputAutofillChange);
+      this.#$input.removeEventListener("beforeinput", this.#onMaskBeforeInput);
+      this.#$input.removeEventListener("change", this.#onMaskInputAutofillChange);
     }
     this.#updatePlaceholder();
   }
   #updatePlaceholder() {
     if (this.#maskSymbols === null) {
       const value = this.placeholder;
-      this.#$input.placeholder = value ?? '';
-      this.#internals.ariaPlaceholder = value ?? '';
-      updateAttribute(this, 'aria-placeholder', value);
+      this.#$input.placeholder = value ?? "";
+      this.#internals.ariaPlaceholder = value ?? "";
+      updateAttribute(this, "aria-placeholder", value);
     } else {
-      updateAttribute(this, 'aria-placeholder', null);
-      this.#$input.placeholder = '';
-      this.#internals.ariaPlaceholder = '';
+      updateAttribute(this, "aria-placeholder", null);
+      this.#$input.placeholder = "";
+      this.#internals.ariaPlaceholder = "";
     }
   }
   #onIconSlotChange = () => {
     const isEmpty = this.#$iconSlot.assignedElements().length === 0;
-    setClass(this.#$iconWrapper, 'empty', isEmpty);
+    setClass(this.#$iconWrapper, "empty", isEmpty);
   };
   #onLeftSlotChange = () => {
     const isEmpty = this.#$leftSlot.assignedElements().length === 0;
-    setClass(this.#$leftWrapper, 'empty', isEmpty);
+    setClass(this.#$leftWrapper, "empty", isEmpty);
   };
   #onRightSlotChange = () => {
     const isEmpty = this.#$rightSlot.assignedElements().length === 0;
-    setClass(this.#$rightWrapper, 'empty', isEmpty);
+    setClass(this.#$rightWrapper, "empty", isEmpty);
   };
   #onInputFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(new CustomEvent("-focus"));
   };
   #onInputBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    this.dispatchEvent(new CustomEvent("-blur"));
   };
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
     }
-    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    const size = this.getAttribute("data-size") ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
-  #onCopyReactHandler = e => {
-    getReactEventHandler(this, 'on-copy')?.(e);
+  #onCopyReactHandler = (e) => {
+    getReactEventHandler(this, "on-copy")?.(e);
   };
-  #onCutReactHandler = e => {
-    getReactEventHandler(this, 'on-cut')?.(e);
+  #onCutReactHandler = (e) => {
+    getReactEventHandler(this, "on-cut")?.(e);
   };
-  #onPasteReactHandler = e => {
-    getReactEventHandler(this, 'on-paste')?.(e);
+  #onPasteReactHandler = (e) => {
+    getReactEventHandler(this, "on-paste")?.(e);
   };
-  #onWheelReactHandler = e => {
-    getReactEventHandler(this, 'on-wheel')?.(e);
+  #onWheelReactHandler = (e) => {
+    getReactEventHandler(this, "on-wheel")?.(e);
   };
 }
-defineCustomElement('sinch-input', Input);
+defineCustomElement("sinch-input", Input);
+export {
+  Input
+};