@felleslosninger/minid-elements 0.0.122 → 0.0.124
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.
|
@@ -73,6 +73,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
|
|
|
73
73
|
private handlePaste;
|
|
74
74
|
private updateValueAndEmit;
|
|
75
75
|
private valueVisualUpdate;
|
|
76
|
+
focus(options?: FocusOptions): void;
|
|
76
77
|
handleLengthChange(): void;
|
|
77
78
|
handleValueChange(): void;
|
|
78
79
|
render(): import('lit-html').TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAqBD;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAEnC;;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IAEzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,aAAa,CAAgC;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAU;IAEvC;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,cAAc,CAAuC;IAE7D,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,4BAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAqBD;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAEnC;;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IAEzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,aAAa,CAAgC;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAU;IAEvC;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,cAAc,CAAuC;IAE7D,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,4BAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,iBAAiB;IAOzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAOnC,kBAAkB;IAMlB,iBAAiB;IAWR,MAAM;CAiEhB"}
|
|
@@ -189,6 +189,11 @@ let MinidCodeInput = class extends FormControlMixin(
|
|
|
189
189
|
this.internalValues[index] = chars[index];
|
|
190
190
|
});
|
|
191
191
|
}
|
|
192
|
+
focus(options) {
|
|
193
|
+
if (this.inputElements.length > 0) {
|
|
194
|
+
this.inputElements[0].focus(options);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
192
197
|
handleLengthChange() {
|
|
193
198
|
this.internalValues = Array(this.length).fill("");
|
|
194
199
|
this.valueVisualUpdate(this.value);
|
|
@@ -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, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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 /* Hide increment/decrement buttons on 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];\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 {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 *\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 #skipValueVisualUpdate = false;\n private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n @queryAll('input')\n private inputElements!: NodeListOf<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' = 'text';\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 internalValues = Array<string>(this.length).fill('');\n\n static get formControlValidators() {\n return [\n requiredValidator,\n maxLengthValidator,\n minLengthValidator,\n patternValidator,\n ];\n }\n\n get validationTarget() {\n return this.inputElements?.length ? this.inputElements[0] : null;\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n webOtpApiInit(this.renderRoot);\n }\n\n private handleFocus(index: number) {\n return () => {\n this.inputElements[index].setAttribute('placeholder', '');\n this.inputElements[index].select();\n };\n }\n\n private handleBlur(index: number) {\n return () => {\n this.inputElements[index].setAttribute('placeholder', '○');\n };\n }\n\n private handleKeydown(index: number) {\n return (event: KeyboardEvent) => {\n this.internalValues[index] = (event.target as HTMLInputElement).value;\n this.value = this.internalValues.join('');\n const input = event.target as HTMLInputElement;\n const hasModifier =\n event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n if (event.key === 'Backspace') {\n if (input.value === '' && index > 0) {\n // If current input is empty, move to previous and clear it\n this.inputElements[index - 1].focus();\n this.internalValues[index - 1] = '';\n this.updateValueAndEmit(true);\n } else if (input.value !== '') {\n // If current input has a value, clear it\n input.value = '';\n this.internalValues[index] = '';\n this.updateValueAndEmit(true);\n }\n } else if (event.key === 'ArrowLeft') {\n if (index > 0) {\n this.inputElements[index - 1].focus();\n }\n } else if (event.key === 'ArrowRight') {\n if (index < this.length - 1) {\n this.inputElements[index + 1].focus();\n }\n } else if (event.key === 'Delete') {\n // Clear current field without moving\n input.value = '';\n this.internalValues[index] = '';\n this.updateValueAndEmit(true);\n } else 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 //\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\n private handleInput(index: number) {\n return (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n let inputValue = input.value;\n\n // Only allow single digit input\n if (inputValue.length > 1) {\n inputValue = inputValue.charAt(0);\n input.value = inputValue; // Correct the input value\n }\n\n this.internalValues[index] = inputValue;\n this.updateValueAndEmit(true);\n\n // Auto-focus next input if a digit was entered and it's not the last one\n if (inputValue !== '' && index < this.length - 1) {\n this.inputElements[index + 1].focus();\n }\n\n this.dispatchEvent(\n new Event('mid-input', { bubbles: true, composed: true })\n );\n };\n }\n\n private handlePaste(index: number) {\n return (event: ClipboardEvent) => {\n event.preventDefault(); // Prevent default paste behavior\n const pasteData = event.clipboardData?.getData('text').trim();\n\n if (pasteData) {\n const pasteChars = pasteData.split('');\n for (let i = 0; i < this.length; i++) {\n if (index + i < this.length && pasteChars[i]) {\n this.internalValues[index + i] = pasteChars[i];\n // Update the actual input element's value directly as well\n // if (this.inputElements[index + i]) {\n // this.inputElements[index + i].value = pasteChars[i];\n // }\n }\n }\n this.updateValueAndEmit();\n\n // Focus the last filled input or the last input if all are filled\n const lastFilledIndex = Math.min(\n index + pasteChars.length - 1,\n this.length - 1\n );\n this.inputElements[lastFilledIndex]?.focus();\n }\n };\n }\n\n private updateValueAndEmit(skipValueUpdate = false) {\n this.#skipValueVisualUpdate = skipValueUpdate;\n this.value = this.internalValues.join('');\n this.dispatchEvent(\n new Event('mid-change', {\n bubbles: true,\n composed: true,\n })\n );\n\n if (\n this.value.length === this.length &&\n this.internalValues.every((digit) => digit !== '')\n ) {\n this.dispatchEvent(\n new Event('mid-complete', {\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private valueVisualUpdate(value: string) {\n const chars = value.split('');\n this.internalValues.forEach((_, index) => {\n this.internalValues[index] = chars[index];\n });\n }\n\n @watch('length')\n handleLengthChange() {\n this.internalValues = Array(this.length).fill('');\n this.valueVisualUpdate(this.value);\n }\n\n @watch('value')\n handleValueChange() {\n this.setValue(this.value);\n\n if (this.#skipValueVisualUpdate) {\n this.#skipValueVisualUpdate = false;\n return;\n }\n\n this.valueVisualUpdate(this.value);\n }\n\n override render() {\n const hasLabelSlot = this.hasSlotControler.test('label');\n const hasLabel = !!this.label || !!hasLabelSlot;\n return html`\n <label\n id=\"${this.labelId}\"\n class=\"${classMap({\n 'sr-only': this.hidelabel || !hasLabel,\n 'opacity-disabled': this.disabled,\n })} mb-2 block items-center gap-1 font-medium\"\n >\n <slot name=\"label\"> ${this.label} </slot>\n </label>\n <div\n part=\"input-container\"\n class=\"${classMap({\n 'text-heading-sm': this.size === 'sm',\n 'text-heading-md': this.size === 'md',\n 'text-heading-lg': this.size === 'lg',\n })} inline-flex gap-2\"\n >\n ${this.internalValues.map((value, index) => {\n return html`\n <input\n .value=\"${live(value || '')}\"\n id=\"mid-code-input-${index}\"\n class=\"${classMap({\n border: !this.invalidmessage,\n 'border-2': this.invalidmessage,\n 'border-neutral': !this.invalidmessage,\n 'border-danger': this.invalidmessage,\n 'bg-neutral': !this.invalidmessage,\n 'bg-danger-tinted': this.invalidmessage,\n 'placeholder:text-neutral-surface-active': !this.invalidmessage,\n 'placeholder:text-danger-surface-active': this.invalidmessage,\n })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n type=\"${this.type}\"\n placeholder=\"○\"\n aria-labelledby=\"${this.labelId}\"\n size=\"1\"\n ?autofocus=\"${!index && this.autofocus}\"\n ?disabled=\"${this.disabled}\"\n inputmode=\"${this.inputmode}\"\n @keydown=\"${this.handleKeydown(index)}\"\n @input=\"${this.handleInput(index)}\"\n @paste=\"${this.handlePaste(index)}\"\n @focus=\"${this.handleFocus(index)}\"\n @blur=\"${this.handleBlur(index)}\"\n />\n `;\n })}\n </div>\n <div\n class=\"text-danger-subtle mt-2 flex gap-1\"\n aria-live=\"polite\"\n ?hidden=${!this.invalidmessage}\n >\n <mid-icon\n name=\"xmark-octagon-fill\"\n class=\"mt-1 min-h-5 min-w-5\"\n ></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, PropertyValues } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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 /* Hide increment/decrement buttons on 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];\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 {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 *\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 #skipValueVisualUpdate = false;\n private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n @queryAll('input')\n private inputElements!: NodeListOf<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' = 'text';\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 internalValues = Array<string>(this.length).fill('');\n\n static get formControlValidators() {\n return [\n requiredValidator,\n maxLengthValidator,\n minLengthValidator,\n patternValidator,\n ];\n }\n\n get validationTarget() {\n return this.inputElements?.length ? this.inputElements[0] : null;\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n webOtpApiInit(this.renderRoot);\n }\n\n private handleFocus(index: number) {\n return () => {\n this.inputElements[index].setAttribute('placeholder', '');\n this.inputElements[index].select();\n };\n }\n\n private handleBlur(index: number) {\n return () => {\n this.inputElements[index].setAttribute('placeholder', '○');\n };\n }\n\n private handleKeydown(index: number) {\n return (event: KeyboardEvent) => {\n this.internalValues[index] = (event.target as HTMLInputElement).value;\n this.value = this.internalValues.join('');\n const input = event.target as HTMLInputElement;\n const hasModifier =\n event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n if (event.key === 'Backspace') {\n if (input.value === '' && index > 0) {\n // If current input is empty, move to previous and clear it\n this.inputElements[index - 1].focus();\n this.internalValues[index - 1] = '';\n this.updateValueAndEmit(true);\n } else if (input.value !== '') {\n // If current input has a value, clear it\n input.value = '';\n this.internalValues[index] = '';\n this.updateValueAndEmit(true);\n }\n } else if (event.key === 'ArrowLeft') {\n if (index > 0) {\n this.inputElements[index - 1].focus();\n }\n } else if (event.key === 'ArrowRight') {\n if (index < this.length - 1) {\n this.inputElements[index + 1].focus();\n }\n } else if (event.key === 'Delete') {\n // Clear current field without moving\n input.value = '';\n this.internalValues[index] = '';\n this.updateValueAndEmit(true);\n } else 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 //\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\n private handleInput(index: number) {\n return (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n let inputValue = input.value;\n\n // Only allow single digit input\n if (inputValue.length > 1) {\n inputValue = inputValue.charAt(0);\n input.value = inputValue; // Correct the input value\n }\n\n this.internalValues[index] = inputValue;\n this.updateValueAndEmit(true);\n\n // Auto-focus next input if a digit was entered and it's not the last one\n if (inputValue !== '' && index < this.length - 1) {\n this.inputElements[index + 1].focus();\n }\n\n this.dispatchEvent(\n new Event('mid-input', { bubbles: true, composed: true })\n );\n };\n }\n\n private handlePaste(index: number) {\n return (event: ClipboardEvent) => {\n event.preventDefault(); // Prevent default paste behavior\n const pasteData = event.clipboardData?.getData('text').trim();\n\n if (pasteData) {\n const pasteChars = pasteData.split('');\n for (let i = 0; i < this.length; i++) {\n if (index + i < this.length && pasteChars[i]) {\n this.internalValues[index + i] = pasteChars[i];\n // Update the actual input element's value directly as well\n // if (this.inputElements[index + i]) {\n // this.inputElements[index + i].value = pasteChars[i];\n // }\n }\n }\n this.updateValueAndEmit();\n\n // Focus the last filled input or the last input if all are filled\n const lastFilledIndex = Math.min(\n index + pasteChars.length - 1,\n this.length - 1\n );\n this.inputElements[lastFilledIndex]?.focus();\n }\n };\n }\n\n private updateValueAndEmit(skipValueUpdate = false) {\n this.#skipValueVisualUpdate = skipValueUpdate;\n this.value = this.internalValues.join('');\n this.dispatchEvent(\n new Event('mid-change', {\n bubbles: true,\n composed: true,\n })\n );\n\n if (\n this.value.length === this.length &&\n this.internalValues.every((digit) => digit !== '')\n ) {\n this.dispatchEvent(\n new Event('mid-complete', {\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private valueVisualUpdate(value: string) {\n const chars = value.split('');\n this.internalValues.forEach((_, index) => {\n this.internalValues[index] = chars[index];\n });\n }\n\n focus(options?: FocusOptions): void {\n if (this.inputElements.length > 0) {\n this.inputElements[0].focus(options);\n }\n }\n\n @watch('length')\n handleLengthChange() {\n this.internalValues = Array(this.length).fill('');\n this.valueVisualUpdate(this.value);\n }\n\n @watch('value')\n handleValueChange() {\n this.setValue(this.value);\n\n if (this.#skipValueVisualUpdate) {\n this.#skipValueVisualUpdate = false;\n return;\n }\n\n this.valueVisualUpdate(this.value);\n }\n\n override render() {\n const hasLabelSlot = this.hasSlotControler.test('label');\n const hasLabel = !!this.label || !!hasLabelSlot;\n return html`\n <label\n id=\"${this.labelId}\"\n class=\"${classMap({\n 'sr-only': this.hidelabel || !hasLabel,\n 'opacity-disabled': this.disabled,\n })} mb-2 block items-center gap-1 font-medium\"\n >\n <slot name=\"label\"> ${this.label} </slot>\n </label>\n <div\n part=\"input-container\"\n class=\"${classMap({\n 'text-heading-sm': this.size === 'sm',\n 'text-heading-md': this.size === 'md',\n 'text-heading-lg': this.size === 'lg',\n })} inline-flex gap-2\"\n >\n ${this.internalValues.map((value, index) => {\n return html`\n <input\n .value=\"${live(value || '')}\"\n id=\"mid-code-input-${index}\"\n class=\"${classMap({\n border: !this.invalidmessage,\n 'border-2': this.invalidmessage,\n 'border-neutral': !this.invalidmessage,\n 'border-danger': this.invalidmessage,\n 'bg-neutral': !this.invalidmessage,\n 'bg-danger-tinted': this.invalidmessage,\n 'placeholder:text-neutral-surface-active': !this.invalidmessage,\n 'placeholder:text-danger-surface-active': this.invalidmessage,\n })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n type=\"${this.type}\"\n placeholder=\"○\"\n aria-labelledby=\"${this.labelId}\"\n size=\"1\"\n ?autofocus=\"${!index && this.autofocus}\"\n ?disabled=\"${this.disabled}\"\n inputmode=\"${this.inputmode}\"\n @keydown=\"${this.handleKeydown(index)}\"\n @input=\"${this.handleInput(index)}\"\n @paste=\"${this.handlePaste(index)}\"\n @focus=\"${this.handleFocus(index)}\"\n @blur=\"${this.handleBlur(index)}\"\n />\n `;\n })}\n </div>\n <div\n class=\"text-danger-subtle mt-2 flex gap-1\"\n aria-live=\"polite\"\n ?hidden=${!this.invalidmessage}\n >\n <mid-icon\n name=\"xmark-octagon-fill\"\n class=\"mt-1 min-h-5 min-w-5\"\n ></mid-icon>\n ${this.invalidmessage}\n </div>\n `;\n }\n}\n"],"names":[],"mappings":"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"}
|