npm - @felleslosninger/minid-elements - Versions diffs - 0.1.5 → 0.1.7 - Mend

@felleslosninger/minid-elements 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/components/checkbox.component.d.ts +8 -0
package/dist/components/checkbox.component.d.ts.map +1 -1
package/dist/components/checkbox.js +49 -3
package/dist/components/checkbox.js.map +1 -1
package/dist/components/code-input.component.d.ts +25 -0
package/dist/components/code-input.component.d.ts.map +1 -1
package/dist/components/code-input.js +188 -26
package/dist/components/code-input.js.map +1 -1
package/dist/components/textfield.component.d.ts +2 -0
package/dist/components/textfield.component.d.ts.map +1 -1
package/dist/components/textfield.js +165 -44
package/dist/components/textfield.js.map +1 -1
package/dist/mixins/form-control.mixin.d.ts.map +1 -1
package/dist/mixins/form-control.mixin.js +19 -0
package/dist/mixins/form-control.mixin.js.map +1 -1
package/dist/types/form-control.d.ts +1 -0
package/dist/types/form-control.d.ts.map +1 -1
package/package.json +1 -1

package/dist/components/code-input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { css, LitElement, html } from "lit";
+import { css, LitElement, nothing, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -35,7 +35,32 @@ const styles = [
       font-weight: 500;
     }
-    .code-input-label--hidden {
+    .code-input-label--with-description {
+      margin-block-end: 0.25rem;
+    }
+    .code-input-label--sm {
+      font-size: var(--ds-body-sm-font-size, 1rem);
+      line-height: var(--ds-body-md-line-height, 1.5);
+    }
+    .code-input-label--md {
+      font-size: var(--ds-body-md-font-size, 1.125rem);
+      line-height: var(--ds-body-md-line-height, 1.5);
+    }
+    .code-input-label--lg {
+      font-size: var(--ds-body-lg-font-size, 1.3125rem);
+      line-height: var(--ds-body-md-line-height, 1.5);
+    }
+    .code-input-description {
+      margin-block-end: 0.5rem;
+      color: var(--ds-color-neutral-text-subtle, #545e6b);
+    }
+    .code-input-label--hidden,
+    .code-input-description--hidden {
       position: absolute;
       width: 1px;
       height: 1px;
@@ -48,6 +73,7 @@ const styles = [
     }
     .code-input-label--disabled,
+    .code-input-description--disabled,
     .input-wrapper--disabled {
       opacity: var(--ds-opacity-disabled, 0.38);
     }
@@ -215,27 +241,25 @@ const styles = [
       animation: blink 1s step-end infinite;
     }
+    .character-box--caret-leading::after {
+      inset-inline-start: 0;
+    }
     /* Hide placeholder circle when the caret is at this position */
     .character-box--caret.character-box--empty {
       color: transparent;
     }
-    /* Hide increment/decrement buttons on number inputs */
-    input[type='number']::-webkit-outer-spin-button,
-    input[type='number']::-webkit-inner-spin-button,
-    input[type='number'] {
-      -webkit-appearance: none;
-      margin: 0;
-      -moz-appearance: textfield !important;
-    }
     .validation-message {
       display: flex;
       gap: 0.25rem;
-      margin-block-start: 0.5rem;
       color: var(--ds-color-danger-text-subtle, #a22e2e);
     }
+    .validation-message--visible {
+      margin-block-start: 0.5rem;
+    }
     .validation-icon {
       margin-block-start: 0.25rem;
       min-width: 1.25rem;
@@ -248,11 +272,17 @@ let MinidCodeInput = class extends FormControlMixin(
 ) {
   constructor() {
     super(...arguments);
-    this.hasSlotControler = new HasSlotController(this, "label");
+    this.hasSlotControler = new HasSlotController(
+      this,
+      "label",
+      "description"
+    );
     this.labelId = `mid-code-input-label-${nextUniqueId++}`;
+    this.descriptionId = `mid-code-input-description-${nextUniqueId++}`;
     this.validationId = `mid-code-input-validation-${nextUniqueId++}`;
     this.value = "";
     this.label = "";
+    this.description = "";
     this.type = "text";
     this.inputmode = "numeric";
     this.size = "sm";
@@ -261,8 +291,16 @@ let MinidCodeInput = class extends FormControlMixin(
     this.autofocus = false;
     this.invalidmessage = "";
     this.hidelabel = false;
+    this.hidedescription = false;
     this.required = false;
     this.isFocused = false;
+    this.caretPosition = 0;
+    this.lastFormValue = null;
+    this.handleSelectionChange = () => {
+      if (this.isFocused) {
+        this.syncCaretPosition();
+      }
+    };
   }
   static get formControlValidators() {
     return [
@@ -278,6 +316,20 @@ let MinidCodeInput = class extends FormControlMixin(
   firstUpdated(_changedProperties) {
     webOtpApiInit(this.renderRoot);
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.ownerDocument.addEventListener(
+      "selectionchange",
+      this.handleSelectionChange
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.ownerDocument.removeEventListener(
+      "selectionchange",
+      this.handleSelectionChange
+    );
+  }
   handleBoxClick(index) {
     if (this.disabled) {
       return;
@@ -285,32 +337,70 @@ let MinidCodeInput = class extends FormControlMixin(
     this.value = this.value.substring(0, index);
     this.focus();
   }
+  syncCaretPosition() {
+    const input = this.inputElement;
+    if (!input) {
+      return;
+    }
+    this.caretPosition = (input.selectionDirection === "backward" ? input.selectionStart : input.selectionEnd) ?? this.value.length;
+  }
   handleFocus() {
     this.isFocused = true;
     if (this.value.length > 0) {
       const length = this.value.length;
       this.inputElement.setSelectionRange(length, length);
     }
+    this.syncCaretPosition();
   }
   handleBlur() {
     this.isFocused = false;
   }
+  filterValue(value) {
+    return this.type === "number" ? value.replace(/\D/g, "") : value;
+  }
   handleBeforeInput(e) {
-    if (e.inputType === "insertText" && e.data) {
-      if (this.type == "number" && e.data.replace(/\D/g, "") == "") {
+    if (this.type === "number" && e.inputType === "insertText" && e.data) {
+      if (!/\d/.test(e.data)) {
         e.preventDefault();
       }
     }
   }
+  handlePaste(event) {
+    if (this.type !== "number") {
+      return;
+    }
+    const pasted = event.clipboardData?.getData("text") ?? "";
+    const digits = this.filterValue(pasted);
+    if (digits === pasted) {
+      return;
+    }
+    event.preventDefault();
+    const input = this.inputElement;
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? start;
+    const next = (input.value.slice(0, start) + digits + input.value.slice(end)).substring(0, this.length);
+    if (next === input.value) {
+      return;
+    }
+    input.value = next;
+    input.dispatchEvent(
+      new InputEvent("input", { bubbles: true, composed: true })
+    );
+    const caret = Math.min(start + digits.length, input.value.length);
+    input.setSelectionRange(caret, caret);
+    this.syncCaretPosition();
+  }
   handleInput(event) {
     const input = event.target;
-    let value = input.value;
+    let value = this.filterValue(input.value);
     value = value.substring(0, this.length);
     if (input.value !== value) {
       input.value = value;
     }
+    this.syncCaretPosition();
     if (this.value !== value) {
       this.value = value;
+      this.lastFormValue = value;
       this.setValue(value);
     }
     this.inputElement.dispatchEvent(
@@ -342,46 +432,96 @@ let MinidCodeInput = class extends FormControlMixin(
   }
   clear() {
     this.value = "";
+    this.lastFormValue = "";
     this.setValue("");
     this.invalidmessage = "";
+    this.caretPosition = 0;
   }
   resetFormControl() {
     this.clear();
   }
   focus(options) {
-    this.inputElement?.focus(options);
+    if (!this.inputElement) {
+      this.updateComplete.then(() => {
+        if (this.isConnected) {
+          this.focusInput(options);
+        }
+      });
+      return;
+    }
+    this.focusInput(options);
+  }
+  focusInput(options) {
+    if (!this.inputElement) {
+      return;
+    }
+    this.inputElement.focus(options);
     if (this.value.length > 0) {
       const length = this.value.length;
       this.inputElement.setSelectionRange(length, length);
     }
+    this.syncCaretPosition();
   }
   handleLengthChange() {
     if (this.value.length > this.length) {
       this.value = this.value.substring(0, this.length);
     }
   }
+  handleValueChange() {
+    const filtered = this.filterValue(this.value);
+    if (filtered !== this.value) {
+      this.value = filtered;
+    }
+    this.caretPosition = Math.min(this.caretPosition, this.value.length);
+    if (filtered !== this.lastFormValue) {
+      this.lastFormValue = filtered;
+      this.syncFormValue(filtered);
+    }
+  }
   render() {
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
-    const describedBy = this.invalidmessage ? this.validationId : void 0;
+    const hasDescriptionSlot = this.hasSlotControler.test("description");
+    const hasDescription = !!this.description || !!hasDescriptionSlot;
+    const describedBy = [
+      hasDescription ? this.descriptionId : void 0,
+      this.invalidmessage ? this.validationId : void 0
+    ].filter(Boolean).join(" ") || void 0;
     const chars = this.value.split("");
     const displayValues = Array.from(
       { length: this.length },
       (_, i) => chars[i] || ""
     );
-    const isComplete = this.value.length >= this.length;
-    const caretIndex = this.disabled || this.length === 0 ? -1 : Math.min(this.value.length, this.length - 1);
+    const caretIndex = this.disabled || this.length === 0 ? -1 : Math.min(this.caretPosition, this.length - 1);
+    const caretIsInABox = this.caretPosition < this.length;
     return html`
       <label
         id="${this.labelId}"
         for="mid-code-input-hidden"
         class="code-input-label ${classMap({
+      "code-input-label--sm": this.labelsize === "sm",
+      "code-input-label--md": this.labelsize === "md",
+      "code-input-label--lg": this.labelsize === "lg",
       "code-input-label--hidden": this.hidelabel || !hasLabel,
+      "code-input-label--with-description": hasDescription,
       "code-input-label--disabled": this.disabled
     })}"
       >
         <slot name="label"> ${this.label} </slot>
       </label>
+      ${hasDescription ? html`
+            <div
+              id="${this.descriptionId}"
+              part="description"
+              aria-hidden="true"
+              class="code-input-description ${classMap({
+      "code-input-description--hidden": this.hidedescription,
+      "code-input-description--disabled": this.disabled
+    })}"
+            >
+              <slot name="description"> ${this.description} </slot>
+            </div>
+          ` : nothing}
       <div
         part="input-container"
         class="input-wrapper ${classMap({
@@ -395,7 +535,7 @@ let MinidCodeInput = class extends FormControlMixin(
         <div part="character-boxes" class="character-boxes" aria-hidden="true">
           ${displayValues.map((char, index) => {
       const isFocusTarget = this.isFocused && index === caretIndex;
-      const hasCaret = isFocusTarget && !isComplete;
+      const hasCaret = isFocusTarget && caretIsInABox;
       return html`
               <div
                 part="character-box"
@@ -403,6 +543,7 @@ let MinidCodeInput = class extends FormControlMixin(
                 class="character-box ${classMap({
         "character-box--invalid": !!this.invalidmessage,
         "character-box--caret": hasCaret,
+        "character-box--caret-leading": hasCaret && !!char,
         "character-box--empty": !char,
         "focus-ring-sm": isFocusTarget
       })}"
@@ -420,7 +561,7 @@ let MinidCodeInput = class extends FormControlMixin(
           class="hidden-input"
           .value="${live(this.value)}"
           id="mid-code-input-hidden"
-          type="${this.type}"
+          type="text"
           aria-labelledby="${this.labelId}"
           aria-describedby=${ifDefined(describedBy)}
           aria-invalid=${this.invalidmessage ? "true" : "false"}
@@ -435,6 +576,7 @@ let MinidCodeInput = class extends FormControlMixin(
           inputmode="${this.inputmode}"
           autocomplete="one-time-code"
           @beforeinput="${this.handleBeforeInput}"
+          @paste="${this.handlePaste}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           @keydown="${this.handleKeydown}"
@@ -443,13 +585,18 @@ let MinidCodeInput = class extends FormControlMixin(
         />
       </div>
       <div
-        class="validation-message"
+        class="validation-message ${classMap({
+      "validation-message--visible": !!this.invalidmessage
+    })}"
+        part="validation-message"
         id="${this.validationId}"
         aria-live="polite"
-        ?hidden=${!this.invalidmessage}
       >
-        <mid-icon name="xmark-octagon-fill" class="validation-icon"></mid-icon>
-        ${this.invalidmessage}
+        ${this.invalidmessage ? html`<mid-icon
+                name="xmark-octagon-fill"
+                class="validation-icon"
+              ></mid-icon>
+              ${this.invalidmessage}` : nothing}
       </div>
     `;
   }
@@ -463,6 +610,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], MinidCodeInput.prototype, "label", 2);
+__decorateClass([
+  property()
+], MinidCodeInput.prototype, "description", 2);
 __decorateClass([
   property()
 ], MinidCodeInput.prototype, "type", 2);
@@ -472,6 +622,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], MinidCodeInput.prototype, "size", 2);
+__decorateClass([
+  property()
+], MinidCodeInput.prototype, "labelsize", 2);
 __decorateClass([
   property({ type: Number })
 ], MinidCodeInput.prototype, "length", 2);
@@ -490,6 +643,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], MinidCodeInput.prototype, "hidelabel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidCodeInput.prototype, "hidedescription", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidCodeInput.prototype, "required", 2);
@@ -499,9 +655,15 @@ __decorateClass([
 __decorateClass([
   state()
 ], MinidCodeInput.prototype, "isFocused", 2);
+__decorateClass([
+  state()
+], MinidCodeInput.prototype, "caretPosition", 2);
 __decorateClass([
   watch("length")
 ], MinidCodeInput.prototype, "handleLengthChange", 1);
+__decorateClass([
+  watch(["value", "type"])
+], MinidCodeInput.prototype, "handleValueChange", 1);
 MinidCodeInput = __decorateClass([
   customElement("mid-code-input")
 ], MinidCodeInput);

package/dist/components/code-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n maxLengthValidator,\n minLengthValidator,\n patternValidator,\n requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-code-input': MinidCodeInput;\n }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n css`\n :host {\n display: block;\n }\n\n .code-input-label {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n margin-block-end: 0.5rem;\n font-weight: 500;\n }\n\n .code-input-label--hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .code-input-label--disabled,\n .input-wrapper--disabled {\n opacity: var(--ds-opacity-disabled, 0.38);\n }\n\n .input-wrapper {\n position: relative;\n cursor: text;\n width: fit-content;\n font-size: 1rem;\n line-height: 1.3;\n font-weight: 500;\n }\n\n .input-wrapper--sm {\n font-size: var(--ds-heading-sm-font-size, 1.125rem);\n line-height: var(--ds-heading-sm-line-height, 1.3);\n font-weight: var(--ds-heading-sm-font-weight, 500);\n }\n\n .input-wrapper--md {\n font-size: var(--ds-heading-md-font-size, 1.25rem);\n line-height: var(--ds-heading-md-line-height, 1.3);\n font-weight: var(--ds-heading-md-font-weight, 500);\n }\n\n .input-wrapper--lg {\n font-size: var(--ds-heading-lg-font-size, 1.5rem);\n line-height: var(--ds-heading-lg-line-height, 1.3);\n font-weight: var(--ds-heading-lg-font-weight, 500);\n }\n\n .input-wrapper--disabled {\n cursor: not-allowed;\n }\n\n .character-boxes {\n display: inline-flex;\n gap: var(--mid-code-input-gap, 0.5rem);\n }\n\n .character-box {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n width: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));\n height: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));\n padding-inline: 0.25rem;\n user-select: none;\n text-align: center;\n font-family:\n ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;\n line-height: 1;\n border: var(--ds-border-width-default, 1px) solid\n var(\n --mid-code-input-border-color,\n var(--ds-color-neutral-border-default, #717a84)\n );\n border-radius: var(\n --mid-code-input-border-radius,\n var(--ds-border-radius-md, 0.25rem)\n );\n background-color: var(\n --mid-code-input-background,\n var(--ds-color-neutral-background-default, #ffffff)\n );\n color: var(--mid-code-input-text-color, inherit);\n }\n\n .character-box--empty {\n color: var(\n --mid-code-input-placeholder-color,\n var(--ds-color-neutral-surface-active, #c7cacf)\n );\n }\n\n .character-box--empty::before {\n content: '';\n box-sizing: border-box;\n width: 0.55em;\n height: 0.55em;\n border: 2px solid currentColor;\n border-radius: 50%;\n }\n\n .character-box--invalid {\n border-width: 2px;\n border-color: var(\n --mid-code-input-danger-border-color,\n var(--ds-color-danger-border-default, #ce4d4d)\n );\n background-color: var(\n --mid-code-input-danger-background,\n var(--ds-color-danger-surface-tinted, #f8e4e4)\n );\n }\n\n .character-box--invalid.character-box--empty {\n color: var(\n --mid-code-input-danger-placeholder-color,\n var(--ds-color-danger-surface-active, #edbfbf)\n );\n }\n\n .focus-ring-sm {\n outline: 2px solid var(--ds-color-focus-outer, #1f2c3d);\n outline-offset: 2px;\n box-shadow: 0 0 0 2px var(--ds-color-focus-inner, #ffffff);\n }\n\n /* Ensure hidden attribute always hides elements even when Tailwind's\n @layer base [hidden] rule is not available in the shadow DOM /\n [hidden] {\n display: none !important;\n }\n\n .hidden-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n background: transparent;\n border: none;\n outline: none;\n color: transparent;\n caret-color: transparent;\n font-size: 16px; / Minimum 16px prevents iOS zoom on focus /\n pointer-events: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .hidden-input:focus {\n outline: none;\n }\n\n .hidden-input:disabled {\n cursor: not-allowed;\n }\n\n @keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n .character-box--caret::after {\n content: '';\n position: absolute;\n width: 2px;\n height: 60%;\n background-color: var(\n --color-accent-base,\n var(--ds-color-accent-base-default, blue)\n );\n animation: blink 1s step-end infinite;\n }\n\n / Hide placeholder circle when the caret is at this position /\n .character-box--caret.character-box--empty {\n color: transparent;\n }\n\n / Hide increment/decrement buttons on number inputs /\n input[type='number']::-webkit-outer-spin-button,\n input[type='number']::-webkit-inner-spin-button,\n input[type='number'] {\n -webkit-appearance: none;\n margin: 0;\n -moz-appearance: textfield !important;\n }\n\n .validation-message {\n display: flex;\n gap: 0.25rem;\n margin-block-start: 0.5rem;\n color: var(--ds-color-danger-text-subtle, #a22e2e);\n }\n\n .validation-icon {\n margin-block-start: 0.25rem;\n min-width: 1.25rem;\n min-height: 1.25rem;\n }\n `,\n];\n\n/\n \n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-complete - Emitted when all characters have been entered.\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n \n @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n \n @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n * @csspart character-boxes - The container for the visual character boxes.\n * @csspart character-box - An individual character box.\n \n @method focus - Focuses the input element\n * @method clear - Clears the input\n /\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n styled(LitElement, styles)\n) {\n private readonly hasSlotControler = new HasSlotController(this, 'label');\n private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n private readonly validationId = `mid-code-input-validation-${nextUniqueId++}`;\n\n @query('.hidden-input')\n private inputElement!: HTMLInputElement;\n\n @property({ reflect: true })\n value = '';\n\n @property()\n label = '';\n\n @property()\n type: 'number' \| 'text' = 'text';\n\n /\n For displaying appropriate virtual keyboard\n /\n @property()\n inputmode: 'numeric' \| 'text' = 'numeric';\n\n /\n Adjusts the font-size of the code inputs\n /\n @property()\n size: 'sm' \| 'md' \| 'lg' = 'sm';\n\n /\n Number of input characters or digits\n /\n @property({ type: Number })\n length = 5;\n\n @property({ type: Boolean })\n disabled = false;\n\n /\n Focuses the first input element on page load\n /\n @property({ type: Boolean })\n autofocus = false;\n\n /\n The minimum length of input that will be considered valid.\n /\n @property({ type: Number })\n minlength?: number;\n\n /\n Error message to display when the input is invalid, also activates invalid styling\n /\n @property()\n invalidmessage = '';\n\n /\n Visually hides `label` (still available for screen readers)\n /\n @property({ type: Boolean })\n hidelabel = false;\n\n /\n Makes the input required\n /\n @property({ type: Boolean })\n required = false;\n\n /\n A regular expression pattern to validate input against.\n /\n @property()\n pattern?: string;\n\n @state()\n private isFocused = false;\n\n static get formControlValidators() {\n return [\n requiredValidator,\n maxLengthValidator,\n minLengthValidator,\n patternValidator,\n ];\n }\n\n get validationTarget() {\n return this.inputElement;\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n webOtpApiInit(this.renderRoot);\n }\n\n private handleBoxClick(index: number) {\n if (this.disabled) {\n return;\n }\n\n // Truncate the value to the clicked position\n this.value = this.value.substring(0, index);\n\n // Focus the input to move the caret\n this.focus();\n }\n\n private handleFocus() {\n this.isFocused = true;\n / don't select text, move caret to the end /\n if (this.value.length > 0) {\n const length = this.value.length;\n this.inputElement.setSelectionRange(length, length);\n }\n }\n\n private handleBlur() {\n this.isFocused = false;\n }\n\n private handleBeforeInput(e: InputEvent) {\n if (e.inputType === 'insertText' && e.data) {\n if (this.type == 'number' && e.data.replace(/\\D/g, '') == '') {\n e.preventDefault();\n }\n }\n }\n\n private handleInput(event: InputEvent) {\n const input = event.target as HTMLInputElement;\n let value = input.value;\n\n value = value.substring(0, this.length);\n\n if (input.value !== value) {\n input.value = value;\n }\n\n // Update the component's public `value` property if it has changed.\n if (this.value !== value) {\n this.value = value;\n this.setValue(value);\n }\n\n this.inputElement.dispatchEvent(\n new Event('mid-input', { bubbles: true, composed: true })\n );\n\n if (this.value.length === this.length && this.value.length > 0) {\n this.inputElement.dispatchEvent(\n new Event('mid-complete', { bubbles: true, composed: true })\n );\n }\n }\n\n private handleChange() {\n this.inputElement.dispatchEvent(\n new Event('mid-change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeydown(event: KeyboardEvent) {\n const hasModifier =\n event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n\n if (event.key === 'Enter' && !hasModifier) {\n // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n // submitting to allow users to cancel the keydown event if they need to\n setTimeout(() => {\n // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n // to check for this is to look at event.isComposing, which will be true when the IME is open.\n if (!event.defaultPrevented && !event.isComposing) {\n this.form?.requestSubmit();\n }\n });\n }\n }\n\n clear() {\n this.value = '';\n this.setValue('');\n this.invalidmessage = '';\n }\n\n resetFormControl() {\n this.clear();\n }\n\n focus(options?: FocusOptions): void {\n this.inputElement?.focus(options);\n / don't select text, move caret to the end */\n if (this.value.length > 0) {\n const length = this.value.length;\n this.inputElement.setSelectionRange(length, length);\n }\n }\n\n @watch('length')\n handleLengthChange() {\n if (this.value.length > this.length) {\n this.value = this.value.substring(0, this.length);\n }\n }\n\n override render() {\n const hasLabelSlot = this.hasSlotControler.test('label');\n const hasLabel = !!this.label \|\| !!hasLabelSlot;\n const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n const chars = this.value.split('');\n const displayValues = Array.from(\n { length: this.length },\n (_, i) => chars[i] \|\| ''\n );\n const isComplete = this.value.length >= this.length;\n const caretIndex =\n this.disabled \|\| this.length === 0\n ? -1\n : Math.min(this.value.length, this.length - 1);\n\n return html`\n <label\n id=\"${this.labelId}\"\n for=\"mid-code-input-hidden\"\n class=\"code-input-label ${classMap({\n 'code-input-label--hidden': this.hidelabel \|\| !hasLabel,\n 'code-input-label--disabled': this.disabled,\n })}\"\n >\n <slot name=\"label\"> ${this.label} </slot>\n </label>\n <div\n part=\"input-container\"\n class=\"input-wrapper ${classMap({\n 'input-wrapper--sm': this.size === 'sm',\n 'input-wrapper--md': this.size === 'md',\n 'input-wrapper--lg': this.size === 'lg',\n 'input-wrapper--disabled': this.disabled,\n })}\"\n @click=${() => this.focus()}\n >\n <div part=\"character-boxes\" class=\"character-boxes\" aria-hidden=\"true\">\n ${displayValues.map((char, index) => {\n const isFocusTarget = this.isFocused && index === caretIndex;\n const hasCaret = isFocusTarget && !isComplete;\n return html`\n <div\n part=\"character-box\"\n aria-hidden=\"true\"\n class=\"character-box ${classMap({\n 'character-box--invalid': !!this.invalidmessage,\n 'character-box--caret': hasCaret,\n 'character-box--empty': !char,\n 'focus-ring-sm': isFocusTarget,\n })}\"\n @click=${(e: MouseEvent) => {\n e.stopPropagation();\n this.handleBoxClick(index);\n }}\n >\n ${char}\n </div>\n `;\n })}\n </div>\n <input\n class=\"hidden-input\"\n .value=\"${live(this.value)}\"\n id=\"mid-code-input-hidden\"\n type=\"${this.type}\"\n aria-labelledby=\"${this.labelId}\"\n aria-describedby=${ifDefined(describedBy)}\n aria-invalid=${this.invalidmessage ? 'true' : 'false'}\n aria-errormessage=${ifDefined(\n this.invalidmessage ? this.validationId : undefined\n )}\n maxlength=\"${this.length}\"\n ?autofocus=\"${this.autofocus}\"\n ?disabled=\"${this.disabled}\"\n ?required=\"${this.required}\"\n pattern=${ifDefined(this.pattern)}\n inputmode=\"${this.inputmode}\"\n autocomplete=\"one-time-code\"\n @beforeinput=\"${this.handleBeforeInput}\"\n @input=\"${this.handleInput}\"\n @change=\"${this.handleChange}\"\n @keydown=\"${this.handleKeydown}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n />\n </div>\n <div\n class=\"validation-message\"\n id=\"${this.validationId}\"\n aria-live=\"polite\"\n ?hidden=${!this.invalidmessage}\n >\n <mid-icon name=\"xmark-octagon-fill\" class=\"validation-icon\"></mid-icon>\n ${this.invalidmessage}\n </div>\n `;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n maxLengthValidator,\n minLengthValidator,\n patternValidator,\n requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-code-input': MinidCodeInput;\n }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n css`\n :host {\n display: block;\n }\n\n .code-input-label {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n margin-block-end: 0.5rem;\n font-weight: 500;\n }\n\n .code-input-label--with-description {\n margin-block-end: 0.25rem;\n }\n\n .code-input-label--sm {\n font-size: var(--ds-body-sm-font-size, 1rem);\n line-height: var(--ds-body-md-line-height, 1.5);\n }\n\n .code-input-label--md {\n font-size: var(--ds-body-md-font-size, 1.125rem);\n line-height: var(--ds-body-md-line-height, 1.5);\n }\n\n .code-input-label--lg {\n font-size: var(--ds-body-lg-font-size, 1.3125rem);\n line-height: var(--ds-body-md-line-height, 1.5);\n }\n\n .code-input-description {\n margin-block-end: 0.5rem;\n color: var(--ds-color-neutral-text-subtle, #545e6b);\n }\n\n .code-input-label--hidden,\n .code-input-description--hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .code-input-label--disabled,\n .code-input-description--disabled,\n .input-wrapper--disabled {\n opacity: var(--ds-opacity-disabled, 0.38);\n }\n\n .input-wrapper {\n position: relative;\n cursor: text;\n width: fit-content;\n font-size: 1rem;\n line-height: 1.3;\n font-weight: 500;\n }\n\n .input-wrapper--sm {\n font-size: var(--ds-heading-sm-font-size, 1.125rem);\n line-height: var(--ds-heading-sm-line-height, 1.3);\n font-weight: var(--ds-heading-sm-font-weight, 500);\n }\n\n .input-wrapper--md {\n font-size: var(--ds-heading-md-font-size, 1.25rem);\n line-height: var(--ds-heading-md-line-height, 1.3);\n font-weight: var(--ds-heading-md-font-weight, 500);\n }\n\n .input-wrapper--lg {\n font-size: var(--ds-heading-lg-font-size, 1.5rem);\n line-height: var(--ds-heading-lg-line-height, 1.3);\n font-weight: var(--ds-heading-lg-font-weight, 500);\n }\n\n .input-wrapper--disabled {\n cursor: not-allowed;\n }\n\n .character-boxes {\n display: inline-flex;\n gap: var(--mid-code-input-gap, 0.5rem);\n }\n\n .character-box {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n width: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));\n height: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));\n padding-inline: 0.25rem;\n user-select: none;\n text-align: center;\n font-family:\n ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;\n line-height: 1;\n border: var(--ds-border-width-default, 1px) solid\n var(\n --mid-code-input-border-color,\n var(--ds-color-neutral-border-default, #717a84)\n );\n border-radius: var(\n --mid-code-input-border-radius,\n var(--ds-border-radius-md, 0.25rem)\n );\n background-color: var(\n --mid-code-input-background,\n var(--ds-color-neutral-background-default, #ffffff)\n );\n color: var(--mid-code-input-text-color, inherit);\n }\n\n .character-box--empty {\n color: var(\n --mid-code-input-placeholder-color,\n var(--ds-color-neutral-surface-active, #c7cacf)\n );\n }\n\n .character-box--empty::before {\n content: '';\n box-sizing: border-box;\n width: 0.55em;\n height: 0.55em;\n border: 2px solid currentColor;\n border-radius: 50%;\n }\n\n .character-box--invalid {\n border-width: 2px;\n border-color: var(\n --mid-code-input-danger-border-color,\n var(--ds-color-danger-border-default, #ce4d4d)\n );\n background-color: var(\n --mid-code-input-danger-background,\n var(--ds-color-danger-surface-tinted, #f8e4e4)\n );\n }\n\n .character-box--invalid.character-box--empty {\n color: var(\n --mid-code-input-danger-placeholder-color,\n var(--ds-color-danger-surface-active, #edbfbf)\n );\n }\n\n .focus-ring-sm {\n outline: 2px solid var(--ds-color-focus-outer, #1f2c3d);\n outline-offset: 2px;\n box-shadow: 0 0 0 2px var(--ds-color-focus-inner, #ffffff);\n }\n\n /* Ensure hidden attribute always hides elements even when Tailwind's\n @layer base [hidden] rule is not available in the shadow DOM /\n [hidden] {\n display: none !important;\n }\n\n .hidden-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n background: transparent;\n border: none;\n outline: none;\n color: transparent;\n caret-color: transparent;\n font-size: 16px; / Minimum 16px prevents iOS zoom on focus /\n pointer-events: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .hidden-input:focus {\n outline: none;\n }\n\n .hidden-input:disabled {\n cursor: not-allowed;\n }\n\n @keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n .character-box--caret::after {\n content: '';\n position: absolute;\n width: 2px;\n height: 60%;\n background-color: var(\n --color-accent-base,\n var(--ds-color-accent-base-default, blue)\n );\n animation: blink 1s step-end infinite;\n }\n\n .character-box--caret-leading::after {\n inset-inline-start: 0;\n }\n\n / Hide placeholder circle when the caret is at this position /\n .character-box--caret.character-box--empty {\n color: transparent;\n }\n\n .validation-message {\n display: flex;\n gap: 0.25rem;\n color: var(--ds-color-danger-text-subtle, #a22e2e);\n }\n\n .validation-message--visible {\n margin-block-start: 0.5rem;\n }\n\n .validation-icon {\n margin-block-start: 0.25rem;\n min-width: 1.25rem;\n min-height: 1.25rem;\n }\n `,\n];\n\n/\n \n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-complete - Emitted when all characters have been entered.\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n \n @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n * @slot description - The input's description if you need to use HTML. Alternatively, you can use the `description` attribute.\n \n @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n * @csspart description - The description shown between the label and the character boxes.\n * @csspart character-boxes - The container for the visual character boxes.\n * @csspart character-box - An individual character box.\n * @csspart validation-message - The error message shown by `invalidmessage`.\n \n @method focus - Focuses the input element\n * @method clear - Clears the input\n /\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n styled(LitElement, styles)\n) {\n private readonly hasSlotControler = new HasSlotController(\n this,\n 'label',\n 'description'\n );\n private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n private readonly descriptionId = `mid-code-input-description-${nextUniqueId++}`;\n private readonly validationId = `mid-code-input-validation-${nextUniqueId++}`;\n\n @query('.hidden-input')\n private inputElement!: HTMLInputElement;\n\n @property({ reflect: true })\n value = '';\n\n @property()\n label = '';\n\n @property()\n description = '';\n\n @property()\n type: 'number' \| 'text' = 'text';\n\n /\n For displaying appropriate virtual keyboard\n /\n @property()\n inputmode: 'numeric' \| 'text' = 'numeric';\n\n /\n Adjusts the font-size of the code inputs\n /\n @property()\n size: 'sm' \| 'md' \| 'lg' = 'sm';\n\n @property()\n labelsize?: 'sm' \| 'md' \| 'lg';\n\n /\n Number of input characters or digits\n /\n @property({ type: Number })\n length = 5;\n\n @property({ type: Boolean })\n disabled = false;\n\n /\n Focuses the first input element on page load\n /\n @property({ type: Boolean })\n autofocus = false;\n\n /\n The minimum length of input that will be considered valid.\n /\n @property({ type: Number })\n minlength?: number;\n\n /\n Error message to display when the input is invalid, also activates invalid styling\n /\n @property()\n invalidmessage = '';\n\n /\n Visually hides `label` (still available for screen readers)\n /\n @property({ type: Boolean })\n hidelabel = false;\n\n @property({ type: Boolean })\n hidedescription = false;\n\n /\n Makes the input required\n /\n @property({ type: Boolean })\n required = false;\n\n /\n A regular expression pattern to validate input against.\n /\n @property()\n pattern?: string;\n\n @state()\n private isFocused = false;\n\n @state()\n private caretPosition = 0;\n\n private lastFormValue: string \| null = null;\n\n static get formControlValidators() {\n return [\n requiredValidator,\n maxLengthValidator,\n minLengthValidator,\n patternValidator,\n ];\n }\n\n get validationTarget() {\n return this.inputElement;\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n webOtpApiInit(this.renderRoot);\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.ownerDocument.addEventListener(\n 'selectionchange',\n this.handleSelectionChange\n );\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.ownerDocument.removeEventListener(\n 'selectionchange',\n this.handleSelectionChange\n );\n }\n\n private handleBoxClick(index: number) {\n if (this.disabled) {\n return;\n }\n\n // Truncate the value to the clicked position\n this.value = this.value.substring(0, index);\n\n // Focus the input to move the caret\n this.focus();\n }\n\n /\n Catches caret moves we did not make - arrow keys, Home/End, word jumps,\n * shift-selection - without enumerating keys, and keeps up while a key is held.\n \n Must be listened for on the document: for a caret move the user made,\n * Chromium fires it only there, not at the input and not into the shadow root,\n * so an `@selectionchange` binding on either never runs.\n /\n private handleSelectionChange = () => {\n // Fires for selection changes anywhere on the page\n if (this.isFocused) {\n this.syncCaretPosition();\n }\n };\n\n private syncCaretPosition() {\n const input = this.inputElement;\n\n if (!input) {\n return;\n }\n\n this.caretPosition =\n (input.selectionDirection === 'backward'\n ? input.selectionStart\n : input.selectionEnd) ?? this.value.length;\n }\n\n private handleFocus() {\n this.isFocused = true;\n / don't select text, move caret to the end /\n if (this.value.length > 0) {\n const length = this.value.length;\n this.inputElement.setSelectionRange(length, length);\n }\n this.syncCaretPosition();\n }\n\n private handleBlur() {\n this.isFocused = false;\n }\n\n private filterValue(value: string) {\n return this.type === 'number' ? value.replace(/\\D/g, '') : value;\n }\n\n private handleBeforeInput(e: InputEvent) {\n if (this.type === 'number' && e.inputType === 'insertText' && e.data) {\n if (!/\\d/.test(e.data)) {\n e.preventDefault();\n }\n }\n }\n\n private handlePaste(event: ClipboardEvent) {\n if (this.type !== 'number') {\n return;\n }\n\n const pasted = event.clipboardData?.getData('text') ?? '';\n const digits = this.filterValue(pasted);\n\n if (digits === pasted) {\n return;\n }\n\n event.preventDefault();\n\n const input = this.inputElement;\n const start = input.selectionStart ?? input.value.length;\n const end = input.selectionEnd ?? start;\n const next = (\n input.value.slice(0, start) +\n digits +\n input.value.slice(end)\n ).substring(0, this.length);\n\n if (next === input.value) {\n return;\n }\n\n input.value = next;\n input.dispatchEvent(\n new InputEvent('input', { bubbles: true, composed: true })\n );\n\n const caret = Math.min(start + digits.length, input.value.length);\n input.setSelectionRange(caret, caret);\n this.syncCaretPosition();\n }\n\n private handleInput(event: InputEvent) {\n const input = event.target as HTMLInputElement;\n let value = this.filterValue(input.value);\n\n value = value.substring(0, this.length);\n\n if (input.value !== value) {\n input.value = value;\n }\n\n this.syncCaretPosition();\n\n // Update the component's public `value` property if it has changed.\n if (this.value !== value) {\n this.value = value;\n this.lastFormValue = value;\n this.setValue(value);\n }\n\n this.inputElement.dispatchEvent(\n new Event('mid-input', { bubbles: true, composed: true })\n );\n\n if (this.value.length === this.length && this.value.length > 0) {\n this.inputElement.dispatchEvent(\n new Event('mid-complete', { bubbles: true, composed: true })\n );\n }\n }\n\n private handleChange() {\n this.inputElement.dispatchEvent(\n new Event('mid-change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeydown(event: KeyboardEvent) {\n const hasModifier =\n event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n\n if (event.key === 'Enter' && !hasModifier) {\n // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n // submitting to allow users to cancel the keydown event if they need to\n setTimeout(() => {\n // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n // to check for this is to look at event.isComposing, which will be true when the IME is open.\n if (!event.defaultPrevented && !event.isComposing) {\n this.form?.requestSubmit();\n }\n });\n }\n }\n\n clear() {\n this.value = '';\n this.lastFormValue = '';\n this.setValue('');\n this.invalidmessage = '';\n this.caretPosition = 0;\n }\n\n resetFormControl() {\n this.clear();\n }\n\n focus(options?: FocusOptions): void {\n if (!this.inputElement) {\n this.updateComplete.then(() => {\n if (this.isConnected) {\n this.focusInput(options);\n }\n });\n return;\n }\n this.focusInput(options);\n }\n\n private focusInput(options?: FocusOptions) {\n if (!this.inputElement) {\n return;\n }\n this.inputElement.focus(options);\n / don't select text, move caret to the end */\n if (this.value.length > 0) {\n const length = this.value.length;\n this.inputElement.setSelectionRange(length, length);\n }\n this.syncCaretPosition();\n }\n\n @watch('length')\n handleLengthChange() {\n if (this.value.length > this.length) {\n this.value = this.value.substring(0, this.length);\n }\n }\n\n @watch(['value', 'type'])\n handleValueChange() {\n const filtered = this.filterValue(this.value);\n\n if (filtered !== this.value) {\n this.value = filtered;\n }\n\n this.caretPosition = Math.min(this.caretPosition, this.value.length);\n\n if (filtered !== this.lastFormValue) {\n this.lastFormValue = filtered;\n this.syncFormValue(filtered);\n }\n }\n\n override render() {\n const hasLabelSlot = this.hasSlotControler.test('label');\n const hasLabel = !!this.label \|\| !!hasLabelSlot;\n const hasDescriptionSlot = this.hasSlotControler.test('description');\n const hasDescription = !!this.description \|\| !!hasDescriptionSlot;\n const describedBy =\n [\n hasDescription ? this.descriptionId : undefined,\n this.invalidmessage ? this.validationId : undefined,\n ]\n .filter(Boolean)\n .join(' ') \|\| undefined;\n\n const chars = this.value.split('');\n const displayValues = Array.from(\n { length: this.length },\n (_, i) => chars[i] \|\| ''\n );\n const caretIndex =\n this.disabled \|\| this.length === 0\n ? -1\n : Math.min(this.caretPosition, this.length - 1);\n const caretIsInABox = this.caretPosition < this.length;\n\n return html`\n <label\n id=\"${this.labelId}\"\n for=\"mid-code-input-hidden\"\n class=\"code-input-label ${classMap({\n 'code-input-label--sm': this.labelsize === 'sm',\n 'code-input-label--md': this.labelsize === 'md',\n 'code-input-label--lg': this.labelsize === 'lg',\n 'code-input-label--hidden': this.hidelabel \|\| !hasLabel,\n 'code-input-label--with-description': hasDescription,\n 'code-input-label--disabled': this.disabled,\n })}\"\n >\n <slot name=\"label\"> ${this.label} </slot>\n </label>\n ${hasDescription\n ? html`\n <div\n id=\"${this.descriptionId}\"\n part=\"description\"\n aria-hidden=\"true\"\n class=\"code-input-description ${classMap({\n 'code-input-description--hidden': this.hidedescription,\n 'code-input-description--disabled': this.disabled,\n })}\"\n >\n <slot name=\"description\"> ${this.description} </slot>\n </div>\n `\n : nothing}\n <div\n part=\"input-container\"\n class=\"input-wrapper ${classMap({\n 'input-wrapper--sm': this.size === 'sm',\n 'input-wrapper--md': this.size === 'md',\n 'input-wrapper--lg': this.size === 'lg',\n 'input-wrapper--disabled': this.disabled,\n })}\"\n @click=${() => this.focus()}\n >\n <div part=\"character-boxes\" class=\"character-boxes\" aria-hidden=\"true\">\n ${displayValues.map((char, index) => {\n const isFocusTarget = this.isFocused && index === caretIndex;\n const hasCaret = isFocusTarget && caretIsInABox;\n return html`\n <div\n part=\"character-box\"\n aria-hidden=\"true\"\n class=\"character-box ${classMap({\n 'character-box--invalid': !!this.invalidmessage,\n 'character-box--caret': hasCaret,\n 'character-box--caret-leading': hasCaret && !!char,\n 'character-box--empty': !char,\n 'focus-ring-sm': isFocusTarget,\n })}\"\n @click=${(e: MouseEvent) => {\n e.stopPropagation();\n this.handleBoxClick(index);\n }}\n >\n ${char}\n </div>\n `;\n })}\n </div>\n <input\n class=\"hidden-input\"\n .value=\"${live(this.value)}\"\n id=\"mid-code-input-hidden\"\n type=\"text\"\n aria-labelledby=\"${this.labelId}\"\n aria-describedby=${ifDefined(describedBy)}\n aria-invalid=${this.invalidmessage ? 'true' : 'false'}\n aria-errormessage=${ifDefined(\n this.invalidmessage ? this.validationId : undefined\n )}\n maxlength=\"${this.length}\"\n ?autofocus=\"${this.autofocus}\"\n ?disabled=\"${this.disabled}\"\n ?required=\"${this.required}\"\n pattern=${ifDefined(this.pattern)}\n inputmode=\"${this.inputmode}\"\n autocomplete=\"one-time-code\"\n @beforeinput=\"${this.handleBeforeInput}\"\n @paste=\"${this.handlePaste}\"\n @input=\"${this.handleInput}\"\n @change=\"${this.handleChange}\"\n @keydown=\"${this.handleKeydown}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n />\n </div>\n <div\n class=\"validation-message ${classMap({\n 'validation-message--visible': !!this.invalidmessage,\n })}\"\n part=\"validation-message\"\n id=\"${this.validationId}\"\n aria-live=\"polite\"\n >\n ${this.invalidmessage\n ? html`<mid-icon\n name=\"xmark-octagon-fill\"\n class=\"validation-icon\"\n ></mid-icon>\n ${this.invalidmessage}`\n : nothing}\n </div>\n `;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAI,eAAe;AAEnB,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoPF;AAuBO,IAAM,iBAAN,cAA6B;AAAA,EAClC,OAAO,YAAY,MAAM;AAC3B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAGL,SAAiB,mBAAmB,IAAI;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,SAAiB,UAAU,wBAAwB,cAAc;AACjE,SAAiB,gBAAgB,8BAA8B,cAAc;AAC7E,SAAiB,eAAe,6BAA6B,cAAc;AAM3E,SAAA,QAAQ;AAGR,SAAA,QAAQ;AAGR,SAAA,cAAc;AAGd,SAAA,OAA0B;AAM1B,SAAA,YAAgC;AAMhC,SAAA,OAA2B;AAS3B,SAAA,SAAS;AAGT,SAAA,WAAW;AAMX,SAAA,YAAY;AAYZ,SAAA,iBAAiB;AAMjB,SAAA,YAAY;AAGZ,SAAA,kBAAkB;AAMlB,SAAA,WAAW;AASX,SAAQ,YAAY;AAGpB,SAAQ,gBAAgB;AAExB,SAAQ,gBAA+B;AAuDvC,SAAQ,wBAAwB,MAAM;AAEpC,UAAI,KAAK,WAAW;AAClB,aAAK,kBAAA;AAAA,MACP;AAAA,IACF;AAAA,EAAA;AAAA,EA1DA,WAAW,wBAAwB;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,IAAI,mBAAmB;AACrB,WAAO,KAAK;AAAA,EACd;AAAA,EAEU,aAAa,oBAA0C;AAC/D,kBAAc,KAAK,UAAU;AAAA,EAC/B;AAAA,EAES,oBAAoB;AAC3B,UAAM,kBAAA;AACN,SAAK,cAAc;AAAA,MACjB;AAAA,MACA,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA;AACN,SAAK,cAAc;AAAA,MACjB;AAAA,MACA,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EAEQ,eAAe,OAAe;AACpC,QAAI,KAAK,UAAU;AACjB;AAAA,IACF;AAGA,SAAK,QAAQ,KAAK,MAAM,UAAU,GAAG,KAAK;AAG1C,SAAK,MAAA;AAAA,EACP;AAAA,EAiBQ,oBAAoB;AAC1B,UAAM,QAAQ,KAAK;AAEnB,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,SAAK,iBACF,MAAM,uBAAuB,aAC1B,MAAM,iBACN,MAAM,iBAAiB,KAAK,MAAM;AAAA,EAC1C;AAAA,EAEQ,cAAc;AACpB,SAAK,YAAY;AAEjB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,YAAM,SAAS,KAAK,MAAM;AAC1B,WAAK,aAAa,kBAAkB,QAAQ,MAAM;AAAA,IACpD;AACA,SAAK,kBAAA;AAAA,EACP;AAAA,EAEQ,aAAa;AACnB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,YAAY,OAAe;AACjC,WAAO,KAAK,SAAS,WAAW,MAAM,QAAQ,OAAO,EAAE,IAAI;AAAA,EAC7D;AAAA,EAEQ,kBAAkB,GAAe;AACvC,QAAI,KAAK,SAAS,YAAY,EAAE,cAAc,gBAAgB,EAAE,MAAM;AACpE,UAAI,CAAC,KAAK,KAAK,EAAE,IAAI,GAAG;AACtB,UAAE,eAAA;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,YAAY,OAAuB;AACzC,QAAI,KAAK,SAAS,UAAU;AAC1B;AAAA,IACF;AAEA,UAAM,SAAS,MAAM,eAAe,QAAQ,MAAM,KAAK;AACvD,UAAM,SAAS,KAAK,YAAY,MAAM;AAEtC,QAAI,WAAW,QAAQ;AACrB;AAAA,IACF;AAEA,UAAM,eAAA;AAEN,UAAM,QAAQ,KAAK;AACnB,UAAM,QAAQ,MAAM,kBAAkB,MAAM,MAAM;AAClD,UAAM,MAAM,MAAM,gBAAgB;AAClC,UAAM,QACJ,MAAM,MAAM,MAAM,GAAG,KAAK,IAC1B,SACA,MAAM,MAAM,MAAM,GAAG,GACrB,UAAU,GAAG,KAAK,MAAM;AAE1B,QAAI,SAAS,MAAM,OAAO;AACxB;AAAA,IACF;AAEA,UAAM,QAAQ;AACd,UAAM;AAAA,MACJ,IAAI,WAAW,SAAS,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,IAAA;AAG3D,UAAM,QAAQ,KAAK,IAAI,QAAQ,OAAO,QAAQ,MAAM,MAAM,MAAM;AAChE,UAAM,kBAAkB,OAAO,KAAK;AACpC,SAAK,kBAAA;AAAA,EACP;AAAA,EAEQ,YAAY,OAAmB;AACrC,UAAM,QAAQ,MAAM;AACpB,QAAI,QAAQ,KAAK,YAAY,MAAM,KAAK;AAExC,YAAQ,MAAM,UAAU,GAAG,KAAK,MAAM;AAEtC,QAAI,MAAM,UAAU,OAAO;AACzB,YAAM,QAAQ;AAAA,IAChB;AAEA,SAAK,kBAAA;AAGL,QAAI,KAAK,UAAU,OAAO;AACxB,WAAK,QAAQ;AACb,WAAK,gBAAgB;AACrB,WAAK,SAAS,KAAK;AAAA,IACrB;AAEA,SAAK,aAAa;AAAA,MAChB,IAAI,MAAM,aAAa,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,IAAA;AAG1D,QAAI,KAAK,MAAM,WAAW,KAAK,UAAU,KAAK,MAAM,SAAS,GAAG;AAC9D,WAAK,aAAa;AAAA,QAChB,IAAI,MAAM,gBAAgB,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAAA,IAE/D;AAAA,EACF;AAAA,EAEQ,eAAe;AACrB,SAAK,aAAa;AAAA,MAChB,IAAI,MAAM,cAAc;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,cAAc,OAAsB;AAC1C,UAAM,cACJ,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;AAE5D,QAAI,MAAM,QAAQ,WAAW,CAAC,aAAa;AAGzC,iBAAW,MAAM;AAGf,YAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,aAAa;AACjD,eAAK,MAAM,cAAA;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,QAAQ;AACN,SAAK,QAAQ;AACb,SAAK,gBAAgB;AACrB,SAAK,SAAS,EAAE;AAChB,SAAK,iBAAiB;AACtB,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,mBAAmB;AACjB,SAAK,MAAA;AAAA,EACP;AAAA,EAEA,MAAM,SAA8B;AAClC,QAAI,CAAC,KAAK,cAAc;AACtB,WAAK,eAAe,KAAK,MAAM;AAC7B,YAAI,KAAK,aAAa;AACpB,eAAK,WAAW,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AACD;AAAA,IACF;AACA,SAAK,WAAW,OAAO;AAAA,EACzB;AAAA,EAEQ,WAAW,SAAwB;AACzC,QAAI,CAAC,KAAK,cAAc;AACtB;AAAA,IACF;AACA,SAAK,aAAa,MAAM,OAAO;AAE/B,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,YAAM,SAAS,KAAK,MAAM;AAC1B,WAAK,aAAa,kBAAkB,QAAQ,MAAM;AAAA,IACpD;AACA,SAAK,kBAAA;AAAA,EACP;AAAA,EAGA,qBAAqB;AACnB,QAAI,KAAK,MAAM,SAAS,KAAK,QAAQ;AACnC,WAAK,QAAQ,KAAK,MAAM,UAAU,GAAG,KAAK,MAAM;AAAA,IAClD;AAAA,EACF;AAAA,EAGA,oBAAoB;AAClB,UAAM,WAAW,KAAK,YAAY,KAAK,KAAK;AAE5C,QAAI,aAAa,KAAK,OAAO;AAC3B,WAAK,QAAQ;AAAA,IACf;AAEA,SAAK,gBAAgB,KAAK,IAAI,KAAK,eAAe,KAAK,MAAM,MAAM;AAEnE,QAAI,aAAa,KAAK,eAAe;AACnC,WAAK,gBAAgB;AACrB,WAAK,cAAc,QAAQ;AAAA,IAC7B;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,eAAe,KAAK,iBAAiB,KAAK,OAAO;AACvD,UAAM,WAAW,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AACnC,UAAM,qBAAqB,KAAK,iBAAiB,KAAK,aAAa;AACnE,UAAM,iBAAiB,CAAC,CAAC,KAAK,eAAe,CAAC,CAAC;AAC/C,UAAM,cACJ;AAAA,MACE,iBAAiB,KAAK,gBAAgB;AAAA,MACtC,KAAK,iBAAiB,KAAK,eAAe;AAAA,IAAA,EAEzC,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,UAAM,QAAQ,KAAK,MAAM,MAAM,EAAE;AACjC,UAAM,gBAAgB,MAAM;AAAA,MAC1B,EAAE,QAAQ,KAAK,OAAA;AAAA,MACf,CAAC,GAAG,MAAM,MAAM,CAAC,KAAK;AAAA,IAAA;AAExB,UAAM,aACJ,KAAK,YAAY,KAAK,WAAW,IAC7B,KACA,KAAK,IAAI,KAAK,eAAe,KAAK,SAAS,CAAC;AAClD,UAAM,gBAAgB,KAAK,gBAAgB,KAAK;AAEhD,WAAO;AAAA;AAAA,cAEG,KAAK,OAAO;AAAA;AAAA,kCAEQ,SAAS;AAAA,MACjC,wBAAwB,KAAK,cAAc;AAAA,MAC3C,wBAAwB,KAAK,cAAc;AAAA,MAC3C,wBAAwB,KAAK,cAAc;AAAA,MAC3C,4BAA4B,KAAK,aAAa,CAAC;AAAA,MAC/C,sCAAsC;AAAA,MACtC,8BAA8B,KAAK;AAAA,IAAA,CACpC,CAAC;AAAA;AAAA,8BAEoB,KAAK,KAAK;AAAA;AAAA,QAEhC,iBACE;AAAA;AAAA,oBAEU,KAAK,aAAa;AAAA;AAAA;AAAA,8CAGQ,SAAS;AAAA,MACvC,kCAAkC,KAAK;AAAA,MACvC,oCAAoC,KAAK;AAAA,IAAA,CAC1C,CAAC;AAAA;AAAA,0CAE0B,KAAK,WAAW;AAAA;AAAA,cAGhD,OAAO;AAAA;AAAA;AAAA,+BAGc,SAAS;AAAA,MAC9B,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,MACnC,2BAA2B,KAAK;AAAA,IAAA,CACjC,CAAC;AAAA,iBACO,MAAM,KAAK,MAAA,CAAO;AAAA;AAAA;AAAA,YAGvB,cAAc,IAAI,CAAC,MAAM,UAAU;AACnC,YAAM,gBAAgB,KAAK,aAAa,UAAU;AAClD,YAAM,WAAW,iBAAiB;AAClC,aAAO;AAAA;AAAA;AAAA;AAAA,uCAIoB,SAAS;AAAA,QAC9B,0BAA0B,CAAC,CAAC,KAAK;AAAA,QACjC,wBAAwB;AAAA,QACxB,gCAAgC,YAAY,CAAC,CAAC;AAAA,QAC9C,wBAAwB,CAAC;AAAA,QACzB,iBAAiB;AAAA,MAAA,CAClB,CAAC;AAAA,yBACO,CAAC,MAAkB;AAC1B,UAAE,gBAAA;AACF,aAAK,eAAe,KAAK;AAAA,MAC3B,CAAC;AAAA;AAAA,kBAEC,IAAI;AAAA;AAAA;AAAA,IAGZ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIQ,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA;AAAA,6BAGP,KAAK,OAAO;AAAA,6BACZ,UAAU,WAAW,CAAC;AAAA,yBAC1B,KAAK,iBAAiB,SAAS,OAAO;AAAA,8BACjC;AAAA,MAClB,KAAK,iBAAiB,KAAK,eAAe;AAAA,IAAA,CAC3C;AAAA,uBACY,KAAK,MAAM;AAAA,wBACV,KAAK,SAAS;AAAA,uBACf,KAAK,QAAQ;AAAA,uBACb,KAAK,QAAQ;AAAA,oBAChB,UAAU,KAAK,OAAO,CAAC;AAAA,uBACpB,KAAK,SAAS;AAAA;AAAA,0BAEX,KAAK,iBAAiB;AAAA,oBAC5B,KAAK,WAAW;AAAA,oBAChB,KAAK,WAAW;AAAA,qBACf,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA,oBACpB,KAAK,WAAW;AAAA,mBACjB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,oCAIE,SAAS;AAAA,MACnC,+BAA+B,CAAC,CAAC,KAAK;AAAA,IAAA,CACvC,CAAC;AAAA;AAAA,cAEI,KAAK,YAAY;AAAA;AAAA;AAAA,UAGrB,KAAK,iBACH;AAAA;AAAA;AAAA;AAAA,gBAII,KAAK,cAAc,KACvB,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAvdU,gBAAA;AAAA,EADP,MAAM,eAAe;AAAA,GAZX,eAaH,WAAA,gBAAA,CAAA;AAGR,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAfhB,eAgBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAlBC,eAmBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GArBC,eAsBX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAxBC,eAyBX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GA9BC,eA+BX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GApCC,eAqCX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAvCC,eAwCX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Cf,eA8CX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhDhB,eAiDX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAtDhB,eAuDX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Df,eA6DX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAlEC,eAmEX,WAAA,kBAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxEhB,eAyEX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3EhB,eA4EX,WAAA,mBAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjFhB,eAkFX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAvFC,eAwFX,WAAA,WAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GA1FI,eA2FH,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GA7FI,eA8FH,WAAA,iBAAA,CAAA;AA0OR,gBAAA;AAAA,EADC,MAAM,QAAQ;AAAA,GAvUJ,eAwUX,WAAA,sBAAA,CAAA;AAOA,gBAAA;AAAA,EADC,MAAM,CAAC,SAAS,MAAM,CAAC;AAAA,GA9Ub,eA+UX,WAAA,qBAAA,CAAA;AA/UW,iBAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,cAAA;"}

package/dist/components/textfield.component.d.ts CHANGED Viewed

@@ -25,6 +25,7 @@ declare const MinidTextfield_base: import('../types/mixin-constructor.ts').Const
  * @csspart field - The element that wraps the label, input, and help text.
  * @csspart clear-button - The clear button
  * @csspart password-toggle-button - The button for toggling password visibility
+ * @csspart validation-message - The error message shown by `invalidmessage`.
  */
 export declare class MinidTextfield extends MinidTextfield_base {
     private readonly inputId;
@@ -121,6 +122,7 @@ export declare class MinidTextfield extends MinidTextfield_base {
     private handleInput;
     private handleFocus;
     private handlePasswordToggle;
+    private handleInFieldButtonMousedown;
     private handleClearClick;
     focus(): void;
     resetFormControl(): void;

package/dist/components/textfield.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textfield.component.d.ts","sourceRoot":"","sources":["../../src/components/textfield.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB1E,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;~~AAyBD;;;;;;;;;;;;;;;;;;;GAmBG~~;AACH,qBACa,cAAe,SAAQ,mBAA4C;IAC9E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAU;IACvC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA4D;IAC7F,OAAO,CAAC,SAAS,CAAC,CAAY;IAC9B,OAAO,CAAC,YAAY,CAAM;IAG1B,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAGpB,IAAI,EACA,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAU;IAEpB;;OAEG;IAEH,SAAS,EACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,CAAU;IAEvB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAQ/B;;IAYQ,iBAAiB,IAAI,IAAI;IAKlC,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKhE,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,gBAAgB;IAmBxB,KAAK;IAKL,gBAAgB;IAKhB,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAKlC,iBAAiB;IAKX,gBAAgB;IAUb,MAAM;~~CA6IhB~~"}
1	+ {"version":3,"file":"textfield.component.d.ts","sourceRoot":"","sources":["../../src/components/textfield.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB1E,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAgID;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,cAAe,SAAQ,mBAA4C;IAC9E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAU;IACvC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA4D;IAC7F,OAAO,CAAC,SAAS,CAAC,CAAY;IAC9B,OAAO,CAAC,YAAY,CAAM;IAG1B,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAGpB,IAAI,EACA,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAU;IAEpB;;OAEG;IAEH,SAAS,EACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,CAAU;IAEvB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAQ/B;;IAYQ,iBAAiB,IAAI,IAAI;IAKlC,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKhE,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,gBAAgB;IAmBxB,KAAK;IAKL,gBAAgB;IAKhB,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAKlC,iBAAiB;IAKX,gBAAgB;IAUb,MAAM;CA8JhB"}