@mhmo91/schmancy 0.4.55 → 0.4.57

package/dist/{input-DJKVCqiL.cjs.map → input-C7HGyOON.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"input-DJKVCqiL.cjs","sources":["../src/input/input.ts"],"sourcesContent":["import { html, LitElement, nothing, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil } from 'rxjs'\n\nimport { SchmancyFormField } from '@mixins/index'\n\n// Import styles\nimport style from './input.scss?inline'\n\n// If you want to be form-associated, define the type on `ElementInternals`.\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input': SchmancyInput\n\t\t'sch-input': SchmancyInput\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\n/**\n * Custom events the component may emit:\n * - 'input': on every keystroke\n * - 'change': on native blur/change\n * - 'enter': specifically when user presses Enter\n */\nexport type SchmancyInputInputEvent = CustomEvent<EventDetails>\nexport type SchmancyInputChangeEvent = CustomEvent<EventDetails>\nexport type SchmancyInputEnterEvent = CustomEvent<EventDetails>\n\n/**\n * Size variants for the input.\n * - sm: Small, compact input (40px height)\n * - md: Medium input (50px height, default)\n * - lg: Large, spacious input (60px height)\n */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/**\n * Enhanced version of the SchmancyInput component with improved form integration\n * and compatibility with legacy API.\n *\n * This component uses the native form association API and maintains parity with\n * native input behaviors while providing a stylish, accessible interface.\n * \n * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)\n * @prop {boolean} required - Whether the field is required (inherited from FormFieldMixin)\n * @prop {boolean} disabled - Whether the field is disabled (inherited from FormFieldMixin)\n * @prop {boolean} readonly - Whether the field is read-only (inherited from FormFieldMixin)\n * @prop {boolean} error - Whether the field is in an error state (inherited from FormFieldMixin)\n * @prop {string} validationMessage - The validation message to display (inherited from FormFieldMixin)\n * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)\n */\n@customElement('schmancy-input')\nexport default class SchmancyInput extends SchmancyFormField(style) {\n\t// ----------------------------\n\t//  A) Public properties\n\t// ----------------------------\n\n\t/** Auto-incrementing counter for generating unique IDs */\n\tstatic _idCounter = 0\n\n\t/** Override value to be string only for input element */\n\t@property({ type: String, reflect: true })\n\tpublic override value = ''\n\n\n\t/**\n\t * The type of input. (e.g. 'text', 'password', 'email', etc.)\n\t */\n\t@property({ reflect: true })\n\tpublic type: HTMLInputElement['type'] = 'text'\n\n\n\t@property()\n\tpublic placeholder = ''\n\n\n\t/** Pattern validation attribute. */\n\t@property({ type: String, reflect: true })\n\tpublic pattern?: string\n\n\n\t/** If true, we visually show a pointer cursor even if readOnly. */\n\t@property({ type: Boolean, reflect: true }) public clickable = false\n\n\t/** Whether browser spellcheck is enabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic spellcheck = false\n\n\t/**\n\t * Text alignment within the input.\n\t * - 'left' | 'center' | 'right'\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic align: 'left' | 'center' | 'right' = 'left'\n\n\t/** inputmode attribute (affects on-screen keyboards in mobile). */\n\t@property()\n\tpublic inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'\n\n\t@property({ type: Number, reflect: true })\n\tpublic minlength?: number\n\n\t@property({ type: Number })\n\tpublic maxlength?: number\n\n\t@property()\n\tpublic min?: string\n\n\t@property()\n\tpublic max?: string\n\n\t@property({ type: Number, reflect: true })\n\tpublic step?: number\n\n\t/** If true, auto-focus this input on first render. */\n\t@property({ type: Boolean })\n\tpublic autofocus = false\n\n\t/** Autocomplete/autofill hints. */\n\t@property({ type: String, reflect: true })\n\tpublic autocomplete: AutoFill = 'on'\n\n\t/**\n\t * tabIndex for focusing by tab key. Typically 0 or -1.\n\t */\n\t@property({ type: Number, reflect: true })\n\tpublic override tabIndex = 0\n\n\n\t/**\n\t * The size of the input.\n\t * - 'sm': Small, compact size\n\t * - 'md': Medium size (default)\n\t * - 'lg': Large size\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic size: InputSize = 'md'\n\n\t/**\n\t * Controls when validation should show.\n\t * - 'always' - Always show validation\n\t * - 'touched' - Only show after field has been focused and then blurred\n\t * - 'dirty' - Only show after value has changed\n\t * - 'submitted' - Only show after form submission\n\t */\n\t@property({ type: String })\n\tpublic validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'\n\n\t/**\n\t * For datalist support\n\t */\n\t@property({ type: String })\n\tpublic list?: string\n\n\n\t// ----------------------------\n\t//  B) Queries & Refs\n\t// ----------------------------\n\t@query('input') private inputElement!: HTMLInputElement\n\tprivate inputRef = createRef<HTMLInputElement>()\n\n\t// ----------------------------\n\t//  C) Internal States\n\t// ----------------------------\n\n\t/**\n\t * For integration with browser's autofill support\n\t */\n\t@state()\n\tprivate isAutofilled = false\n\n\t/**\n\t * Track user interaction state for validation\n\t */\n\t@state()\n\tprivate touched = false\n\n\t@state()\n\tprivate dirty = false\n\n\t@state()\n\tprivate submitted = false\n\n\t/**\n\t * Store the default value for reset behavior\n\t */\n\t@state()\n\tprivate defaultValue = ''\n\n\t// ----------------------------\n\t//  D) Form-associated logic\n\t// ----------------------------\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true, // so focus() goes to <input>\n\t}\n\n\tprivate formResetObserver?: MutationObserver\n\n\t/**\n\t * If user did not provide an ID, auto-generate one so <label for=\"...\">\n\t * and various aria-* attributes can reference it.\n\t */\n\tprotected override willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n\t\tif (!this.id) {\n\t\t\tthis.id = `sch-input-${SchmancyInput._idCounter++}`\n\t\t}\n\t\tsuper.willUpdate(changedProps)\n\t}\n\n\n\tprotected override updated(changedProps: Map<string, unknown>) {\n\t\tsuper.updated(changedProps)\n\n\t\t// Handle value changes\n\t\tif (changedProps.has('value')) {\n\t\t\t// If value changes from original default, mark as dirty\n\t\t\tif (this.value !== this.defaultValue) {\n\t\t\t\tthis.dirty = true\n\t\t\t}\n\n\t\t\t// Update validation state when value changes\n\t\t\tthis.validateInput()\n\t\t}\n\n\t\t// Store default value if this is the first update\n\t\tif (!this.hasUpdated && changedProps.has('value')) {\n\t\t\tthis.defaultValue = this.value\n\t\t}\n\t}\n\n\t/**\n\t * Connect to the closest form element and set up form integration\n\t */\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Store initial default value for form reset\n\t\tthis.defaultValue = this.value\n\n\t\t// Set up form integration\n\t\tthis.setupFormIntegration()\n\n\t\t// Setup for external label association\n\t\tthis.setupExternalLabelAssociation()\n\t}\n\n\t/**\n\t * Set up form integration with ElementInternals\n\t */\n\tprivate setupFormIntegration() {\n\t\tif (this.form) {\n\t\t\t// Listen for form reset events\n\t\t\tthis.formResetObserver = new MutationObserver(mutations => {\n\t\t\t\tfor (const mutation of mutations) {\n\t\t\t\t\tif (mutation.type === 'attributes' && mutation.attributeName === 'reset') {\n\t\t\t\t\t\tthis.resetToDefault()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t// Observe the form for reset events\n\t\t\tthis.formResetObserver.observe(this.form, {\n\t\t\t\tattributes: true,\n\t\t\t\tchildList: false,\n\t\t\t\tsubtree: false,\n\t\t\t})\n\n\t\t\t// Also directly listen for the reset event\n\t\t\tthis.form.addEventListener('reset', () => {\n\t\t\t\tthis.resetToDefault()\n\t\t\t})\n\n\t\t\t// Listen for form submit events to mark field as submitted\n\t\t\tthis.form.addEventListener('submit', () => {\n\t\t\t\tthis.submitted = true\n\t\t\t\t// Validate on form submission\n\t\t\t\tthis.validateInput(true)\n\t\t\t})\n\t\t}\n\t}\n\n\t/**\n\t * Set up external label association for native HTML label support\n\t */\n\tprivate setupExternalLabelAssociation() {\n\t\tif (this.id) {\n\t\t\tconst setupLabelClickListener = () => {\n\t\t\t\tconst labels = document.querySelectorAll(`label[for=\"${this.id}\"]`)\n\t\t\t\tlabels.forEach(label => {\n\t\t\t\t\tlabel.addEventListener('click', () => {\n\t\t\t\t\t\tthis.focus()\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// Initialize after DOM is ready\n\t\t\tif (document.readyState === 'complete') {\n\t\t\t\tsetupLabelClickListener()\n\t\t\t} else {\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', setupLabelClickListener)\n\t\t\t}\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\n\t\t// Clean up the form observer\n\t\tif (this.formResetObserver) {\n\t\t\tthis.formResetObserver.disconnect()\n\t\t}\n\n\t\t// Clean up external label click listeners\n\t\tif (this.id) {\n\t\t\tconst labels = document.querySelectorAll(`label[for=\"${this.id}\"]`)\n\t\t\tlabels.forEach(label => {\n\t\t\t\tlabel.removeEventListener('click', () => {\n\t\t\t\t\tthis.focus()\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t}\n\n\t/**\n\t * Reset the input to its default state\n\t */\n\tprivate resetToDefault() {\n\t\tthis.value = this.defaultValue\n\t\tthis.touched = false\n\t\tthis.dirty = false\n\t\tthis.submitted = false\n\t\tthis.error = false\n\t\tthis.validationMessage = ''\n\t\tthis.dispatchEvent(new CustomEvent('reset', { bubbles: true }))\n\t}\n\n\t/**\n\t * Determines if validation errors should be shown based on current state\n\t * and validation strategy\n\t */\n\tprivate shouldShowValidation(forceValidation = false): boolean {\n\t\tif (forceValidation) return true\n\n\t\tswitch (this.validateOn) {\n\t\t\tcase 'always':\n\t\t\t\treturn true\n\t\t\tcase 'touched':\n\t\t\t\treturn this.touched\n\t\t\tcase 'dirty':\n\t\t\t\treturn this.dirty\n\t\t\tcase 'submitted':\n\t\t\t\treturn this.submitted\n\t\t\tdefault:\n\t\t\t\treturn this.touched\n\t\t}\n\t}\n\n\n\t/**\n\t * Validate input based on required, pattern, etc.\n\t * This mimics native validation behavior\n\t */\n\tprivate validateInput(forceValidation = false) {\n\t\t// Skip validation for disabled inputs\n\t\tif (this.disabled) return\n\n\t\t// Only show validation errors if we should based on the validation strategy\n\t\tconst shouldValidate = this.shouldShowValidation(forceValidation)\n\n\t\t// Get validity state from internal input if available\n\t\tconst validity: ValidityState = this.inputElement?.validity ?? {\n\t\t\tbadInput: false,\n\t\t\tcustomError: false,\n\t\t\tpatternMismatch: false,\n\t\t\trangeOverflow: false,\n\t\t\trangeUnderflow: false,\n\t\t\tstepMismatch: false,\n\t\t\ttooLong: false,\n\t\t\ttooShort: false,\n\t\t\ttypeMismatch: false,\n\t\t\tvalid: true,\n\t\t\tvalueMissing: false,\n\t\t}\n\n\t\t// Check if the input has an actual validation error (not a custom error)\n\t\tconst hasError = !validity.valid && !validity.customError\n\n\t\tif (shouldValidate && hasError) {\n\t\t\t// There's an error and we should show it\n\t\t\tthis.error = true\n\t\t\tthis.validationMessage = this.inputElement?.validationMessage || ''\n\t\t} else if (validity.valid) {\n\t\t\t// Input is valid, so clear the error state\n\t\t\tthis.error = false\n\n\t\t\t// Only clear validation message if there's no custom error\n\t\t\tif (!validity.customError) {\n\t\t\t\tthis.validationMessage = ''\n\t\t\t}\n\t\t} else if (!shouldValidate) {\n\t\t\t// We shouldn't show validation yet, so clear visual error state\n\t\t\tthis.error = false\n\t\t}\n\n\t\t// The mixin will handle updating internals based on error state\n\t}\n\n\t/**\n\t * Check validity without showing validation UI\n\t */\n\tpublic override checkValidity() {\n\t\t// Check internal input first\n\t\tconst inputValid = this.inputRef.value?.checkValidity() ?? true\n\n\t\t// Call parent implementation for basic validation\n\t\tconst parentValid = super.checkValidity()\n\n\t\treturn inputValid && parentValid\n\t}\n\n\t/**\n\t * Show validation UI and check validity\n\t */\n\tpublic override reportValidity() {\n\t\t// Mark as touched and submitted to show validation\n\t\tthis.touched = true\n\t\tthis.submitted = true\n\n\t\t// First check using native input\n\t\tconst inputValid = this.inputRef.value?.reportValidity() ?? true\n\n\t\t// Update our component's validation state with force=true\n\t\tthis.validateInput(true)\n\n\t\t// Call parent implementation\n\t\tconst parentValid = super.reportValidity()\n\n\t\treturn inputValid && parentValid\n\t}\n\n\t/**\n\t * Set a custom validation error message\n\t */\n\tpublic override setCustomValidity(message: string) {\n\t\t// Set on the native input\n\t\tif (this.inputRef.value) {\n\t\t\tthis.inputRef.value.setCustomValidity(message)\n\t\t}\n\n\t\t// Call parent implementation\n\t\tsuper.setCustomValidity(message)\n\t\t\n\t\t// Update error state based on validation strategy\n\t\tthis.error = message !== '' && this.shouldShowValidation()\n\t}\n\n\t// ----------------------------\n\t//  E) Lifecycle Hooks & Event Handlers\n\t// ----------------------------\n\tfirstUpdated() {\n\t\t// Autofocus if desired\n\t\tif (this.autofocus) {\n\t\t\t// Use setTimeout to match browser behavior - autofocus happens after initial rendering\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.focus()\n\t\t\t}, 0)\n\t\t}\n\n\t\t// Subscribe to input events\n\t\tthis.setupInputEvents()\n\t\tthis.setupFocusBlurEvents()\n\t\tthis.setupAutofillDetection()\n\t\tthis.setupEnterKeyEvents()\n\t}\n\n\t/**\n\t * Set up input event handling for value changes\n\t */\n\tprivate setupInputEvents() {\n\t\tfromEvent<InputEvent>(this.inputElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => {\n\t\t\t\t\t// Capture all input event properties for complete event forwarding\n\t\t\t\t\tconst inputEvent = ev as InputEvent\n\t\t\t\t\tconst target = ev.target as HTMLInputElement\n\t\t\t\t\treturn {\n\t\t\t\t\t\tvalue: target.value,\n\t\t\t\t\t\tinputType: inputEvent.inputType,\n\t\t\t\t\t\tdata: inputEvent.data,\n\t\t\t\t\t\tisComposing: inputEvent.isComposing,\n\t\t\t\t\t\toriginalEvent: ev,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(eventData => {\n\t\t\t\t// Update component value\n\t\t\t\tthis.value = eventData.value\n\n\t\t\t\t// Mark as dirty when user types\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Fire custom 'input' event with extended details\n\t\t\t\tconst customEvent = new CustomEvent<EventDetails>('input', {\n\t\t\t\t\tdetail: { value: eventData.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\n\t\t\t\t// Add additional properties to match native events more closely\n\t\t\t\tObject.defineProperties(customEvent, {\n\t\t\t\t\tinputType: { value: eventData.inputType },\n\t\t\t\t\tdata: { value: eventData.data },\n\t\t\t\t\tisComposing: { value: eventData.isComposing },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(customEvent)\n\n\t\t\t\t// REMOVED: Duplicate change event dispatch that was here\n\t\t\t\t// Run validation like native inputs do on input, but respect the validation strategy\n\t\t\t\tthis.validateInput()\n\t\t\t})\n\n\t\t// Subscribe to native change events (usually on blur)\n\t\tfromEvent<Event>(this.inputElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => (ev.target as HTMLInputElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Fire regular change event using mixin helper\n\t\t\t\tthis.emitChange({ value })\n\n\t\t\t\t// Run validation on change like native inputs\n\t\t\t\tthis.validateInput()\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up focus/blur event handling\n\t */\n\tprivate setupFocusBlurEvents() {\n\t\tfromEvent<FocusEvent>(this.inputElement, 'focus')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(ev => {\n\t\t\t\t// Create a custom focus event that includes standard props\n\t\t\t\tconst focusEvent = new CustomEvent('focus', {\n\t\t\t\t\tbubbles: ev.bubbles,\n\t\t\t\t\tcancelable: ev.cancelable,\n\t\t\t\t\tcomposed: ev.composed,\n\t\t\t\t})\n\n\t\t\t\t// Add focus-specific properties\n\t\t\t\tObject.defineProperties(focusEvent, {\n\t\t\t\t\trelatedTarget: { value: ev.relatedTarget },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(focusEvent)\n\t\t\t})\n\n\t\tfromEvent<FocusEvent>(this.inputElement, 'blur')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(ev => {\n\t\t\t\t// Mark as touched when field loses focus\n\t\t\t\tthis.touched = true\n\n\t\t\t\t// Run validation on blur like native inputs, respecting validation strategy\n\t\t\t\tif (!this.disabled) {\n\t\t\t\t\tthis.validateInput()\n\t\t\t\t}\n\n\t\t\t\t// Create a custom blur event that includes standard props\n\t\t\t\tconst blurEvent = new CustomEvent('blur', {\n\t\t\t\t\tbubbles: ev.bubbles,\n\t\t\t\t\tcancelable: ev.cancelable,\n\t\t\t\t\tcomposed: ev.composed,\n\t\t\t\t})\n\n\t\t\t\t// Add blur-specific properties\n\t\t\t\tObject.defineProperties(blurEvent, {\n\t\t\t\t\trelatedTarget: { value: ev.relatedTarget },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(blurEvent)\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up autofill detection\n\t */\n\tprivate setupAutofillDetection() {\n\t\t// Detect autofill animation (Chrome, etc.)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillStart'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.isAutofilled = true\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Dispatch autofill event for integration with autofill systems\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('autofill', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\n\t\t\t\t// Also propagate as a change event like browsers do\n\t\t\t\tthis.emitChange({ value })\n\t\t\t})\n\n\t\t// Detect end of autofill (Chrome)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillCancel'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.isAutofilled = false\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up enter key event handling\n\t */\n\tprivate setupEnterKeyEvents() {\n\t\t// Listen for Enter on keydown\n\t\tfromEvent<KeyboardEvent>(this.inputElement, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.key === 'Enter'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\t\n\t\t\t\t// Update value if changed\n\t\t\t\tif (this.value !== value) {\n\t\t\t\t\tthis.value = value\n\t\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Blur the input to trigger change event naturally\n\t\t\t\t// This mimics what happens when you tab out of the field\n\t\t\t\tthis.inputElement.blur()\n\n\t\t\t\t// Dispatch enhanced enter event\n\t\t\t\tconst enterEvent = new CustomEvent<EventDetails>('enter', {\n\t\t\t\t\tdetail: { value: this.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\n\t\t\t\t// Add extra keyboard event props\n\t\t\t\tObject.defineProperties(enterEvent, {\n\t\t\t\t\tkey: { value: 'Enter' },\n\t\t\t\t\tcode: { value: 'Enter' },\n\t\t\t\t\tkeyCode: { value: 13 },\n\t\t\t\t\twhich: { value: 13 },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(enterEvent)\n\t\t\t})\n\t}\n\n\t// ----------------------------\n\t//  F) Utility Methods\n\t// ----------------------------\n\t/** Selects all text within the input. */\n\tpublic select() {\n\t\treturn this.inputRef.value?.select()\n\t}\n\n\t/** Returns the native validity state of the inner <input>. */\n\tpublic getValidity(): ValidityState | undefined {\n\t\treturn this.inputRef.value?.validity\n\t}\n\n\t/**\n\t * Sets the selection range. Mirrors native input.setSelectionRange\n\t */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.inputRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/**\n\t * Returns the selected text within the input (start position)\n\t */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.inputRef.value?.selectionStart ?? null\n\t}\n\n\t/**\n\t * Returns the selected text within the input (end position)\n\t */\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.inputRef.value?.selectionEnd ?? null\n\t}\n\n\t/**\n\t * Returns the direction of selection\n\t */\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.inputRef.value?.selectionDirection ?? null\n\t}\n\n\t/**\n\t * Sets the range of text to be selected.\n\t */\n\tpublic setRangeText(\n\t\treplacement: string,\n\t\tstart?: number,\n\t\tend?: number,\n\t\tselectMode?: 'select' | 'start' | 'end' | 'preserve',\n\t) {\n\t\tif (start !== undefined && end !== undefined) {\n\t\t\tthis.inputRef.value?.setRangeText(replacement, start, end, selectMode)\n\t\t} else {\n\t\t\tthis.inputRef.value?.setRangeText(replacement)\n\t\t}\n\t}\n\n\t/**\n\t * Override to forward focus to the internal <input>.\n\t * Also dispatch a 'focus' event for external listeners.\n\t */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.inputRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\t/**\n\t * Override to forward clicks to the internal <input>.\n\t * Also dispatch a 'click' event for external listeners.\n\t */\n\tpublic override click() {\n\t\tthis.inputRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\t/** Forward blur to the internal <input>. */\n\tpublic override blur() {\n\t\tthis.inputRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\t// ----------------------------\n\t//  G) Rendering\n\t// ----------------------------\n\tprotected override render() {\n\t\t// Determine height and padding based on size\n\t\tconst getHeightAndPadding = () => {\n\t\t\tswitch (this.size) {\n\t\t\t\tcase 'sm':\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '40px',\n\t\t\t\t\t\tpadding: '0 8px',\n\t\t\t\t\t\tfontSize: '0.875rem', // 14px\n\t\t\t\t\t}\n\t\t\t\tcase 'lg':\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '60px',\n\t\t\t\t\t\tpadding: '0 20px',\n\t\t\t\t\t\tfontSize: '1.125rem', // 18px\n\t\t\t\t\t}\n\t\t\t\tcase 'md':\n\t\t\t\tdefault:\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '50px',\n\t\t\t\t\t\tpadding: '0 16px',\n\t\t\t\t\t\tfontSize: '1rem', // 16px\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst { height, padding, fontSize } = getHeightAndPadding()\n\n\t\t// Check if it's a date-type input\n\t\tconst isDateType = ['date', 'datetime-local', 'time', 'month', 'week'].includes(this.type)\n\n\t\tconst inputClasses = {\n\t\t\t// Base styles\n\t\t\t'block w-full min-w-0 rounded-[8px] border-0 bg-surface-highest text-surface-on': true,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles\n\t\t\t'ring-0 ring-inset focus:ring-1 focus:ring-inset': true,\n\t\t\t// Ring colors based on error state\n\t\t\t'ring-secondary-default ring-outline focus:ring-secondary-default': !this.error,\n\t\t\t'ring-error-default focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t'cursor-pointer': this.clickable,\n\t\t\t// Text alignment (date inputs always left-aligned)\n\t\t\t'text-left': this.align === 'left' || isDateType,\n\t\t\t'text-center': this.align === 'center' && !isDateType,\n\t\t\t'text-right': this.align === 'right' && !isDateType,\n\t\t\t// Autofill\n\t\t\tautofilled: this.isAutofilled,\n\t\t}\n\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-sm': this.size === 'sm',\n\t\t\t'text-base': this.size === 'md',\n\t\t\t'text-lg': this.size === 'lg',\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\n\t\tconst styles = {\n\t\t\theight,\n\t\t\tpadding,\n\t\t\tfontSize,\n\t\t\t// Ensure vertical centering for all input types\n\t\t\tlineHeight: height,\n\t\t}\n\n\t\t/**\n\t\t * - If `this.label` is present, we render a proper `<label for=\"${this.id}\">`.\n\t\t * - If not, we add an aria-label to the <input> for better accessibility.\n\t\t * - If there's a `hint`, we reference it via aria-describedby.\n\t\t * - If there's an error, we set aria-invalid and could set aria-errormessage.\n\t\t */\n\t\treturn html`\n\t\t\t<div class=\"w-full min-w-0 ${isDateType ? 'date-input-container' : ''}\">\n\t\t\t\t${when(\n\t\t\t\t\tthis.label,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=${this.id}\n\t\t\t\t\t\t\tclass=${this.classMap(labelClasses)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.label}\n\t\t\t\t\t\t</label>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<input\n\t\t\t\t\t${ref(this.inputRef)}\n\t\t\t\t\tid=${this.id}\n\t\t\t\t\tname=${this.name}\n\t\t\t\t\tclass=${this.classMap(inputClasses)}\n\t\t\t\t\tstyle=${this.styleMap(styles)}\n\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t.type=${this.type}\n\t\t\t\t\t.autocomplete=${this.autocomplete}\n\t\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\t\tplaceholder=${this.placeholder}\n\t\t\t\t\tinputmode=${ifDefined(this.inputmode)}\n\t\t\t\t\tpattern=${ifDefined(this.pattern)}\n\t\t\t\t\tstep=${ifDefined(this.step)}\n\t\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t\tmin=${ifDefined(this.min)}\n\t\t\t\t\tmax=${ifDefined(this.max)}\n\t\t\t\t\tlist=${ifDefined(this.list)}\n\t\t\t\t\t?required=${this.required}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t?readonly=${this.readonly}\n\t\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t\taria-labelledby=${this.label ? `label-${this.id}` : nothing}\n\t\t\t\t\taria-describedby=${this.hint || this.validationMessage ? `hint-${this.id}` : nothing}\n\t\t\t\t\taria-label=${ifDefined(!this.label ? this.placeholder || 'Input' : undefined)}\n\t\t\t\t/>\n\n\t\t\t\t${when(\n\t\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tid=\"hint-${this.id}\"\n\t\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n/**\n * Register the component with the legacy tag name for backward compatibility\n * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)\n * @prop {boolean} required - Whether the field is required (inherited from FormFieldMixin)\n * @prop {boolean} disabled - Whether the field is disabled (inherited from FormFieldMixin)\n * @prop {boolean} readonly - Whether the field is read-only (inherited from FormFieldMixin)\n * @prop {boolean} error - Whether the field is in an error state (inherited from FormFieldMixin)\n * @prop {string} validationMessage - The validation message to display (inherited from FormFieldMixin)\n * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)\n */\n@customElement('sch-input')\nexport class SchmancyInputCompat extends SchmancyInput {}\n"],"names":["SchmancyInput","SchmancyFormField","constructor","super","arguments","this","value","type","placeholder","clickable","spellcheck","align","autofocus","autocomplete","tabIndex","size","validateOn","inputRef","createRef","isAutofilled","touched","dirty","submitted","defaultValue","changedProps","id","_idCounter","willUpdate","updated","has","validateInput","hasUpdated","connectedCallback","setupFormIntegration","setupExternalLabelAssociation","form","formResetObserver","MutationObserver","mutations","mutation","attributeName","resetToDefault","observe","attributes","childList","subtree","addEventListener","setupLabelClickListener","document","querySelectorAll","forEach","label","focus","readyState","disconnectedCallback","disconnect","removeEventListener","error","validationMessage","dispatchEvent","CustomEvent","bubbles","forceValidation","disabled","shouldValidate","shouldShowValidation","validity","inputElement","customError","valid","hasError","checkValidity","inputValid","parentValid","reportValidity","message","setCustomValidity","firstUpdated","setTimeout","setupInputEvents","setupFocusBlurEvents","setupAutofillDetection","setupEnterKeyEvents","fromEvent","pipe","map","ev","inputEvent","target","inputType","data","isComposing","originalEvent","takeUntil","disconnecting","subscribe","eventData","customEvent","detail","composed","Object","defineProperties","distinctUntilChanged","emitChange","focusEvent","cancelable","relatedTarget","blurEvent","filter","animationName","key","blur","enterEvent","code","keyCode","which","select","getValidity","start","end","direction","setSelectionRange","selectionStart","selectionEnd","selectionDirection","replacement","selectMode","setRangeText","options","Event","click","render","height","padding","fontSize","getHeightAndPadding","isDateType","includes","inputClasses","readonly","autofilled","labelClasses","styles","lineHeight","html","when","classMap","ref","name","styleMap","ifDefined","inputmode","pattern","step","minlength","maxlength","min","max","list","required","nothing","hint","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","property","String","reflect","prototype","Boolean","Number","query","state","customElement","SchmancyInputCompat"],"mappings":"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"}
+{"version":3,"file":"input-C7HGyOON.cjs","sources":["../src/input/input.ts"],"sourcesContent":["import { html, LitElement, nothing, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil } from 'rxjs'\n\nimport { SchmancyFormField } from '@mixins/index'\n\n// Import styles\nimport style from './input.scss?inline'\n\n// If you want to be form-associated, define the type on `ElementInternals`.\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input': SchmancyInput\n\t\t'sch-input': SchmancyInput\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\n/**\n * Custom events the component may emit:\n * - 'input': on every keystroke\n * - 'change': on native blur/change\n * - 'enter': specifically when user presses Enter\n */\nexport type SchmancyInputInputEvent = CustomEvent<EventDetails>\nexport type SchmancyInputChangeEvent = CustomEvent<EventDetails>\nexport type SchmancyInputEnterEvent = CustomEvent<EventDetails>\n\n/**\n * Size variants for the input.\n * - sm: Small, compact input (40px height)\n * - md: Medium input (50px height, default)\n * - lg: Large, spacious input (60px height)\n */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/**\n * Enhanced version of the SchmancyInput component with improved form integration\n * and compatibility with legacy API.\n *\n * This component uses the native form association API and maintains parity with\n * native input behaviors while providing a stylish, accessible interface.\n * \n * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)\n * @prop {boolean} required - Whether the field is required (inherited from FormFieldMixin)\n * @prop {boolean} disabled - Whether the field is disabled (inherited from FormFieldMixin)\n * @prop {boolean} readonly - Whether the field is read-only (inherited from FormFieldMixin)\n * @prop {boolean} error - Whether the field is in an error state (inherited from FormFieldMixin)\n * @prop {string} validationMessage - The validation message to display (inherited from FormFieldMixin)\n * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)\n */\n@customElement('schmancy-input')\nexport default class SchmancyInput extends SchmancyFormField(style) {\n\t// ----------------------------\n\t//  A) Public properties\n\t// ----------------------------\n\n\t/** Auto-incrementing counter for generating unique IDs */\n\tstatic _idCounter = 0\n\n\t/** Override value to be string only for input element */\n\t@property({ type: String, reflect: true })\n\tpublic override value = ''\n\n\n\t/**\n\t * The type of input. (e.g. 'text', 'password', 'email', etc.)\n\t */\n\t@property({ reflect: true })\n\tpublic type: HTMLInputElement['type'] = 'text'\n\n\n\t@property()\n\tpublic placeholder = ''\n\n\n\t/** Pattern validation attribute. */\n\t@property({ type: String, reflect: true })\n\tpublic pattern?: string\n\n\n\t/** If true, we visually show a pointer cursor even if readOnly. */\n\t@property({ type: Boolean, reflect: true }) public clickable = false\n\n\t/** Whether browser spellcheck is enabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic spellcheck = false\n\n\t/**\n\t * Text alignment within the input.\n\t * - 'left' | 'center' | 'right'\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic align: 'left' | 'center' | 'right' = 'left'\n\n\t/** inputmode attribute (affects on-screen keyboards in mobile). */\n\t@property()\n\tpublic inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'\n\n\t@property({ type: Number, reflect: true })\n\tpublic minlength?: number\n\n\t@property({ type: Number })\n\tpublic maxlength?: number\n\n\t@property()\n\tpublic min?: string\n\n\t@property()\n\tpublic max?: string\n\n\t@property({ type: Number, reflect: true })\n\tpublic step?: number\n\n\t/** If true, auto-focus this input on first render. */\n\t@property({ type: Boolean })\n\tpublic autofocus = false\n\n\t/** Autocomplete/autofill hints. */\n\t@property({ type: String, reflect: true })\n\tpublic autocomplete: AutoFill = 'on'\n\n\t/**\n\t * tabIndex for focusing by tab key. Typically 0 or -1.\n\t */\n\t@property({ type: Number, reflect: true })\n\tpublic override tabIndex = 0\n\n\n\t/**\n\t * The size of the input.\n\t * - 'sm': Small, compact size\n\t * - 'md': Medium size (default)\n\t * - 'lg': Large size\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic size: InputSize = 'md'\n\n\t/**\n\t * Controls when validation should show.\n\t * - 'always' - Always show validation\n\t * - 'touched' - Only show after field has been focused and then blurred\n\t * - 'dirty' - Only show after value has changed\n\t * - 'submitted' - Only show after form submission\n\t */\n\t@property({ type: String })\n\tpublic validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'\n\n\t/**\n\t * For datalist support\n\t */\n\t@property({ type: String })\n\tpublic list?: string\n\n\n\t// ----------------------------\n\t//  B) Queries & Refs\n\t// ----------------------------\n\t@query('input') private inputElement!: HTMLInputElement\n\tprivate inputRef = createRef<HTMLInputElement>()\n\n\t// ----------------------------\n\t//  C) Internal States\n\t// ----------------------------\n\n\t/**\n\t * For integration with browser's autofill support\n\t */\n\t@state()\n\tprivate isAutofilled = false\n\n\t/**\n\t * Track user interaction state for validation\n\t */\n\t@state()\n\tprivate touched = false\n\n\t@state()\n\tprivate dirty = false\n\n\t@state()\n\tprivate submitted = false\n\n\t/**\n\t * Store the default value for reset behavior\n\t */\n\t@state()\n\tprivate defaultValue = ''\n\n\t// ----------------------------\n\t//  D) Form-associated logic\n\t// ----------------------------\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true, // so focus() goes to <input>\n\t}\n\n\tprivate formResetObserver?: MutationObserver\n\n\t/**\n\t * If user did not provide an ID, auto-generate one so <label for=\"...\">\n\t * and various aria-* attributes can reference it.\n\t */\n\tprotected override willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n\t\tif (!this.id) {\n\t\t\tthis.id = `sch-input-${SchmancyInput._idCounter++}`\n\t\t}\n\t\tsuper.willUpdate(changedProps)\n\t}\n\n\n\tprotected override updated(changedProps: Map<string, unknown>) {\n\t\tsuper.updated(changedProps)\n\n\t\t// Handle value changes\n\t\tif (changedProps.has('value')) {\n\t\t\t// If value changes from original default, mark as dirty\n\t\t\tif (this.value !== this.defaultValue) {\n\t\t\t\tthis.dirty = true\n\t\t\t}\n\n\t\t\t// Update validation state when value changes\n\t\t\tthis.validateInput()\n\t\t}\n\n\t\t// Store default value if this is the first update\n\t\tif (!this.hasUpdated && changedProps.has('value')) {\n\t\t\tthis.defaultValue = this.value\n\t\t}\n\t}\n\n\t/**\n\t * Connect to the closest form element and set up form integration\n\t */\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Store initial default value for form reset\n\t\tthis.defaultValue = this.value\n\n\t\t// Set up form integration\n\t\tthis.setupFormIntegration()\n\n\t\t// Setup for external label association\n\t\tthis.setupExternalLabelAssociation()\n\t}\n\n\t/**\n\t * Set up form integration with ElementInternals\n\t */\n\tprivate setupFormIntegration() {\n\t\tif (this.form) {\n\t\t\t// Listen for form reset events\n\t\t\tthis.formResetObserver = new MutationObserver(mutations => {\n\t\t\t\tfor (const mutation of mutations) {\n\t\t\t\t\tif (mutation.type === 'attributes' && mutation.attributeName === 'reset') {\n\t\t\t\t\t\tthis.resetToDefault()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t// Observe the form for reset events\n\t\t\tthis.formResetObserver.observe(this.form, {\n\t\t\t\tattributes: true,\n\t\t\t\tchildList: false,\n\t\t\t\tsubtree: false,\n\t\t\t})\n\n\t\t\t// Also directly listen for the reset event\n\t\t\tthis.form.addEventListener('reset', () => {\n\t\t\t\tthis.resetToDefault()\n\t\t\t})\n\n\t\t\t// Listen for form submit events to mark field as submitted\n\t\t\tthis.form.addEventListener('submit', () => {\n\t\t\t\tthis.submitted = true\n\t\t\t\t// Validate on form submission\n\t\t\t\tthis.validateInput(true)\n\t\t\t})\n\t\t}\n\t}\n\n\t/**\n\t * Set up external label association for native HTML label support\n\t */\n\tprivate setupExternalLabelAssociation() {\n\t\tif (this.id) {\n\t\t\tconst setupLabelClickListener = () => {\n\t\t\t\tconst labels = document.querySelectorAll(`label[for=\"${this.id}\"]`)\n\t\t\t\tlabels.forEach(label => {\n\t\t\t\t\tlabel.addEventListener('click', () => {\n\t\t\t\t\t\tthis.focus()\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// Initialize after DOM is ready\n\t\t\tif (document.readyState === 'complete') {\n\t\t\t\tsetupLabelClickListener()\n\t\t\t} else {\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', setupLabelClickListener)\n\t\t\t}\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\n\t\t// Clean up the form observer\n\t\tif (this.formResetObserver) {\n\t\t\tthis.formResetObserver.disconnect()\n\t\t}\n\n\t\t// Clean up external label click listeners\n\t\tif (this.id) {\n\t\t\tconst labels = document.querySelectorAll(`label[for=\"${this.id}\"]`)\n\t\t\tlabels.forEach(label => {\n\t\t\t\tlabel.removeEventListener('click', () => {\n\t\t\t\t\tthis.focus()\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t}\n\n\t/**\n\t * Reset the input to its default state\n\t */\n\tprivate resetToDefault() {\n\t\tthis.value = this.defaultValue\n\t\tthis.touched = false\n\t\tthis.dirty = false\n\t\tthis.submitted = false\n\t\tthis.error = false\n\t\tthis.validationMessage = ''\n\t\tthis.dispatchEvent(new CustomEvent('reset', { bubbles: true }))\n\t}\n\n\t/**\n\t * Determines if validation errors should be shown based on current state\n\t * and validation strategy\n\t */\n\tprivate shouldShowValidation(forceValidation = false): boolean {\n\t\tif (forceValidation) return true\n\n\t\tswitch (this.validateOn) {\n\t\t\tcase 'always':\n\t\t\t\treturn true\n\t\t\tcase 'touched':\n\t\t\t\treturn this.touched\n\t\t\tcase 'dirty':\n\t\t\t\treturn this.dirty\n\t\t\tcase 'submitted':\n\t\t\t\treturn this.submitted\n\t\t\tdefault:\n\t\t\t\treturn this.touched\n\t\t}\n\t}\n\n\n\t/**\n\t * Validate input based on required, pattern, etc.\n\t * This mimics native validation behavior\n\t */\n\tprivate validateInput(forceValidation = false) {\n\t\t// Skip validation for disabled inputs\n\t\tif (this.disabled) return\n\n\t\t// Only show validation errors if we should based on the validation strategy\n\t\tconst shouldValidate = this.shouldShowValidation(forceValidation)\n\n\t\t// Get validity state from internal input if available\n\t\tconst validity: ValidityState = this.inputElement?.validity ?? {\n\t\t\tbadInput: false,\n\t\t\tcustomError: false,\n\t\t\tpatternMismatch: false,\n\t\t\trangeOverflow: false,\n\t\t\trangeUnderflow: false,\n\t\t\tstepMismatch: false,\n\t\t\ttooLong: false,\n\t\t\ttooShort: false,\n\t\t\ttypeMismatch: false,\n\t\t\tvalid: true,\n\t\t\tvalueMissing: false,\n\t\t}\n\n\t\t// Check if the input has an actual validation error (not a custom error)\n\t\tconst hasError = !validity.valid && !validity.customError\n\n\t\tif (shouldValidate && hasError) {\n\t\t\t// There's an error and we should show it\n\t\t\tthis.error = true\n\t\t\tthis.validationMessage = this.inputElement?.validationMessage || ''\n\t\t} else if (validity.valid) {\n\t\t\t// Input is valid, so clear the error state\n\t\t\tthis.error = false\n\n\t\t\t// Only clear validation message if there's no custom error\n\t\t\tif (!validity.customError) {\n\t\t\t\tthis.validationMessage = ''\n\t\t\t}\n\t\t} else if (!shouldValidate) {\n\t\t\t// We shouldn't show validation yet, so clear visual error state\n\t\t\tthis.error = false\n\t\t}\n\n\t\t// The mixin will handle updating internals based on error state\n\t}\n\n\t/**\n\t * Check validity without showing validation UI\n\t */\n\tpublic override checkValidity() {\n\t\t// Check internal input first\n\t\tconst inputValid = this.inputRef.value?.checkValidity() ?? true\n\n\t\t// Call parent implementation for basic validation\n\t\tconst parentValid = super.checkValidity()\n\n\t\treturn inputValid && parentValid\n\t}\n\n\t/**\n\t * Show validation UI and check validity\n\t */\n\tpublic override reportValidity() {\n\t\t// Mark as touched and submitted to show validation\n\t\tthis.touched = true\n\t\tthis.submitted = true\n\n\t\t// First check using native input\n\t\tconst inputValid = this.inputRef.value?.reportValidity() ?? true\n\n\t\t// Update our component's validation state with force=true\n\t\tthis.validateInput(true)\n\n\t\t// Call parent implementation\n\t\tconst parentValid = super.reportValidity()\n\n\t\treturn inputValid && parentValid\n\t}\n\n\t/**\n\t * Set a custom validation error message\n\t */\n\tpublic override setCustomValidity(message: string) {\n\t\t// Set on the native input\n\t\tif (this.inputRef.value) {\n\t\t\tthis.inputRef.value.setCustomValidity(message)\n\t\t}\n\n\t\t// Call parent implementation\n\t\tsuper.setCustomValidity(message)\n\t\t\n\t\t// Update error state based on validation strategy\n\t\tthis.error = message !== '' && this.shouldShowValidation()\n\t}\n\n\t// ----------------------------\n\t//  E) Lifecycle Hooks & Event Handlers\n\t// ----------------------------\n\tfirstUpdated() {\n\t\t// Autofocus if desired\n\t\tif (this.autofocus) {\n\t\t\t// Use setTimeout to match browser behavior - autofocus happens after initial rendering\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.focus()\n\t\t\t}, 0)\n\t\t}\n\n\t\t// Subscribe to input events\n\t\tthis.setupInputEvents()\n\t\tthis.setupFocusBlurEvents()\n\t\tthis.setupAutofillDetection()\n\t\tthis.setupEnterKeyEvents()\n\t}\n\n\t/**\n\t * Set up input event handling for value changes\n\t */\n\tprivate setupInputEvents() {\n\t\tfromEvent<InputEvent>(this.inputElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => {\n\t\t\t\t\t// Capture all input event properties for complete event forwarding\n\t\t\t\t\tconst inputEvent = ev as InputEvent\n\t\t\t\t\tconst target = ev.target as HTMLInputElement\n\t\t\t\t\treturn {\n\t\t\t\t\t\tvalue: target.value,\n\t\t\t\t\t\tinputType: inputEvent.inputType,\n\t\t\t\t\t\tdata: inputEvent.data,\n\t\t\t\t\t\tisComposing: inputEvent.isComposing,\n\t\t\t\t\t\toriginalEvent: ev,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(eventData => {\n\t\t\t\t// Update component value\n\t\t\t\tthis.value = eventData.value\n\n\t\t\t\t// Mark as dirty when user types\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Fire custom 'input' event with extended details\n\t\t\t\tconst customEvent = new CustomEvent<EventDetails>('input', {\n\t\t\t\t\tdetail: { value: eventData.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\n\t\t\t\t// Add additional properties to match native events more closely\n\t\t\t\tObject.defineProperties(customEvent, {\n\t\t\t\t\tinputType: { value: eventData.inputType },\n\t\t\t\t\tdata: { value: eventData.data },\n\t\t\t\t\tisComposing: { value: eventData.isComposing },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(customEvent)\n\n\t\t\t\t// REMOVED: Duplicate change event dispatch that was here\n\t\t\t\t// Run validation like native inputs do on input, but respect the validation strategy\n\t\t\t\tthis.validateInput()\n\t\t\t})\n\n\t\t// Subscribe to native change events (usually on blur)\n\t\tfromEvent<Event>(this.inputElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => (ev.target as HTMLInputElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Fire regular change event using mixin helper\n\t\t\t\tthis.emitChange({ value })\n\n\t\t\t\t// Run validation on change like native inputs\n\t\t\t\tthis.validateInput()\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up focus/blur event handling\n\t */\n\tprivate setupFocusBlurEvents() {\n\t\tfromEvent<FocusEvent>(this.inputElement, 'focus')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(ev => {\n\t\t\t\t// Create a custom focus event that includes standard props\n\t\t\t\tconst focusEvent = new CustomEvent('focus', {\n\t\t\t\t\tbubbles: ev.bubbles,\n\t\t\t\t\tcancelable: ev.cancelable,\n\t\t\t\t\tcomposed: ev.composed,\n\t\t\t\t})\n\n\t\t\t\t// Add focus-specific properties\n\t\t\t\tObject.defineProperties(focusEvent, {\n\t\t\t\t\trelatedTarget: { value: ev.relatedTarget },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(focusEvent)\n\t\t\t})\n\n\t\tfromEvent<FocusEvent>(this.inputElement, 'blur')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(ev => {\n\t\t\t\t// Mark as touched when field loses focus\n\t\t\t\tthis.touched = true\n\n\t\t\t\t// Run validation on blur like native inputs, respecting validation strategy\n\t\t\t\tif (!this.disabled) {\n\t\t\t\t\tthis.validateInput()\n\t\t\t\t}\n\n\t\t\t\t// Create a custom blur event that includes standard props\n\t\t\t\tconst blurEvent = new CustomEvent('blur', {\n\t\t\t\t\tbubbles: ev.bubbles,\n\t\t\t\t\tcancelable: ev.cancelable,\n\t\t\t\t\tcomposed: ev.composed,\n\t\t\t\t})\n\n\t\t\t\t// Add blur-specific properties\n\t\t\t\tObject.defineProperties(blurEvent, {\n\t\t\t\t\trelatedTarget: { value: ev.relatedTarget },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(blurEvent)\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up autofill detection\n\t */\n\tprivate setupAutofillDetection() {\n\t\t// Detect autofill animation (Chrome, etc.)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillStart'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.isAutofilled = true\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Dispatch autofill event for integration with autofill systems\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('autofill', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\n\t\t\t\t// Also propagate as a change event like browsers do\n\t\t\t\tthis.emitChange({ value })\n\t\t\t})\n\n\t\t// Detect end of autofill (Chrome)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillCancel'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.isAutofilled = false\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up enter key event handling\n\t */\n\tprivate setupEnterKeyEvents() {\n\t\t// Listen for Enter on keydown\n\t\tfromEvent<KeyboardEvent>(this.inputElement, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.key === 'Enter'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\t\n\t\t\t\t// Update value if changed\n\t\t\t\tif (this.value !== value) {\n\t\t\t\t\tthis.value = value\n\t\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Blur the input to trigger change event naturally\n\t\t\t\t// This mimics what happens when you tab out of the field\n\t\t\t\tthis.inputElement.blur()\n\n\t\t\t\t// Dispatch enhanced enter event\n\t\t\t\tconst enterEvent = new CustomEvent<EventDetails>('enter', {\n\t\t\t\t\tdetail: { value: this.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\n\t\t\t\t// Add extra keyboard event props\n\t\t\t\tObject.defineProperties(enterEvent, {\n\t\t\t\t\tkey: { value: 'Enter' },\n\t\t\t\t\tcode: { value: 'Enter' },\n\t\t\t\t\tkeyCode: { value: 13 },\n\t\t\t\t\twhich: { value: 13 },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(enterEvent)\n\t\t\t})\n\t}\n\n\t// ----------------------------\n\t//  F) Utility Methods\n\t// ----------------------------\n\t/** Selects all text within the input. */\n\tpublic select() {\n\t\treturn this.inputRef.value?.select()\n\t}\n\n\t/** Returns the native validity state of the inner <input>. */\n\tpublic getValidity(): ValidityState | undefined {\n\t\treturn this.inputRef.value?.validity\n\t}\n\n\t/**\n\t * Sets the selection range. Mirrors native input.setSelectionRange\n\t */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.inputRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/**\n\t * Returns the selected text within the input (start position)\n\t */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.inputRef.value?.selectionStart ?? null\n\t}\n\n\t/**\n\t * Returns the selected text within the input (end position)\n\t */\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.inputRef.value?.selectionEnd ?? null\n\t}\n\n\t/**\n\t * Returns the direction of selection\n\t */\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.inputRef.value?.selectionDirection ?? null\n\t}\n\n\t/**\n\t * Sets the range of text to be selected.\n\t */\n\tpublic setRangeText(\n\t\treplacement: string,\n\t\tstart?: number,\n\t\tend?: number,\n\t\tselectMode?: 'select' | 'start' | 'end' | 'preserve',\n\t) {\n\t\tif (start !== undefined && end !== undefined) {\n\t\t\tthis.inputRef.value?.setRangeText(replacement, start, end, selectMode)\n\t\t} else {\n\t\t\tthis.inputRef.value?.setRangeText(replacement)\n\t\t}\n\t}\n\n\t/**\n\t * Override to forward focus to the internal <input>.\n\t * Also dispatch a 'focus' event for external listeners.\n\t */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.inputRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\t/**\n\t * Override to forward clicks to the internal <input>.\n\t * Also dispatch a 'click' event for external listeners.\n\t */\n\tpublic override click() {\n\t\tthis.inputRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\t/** Forward blur to the internal <input>. */\n\tpublic override blur() {\n\t\tthis.inputRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\t// ----------------------------\n\t//  G) Rendering\n\t// ----------------------------\n\tprotected override render() {\n\t\t// Determine height and padding based on size\n\t\tconst getHeightAndPadding = () => {\n\t\t\tswitch (this.size) {\n\t\t\t\tcase 'sm':\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '40px',\n\t\t\t\t\t\tpadding: '0 8px',\n\t\t\t\t\t\tfontSize: '0.875rem', // 14px\n\t\t\t\t\t}\n\t\t\t\tcase 'lg':\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '60px',\n\t\t\t\t\t\tpadding: '0 20px',\n\t\t\t\t\t\tfontSize: '1.125rem', // 18px\n\t\t\t\t\t}\n\t\t\t\tcase 'md':\n\t\t\t\tdefault:\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '50px',\n\t\t\t\t\t\tpadding: '0 16px',\n\t\t\t\t\t\tfontSize: '1rem', // 16px\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst { height, padding, fontSize } = getHeightAndPadding()\n\n\t\t// Check if it's a date-type input\n\t\tconst isDateType = ['date', 'datetime-local', 'time', 'month', 'week'].includes(this.type)\n\n\t\tconst inputClasses = {\n\t\t\t// Base styles\n\t\t\t'block w-full min-w-0 rounded-[8px] border-0 bg-surface-highest text-surface-on': true,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles - consistent approach\n\t\t\t'ring-0 ring-inset focus:ring-1 focus:ring-inset': true,\n\t\t\t// Ring colors based on error state (consistent with textarea)\n\t\t\t'ring-primary-default ring-outline focus:ring-primary-default': !this.error,\n\t\t\t'ring-error-default focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t'cursor-pointer': this.clickable,\n\t\t\t// Text alignment (date inputs always left-aligned)\n\t\t\t'text-left': this.align === 'left' || isDateType,\n\t\t\t'text-center': this.align === 'center' && !isDateType,\n\t\t\t'text-right': this.align === 'right' && !isDateType,\n\t\t\t// Autofill\n\t\t\tautofilled: this.isAutofilled,\n\t\t}\n\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-sm': this.size === 'sm',\n\t\t\t'text-base': this.size === 'md',\n\t\t\t'text-lg': this.size === 'lg',\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\n\t\tconst styles = {\n\t\t\theight,\n\t\t\tpadding,\n\t\t\tfontSize,\n\t\t\t// Ensure vertical centering for all input types\n\t\t\tlineHeight: height,\n\t\t}\n\n\t\t/**\n\t\t * - If `this.label` is present, we render a proper `<label for=\"${this.id}\">`.\n\t\t * - If not, we add an aria-label to the <input> for better accessibility.\n\t\t * - If there's a `hint`, we reference it via aria-describedby.\n\t\t * - If there's an error, we set aria-invalid and could set aria-errormessage.\n\t\t */\n\t\treturn html`\n\t\t\t<div class=\"w-full min-w-0 ${isDateType ? 'date-input-container' : ''}\">\n\t\t\t\t${when(\n\t\t\t\t\tthis.label,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=${this.id}\n\t\t\t\t\t\t\tclass=${this.classMap(labelClasses)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.label}\n\t\t\t\t\t\t</label>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<input\n\t\t\t\t\t${ref(this.inputRef)}\n\t\t\t\t\tid=${this.id}\n\t\t\t\t\tname=${this.name}\n\t\t\t\t\tclass=${this.classMap(inputClasses)}\n\t\t\t\t\tstyle=${this.styleMap(styles)}\n\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t.type=${this.type}\n\t\t\t\t\t.autocomplete=${this.autocomplete}\n\t\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\t\tplaceholder=${this.placeholder}\n\t\t\t\t\tinputmode=${ifDefined(this.inputmode)}\n\t\t\t\t\tpattern=${ifDefined(this.pattern)}\n\t\t\t\t\tstep=${ifDefined(this.step)}\n\t\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t\tmin=${ifDefined(this.min)}\n\t\t\t\t\tmax=${ifDefined(this.max)}\n\t\t\t\t\tlist=${ifDefined(this.list)}\n\t\t\t\t\t?required=${this.required}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t?readonly=${this.readonly}\n\t\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t\taria-labelledby=${this.label ? `label-${this.id}` : nothing}\n\t\t\t\t\taria-describedby=\"hint-${this.id}\"\n\t\t\t\t\taria-label=${ifDefined(!this.label ? this.placeholder || 'Input' : undefined)}\n\t\t\t\t/>\n\n\t\t\t\t<!-- Always render the hint/error container to prevent layout shift -->\n\t\t\t\t<div\n\t\t\t\t\tid=\"hint-${this.id}\"\n\t\t\t\t\tclass=\"hint-container mt-1 text-sm min-h-[1.25rem] ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t>\n\t\t\t\t\t${this.error && this.validationMessage\n\t\t\t\t\t\t? html`<span class=\"error-message\">${this.validationMessage}</span>`\n\t\t\t\t\t\t: this.hint\n\t\t\t\t\t\t? html`<span class=\"hint-message\">${this.hint}</span>`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n/**\n * Register the component with the legacy tag name for backward compatibility\n * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)\n * @prop {boolean} required - Whether the field is required (inherited from FormFieldMixin)\n * @prop {boolean} disabled - Whether the field is disabled (inherited from FormFieldMixin)\n * @prop {boolean} readonly - Whether the field is read-only (inherited from FormFieldMixin)\n * @prop {boolean} error - Whether the field is in an error state (inherited from FormFieldMixin)\n * @prop {string} validationMessage - The validation message to display (inherited from FormFieldMixin)\n * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)\n */\n@customElement('sch-input')\nexport class SchmancyInputCompat extends SchmancyInput {}\n"],"names":["SchmancyInput","SchmancyFormField","constructor","super","arguments","this","value","type","placeholder","clickable","spellcheck","align","autofocus","autocomplete","tabIndex","size","validateOn","inputRef","createRef","isAutofilled","touched","dirty","submitted","defaultValue","changedProps","id","_idCounter","willUpdate","updated","has","validateInput","hasUpdated","connectedCallback","setupFormIntegration","setupExternalLabelAssociation","form","formResetObserver","MutationObserver","mutations","mutation","attributeName","resetToDefault","observe","attributes","childList","subtree","addEventListener","setupLabelClickListener","document","querySelectorAll","forEach","label","focus","readyState","disconnectedCallback","disconnect","removeEventListener","error","validationMessage","dispatchEvent","CustomEvent","bubbles","forceValidation","disabled","shouldValidate","shouldShowValidation","validity","inputElement","customError","valid","hasError","checkValidity","inputValid","parentValid","reportValidity","message","setCustomValidity","firstUpdated","setTimeout","setupInputEvents","setupFocusBlurEvents","setupAutofillDetection","setupEnterKeyEvents","fromEvent","pipe","map","ev","inputEvent","target","inputType","data","isComposing","originalEvent","takeUntil","disconnecting","subscribe","eventData","customEvent","detail","composed","Object","defineProperties","distinctUntilChanged","emitChange","focusEvent","cancelable","relatedTarget","blurEvent","filter","animationName","key","blur","enterEvent","code","keyCode","which","select","getValidity","start","end","direction","setSelectionRange","selectionStart","selectionEnd","selectionDirection","replacement","selectMode","setRangeText","options","Event","click","render","height","padding","fontSize","getHeightAndPadding","isDateType","includes","inputClasses","readonly","autofilled","labelClasses","styles","lineHeight","html","when","classMap","ref","name","styleMap","ifDefined","inputmode","pattern","step","minlength","maxlength","min","max","list","required","nothing","hint","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","property","String","reflect","prototype","Boolean","Number","query","state","customElement","SchmancyInputCompat"],"mappings":"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"}

package/dist/{input-rNxC53BQ.js → input-J4PZ5mx6.js}

@@ -1,20 +1,20 @@
-import { nothing as b, html as m, LitElement as x } from "lit";
-import { property as a, query as k, state as c, customElement as w } from "lit/decorators.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
-import { createRef as E, ref as $ } from "lit/directives/ref.js";
-import { when as y } from "lit/directives/when.js";
-import { fromEvent as p, map as v, takeUntil as d, distinctUntilChanged as R, filter as f } from "rxjs";
+import { nothing as b, html as m, LitElement as w } from "lit";
+import { property as a, query as x, state as c, customElement as g } from "lit/decorators.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+import { createRef as k, ref as E } from "lit/directives/ref.js";
+import { when as $ } from "lit/directives/when.js";
+import { fromEvent as p, map as y, takeUntil as u, distinctUntilChanged as R, filter as f } from "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import "./tailwind.mixin-BTGoGfEI.js";
-import { S } from "./formField.mixin-bSNupTkm.js";
+import "./tailwind.mixin-CzyZKLbe.js";
+import { S } from "./formField.mixin-eghJlAGk.js";
 var C = Object.defineProperty, V = Object.getOwnPropertyDescriptor, s = (t, e, n, r) => {
-  for (var u, l = r > 1 ? void 0 : r ? V(e, n) : e, h = t.length - 1; h >= 0; h--) (u = t[h]) && (l = (r ? u(e, n, l) : u(l)) || l);
-  return r && l && C(e, n, l), l;
+  for (var d, o = r > 1 ? void 0 : r ? V(e, n) : e, h = t.length - 1; h >= 0; h--) (d = t[h]) && (o = (r ? d(e, n, o) : d(o)) || o);
+  return r && o && C(e, n, o), o;
 };
-let i = class extends S("/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */:host{width:100%;min-width:calc(var(--spacing,.25rem)*0);box-sizing:border-box;max-width:100%;display:block}.date-input-container{width:100%;min-width:0;width:100%!important;max-width:100%!important}input{appearance:none;border-radius:8px;width:-webkit-fill-available;font-size:16px}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:calc(var(--spacing,.25rem)*0)}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:calc(var(--spacing,.25rem)*0)}input[type=number]{appearance:textfield}input:-webkit-autofill{animation-name:onAutoFillStart;-webkit-box-shadow:0 0 0 30px var(--schmancy-sys-color-surface-highest)inset!important;-webkit-text-fill-color:var(--schmancy-sys-color-surface-on)!important}input:autofill{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;width:100%;line-height:inherit;border-radius:8px;min-width:100%;max-width:100%;margin:0;display:block;overflow:hidden;border-radius:8px!important;width:100%!important}input::-webkit-datetime-edit{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit-fields-wrapper{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit{flex:1;width:100%}input::-webkit-datetime-edit-fields-wrapper{flex:1;justify-content:space-between;width:100%}input::-webkit-datetime-edit-text{align-items:center;display:flex}input::-webkit-datetime-edit-day-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-month-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-year-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-hour-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-minute-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-second-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-millisecond-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-meridiem-field{flex-shrink:0;padding:0 2px}input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=month]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=week]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}@-moz-document url-prefix(){input[type=date],input[type=datetime-local],input[type=time]{min-height:inherit}}@supports (-webkit-touch-callout:none){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;border-radius:0;width:-webkit-fill-available!important;width:fill-available!important;padding-left:12px!important;padding-right:12px!important}input::-webkit-datetime-edit{width:100%!important;padding-left:0!important;padding-right:0!important}input::-webkit-datetime-edit-fields-wrapper{width:100%!important;margin:0!important;padding:0!important}}") {
+let i = class extends S("/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */:host{width:100%;min-width:calc(var(--spacing,.25rem)*0);box-sizing:border-box;max-width:100%;display:block}.date-input-container{width:100%;min-width:0;width:100%!important;max-width:100%!important}input{appearance:none;border-radius:8px;width:-webkit-fill-available;font-size:16px}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:calc(var(--spacing,.25rem)*0)}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:calc(var(--spacing,.25rem)*0)}input[type=number]{appearance:textfield}input:-webkit-autofill{animation-name:onAutoFillStart;-webkit-box-shadow:0 0 0 30px var(--schmancy-sys-color-surface-highest)inset!important;-webkit-text-fill-color:var(--schmancy-sys-color-surface-on)!important}input:autofill{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;width:100%;line-height:inherit;border-radius:8px;min-width:100%;max-width:100%;margin:0;display:block;overflow:hidden;border-radius:8px!important;width:100%!important}input::-webkit-datetime-edit{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit-fields-wrapper{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit{flex:1;width:100%}input::-webkit-datetime-edit-fields-wrapper{flex:1;justify-content:space-between;width:100%}input::-webkit-datetime-edit-text{align-items:center;display:flex}input::-webkit-datetime-edit-day-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-month-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-year-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-hour-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-minute-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-second-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-millisecond-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-meridiem-field{flex-shrink:0;padding:0 2px}input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=month]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=week]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}@-moz-document url-prefix(){input[type=date],input[type=datetime-local],input[type=time]{min-height:inherit}}@supports (-webkit-touch-callout:none){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;border-radius:0;width:-webkit-fill-available!important;width:fill-available!important;padding-left:12px!important;padding-right:12px!important}input::-webkit-datetime-edit{width:100%!important;padding-left:0!important;padding-right:0!important}input::-webkit-datetime-edit-fields-wrapper{width:100%!important;margin:0!important;padding:0!important}}.hint-container{min-height:1.25rem;transition:color .2s ease-in-out;display:block}.hint-container .error-message,.hint-container .hint-message{animation:.2s ease-in-out fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}input{transition:box-shadow .15s ease-in-out,border-color .15s ease-in-out}input.ring-primary-default{box-shadow:0 0 0 1px var(--schmancy-sys-color-outline)}input:focus.ring-primary-default{box-shadow:0 0 0 1px var(--schmancy-sys-color-primary-default)}input.ring-error-default,input:focus.ring-error-default{box-shadow:0 0 0 1px var(--schmancy-sys-color-error-default)}") {
   constructor() {
-    super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.clickable = !1, this.spellcheck = !1, this.align = "left", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.size = "md", this.validateOn = "touched", this.inputRef = E(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "";
+    super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.clickable = !1, this.spellcheck = !1, this.align = "left", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.size = "md", this.validateOn = "touched", this.inputRef = k(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "";
   }
   willUpdate(t) {
     this.id || (this.id = "sch-input-" + i._idCounter++), super.willUpdate(t);
@@ -95,37 +95,37 @@ let i = class extends S("/*! tailwindcss v4.1.11 | MIT License | https://tailwin
     }, 0), this.setupInputEvents(), this.setupFocusBlurEvents(), this.setupAutofillDetection(), this.setupEnterKeyEvents();
   }
   setupInputEvents() {
-    p(this.inputElement, "input").pipe(v((t) => {
+    p(this.inputElement, "input").pipe(y((t) => {
       const e = t;
       return { value: t.target.value, inputType: e.inputType, data: e.data, isComposing: e.isComposing, originalEvent: t };
-    }), d(this.disconnecting)).subscribe((t) => {
+    }), u(this.disconnecting)).subscribe((t) => {
       this.value = t.value, this.dirty = this.value !== this.defaultValue;
       const e = new CustomEvent("input", { detail: { value: t.value }, bubbles: !0, composed: !0 });
       Object.defineProperties(e, { inputType: { value: t.inputType }, data: { value: t.data }, isComposing: { value: t.isComposing } }), this.dispatchEvent(e), this.validateInput();
-    }), p(this.inputElement, "change").pipe(v((t) => t.target.value), R(), d(this.disconnecting)).subscribe((t) => {
+    }), p(this.inputElement, "change").pipe(y((t) => t.target.value), R(), u(this.disconnecting)).subscribe((t) => {
       this.value = t, this.dirty = this.value !== this.defaultValue, this.emitChange({ value: t }), this.validateInput();
     });
   }
   setupFocusBlurEvents() {
-    p(this.inputElement, "focus").pipe(d(this.disconnecting)).subscribe((t) => {
+    p(this.inputElement, "focus").pipe(u(this.disconnecting)).subscribe((t) => {
       const e = new CustomEvent("focus", { bubbles: t.bubbles, cancelable: t.cancelable, composed: t.composed });
       Object.defineProperties(e, { relatedTarget: { value: t.relatedTarget } }), this.dispatchEvent(e);
-    }), p(this.inputElement, "blur").pipe(d(this.disconnecting)).subscribe((t) => {
+    }), p(this.inputElement, "blur").pipe(u(this.disconnecting)).subscribe((t) => {
       this.touched = !0, this.disabled || this.validateInput();
       const e = new CustomEvent("blur", { bubbles: t.bubbles, cancelable: t.cancelable, composed: t.composed });
       Object.defineProperties(e, { relatedTarget: { value: t.relatedTarget } }), this.dispatchEvent(e);
     });
   }
   setupAutofillDetection() {
-    p(this.inputElement, "animationstart").pipe(f((t) => t.animationName === "onAutoFillStart"), d(this.disconnecting)).subscribe((t) => {
+    p(this.inputElement, "animationstart").pipe(f((t) => t.animationName === "onAutoFillStart"), u(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.isAutofilled = !0, this.dirty = this.value !== this.defaultValue, this.dispatchEvent(new CustomEvent("autofill", { detail: { value: e }, bubbles: !0, composed: !0 })), this.emitChange({ value: e });
-    }), p(this.inputElement, "animationstart").pipe(f((t) => t.animationName === "onAutoFillCancel"), d(this.disconnecting)).subscribe(() => {
+    }), p(this.inputElement, "animationstart").pipe(f((t) => t.animationName === "onAutoFillCancel"), u(this.disconnecting)).subscribe(() => {
       this.isAutofilled = !1;
     });
   }
   setupEnterKeyEvents() {
-    p(this.inputElement, "keydown").pipe(f((t) => t.key === "Enter"), d(this.disconnecting)).subscribe((t) => {
+    p(this.inputElement, "keydown").pipe(f((t) => t.key === "Enter"), u(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value !== e && (this.value = e, this.dirty = this.value !== this.defaultValue), this.inputElement.blur();
       const n = new CustomEvent("enter", { detail: { value: this.value }, bubbles: !0, composed: !0 });
@@ -172,65 +172,64 @@ let i = class extends S("/*! tailwindcss v4.1.11 | MIT License | https://tailwin
         default:
           return { height: "50px", padding: "0 16px", fontSize: "1rem" };
       }
-    })(), r = ["date", "datetime-local", "time", "month", "week"].includes(this.type), u = { "block w-full min-w-0 rounded-[8px] border-0 bg-surface-highest text-surface-on": !0, "outline-secondary-default focus:outline-1": !0, "disabled:opacity-40 disabled:cursor-not-allowed": !0, "placeholder:text-muted": !0, "ring-0 ring-inset focus:ring-1 focus:ring-inset": !0, "ring-secondary-default ring-outline focus:ring-secondary-default": !this.error, "ring-error-default focus:ring-error-default": this.error, "caret-transparent focus:outline-hidden cursor-pointer select-none": this.readonly, "cursor-pointer": this.clickable, "text-left": this.align === "left" || r, "text-center": this.align === "center" && !r, "text-right": this.align === "right" && !r, autofilled: this.isAutofilled }, l = { "block mb-1 font-medium": !0, "opacity-40": this.disabled, "text-sm": this.size === "sm", "text-base": this.size === "md", "text-lg": this.size === "lg", "text-primary-default": !this.error, "text-error-default": this.error }, h = { height: t, padding: e, fontSize: n, lineHeight: t };
+    })(), r = ["date", "datetime-local", "time", "month", "week"].includes(this.type), d = { "block w-full min-w-0 rounded-[8px] border-0 bg-surface-highest text-surface-on": !0, "outline-secondary-default focus:outline-1": !0, "disabled:opacity-40 disabled:cursor-not-allowed": !0, "placeholder:text-muted": !0, "ring-0 ring-inset focus:ring-1 focus:ring-inset": !0, "ring-primary-default ring-outline focus:ring-primary-default": !this.error, "ring-error-default focus:ring-error-default": this.error, "caret-transparent focus:outline-hidden cursor-pointer select-none": this.readonly, "cursor-pointer": this.clickable, "text-left": this.align === "left" || r, "text-center": this.align === "center" && !r, "text-right": this.align === "right" && !r, autofilled: this.isAutofilled }, o = { "block mb-1 font-medium": !0, "opacity-40": this.disabled, "text-sm": this.size === "sm", "text-base": this.size === "md", "text-lg": this.size === "lg", "text-primary-default": !this.error, "text-error-default": this.error }, h = { height: t, padding: e, fontSize: n, lineHeight: t };
     return m`
 			<div class="w-full min-w-0 ${r ? "date-input-container" : ""}">
-				${y(this.label, () => m`
+				${$(this.label, () => m`
 						<label
 							for=${this.id}
-							class=${this.classMap(l)}
+							class=${this.classMap(o)}
 						>
 							${this.label}
 						</label>
 					`)}
 
 				<input
-					${$(this.inputRef)}
+					${E(this.inputRef)}
 					id=${this.id}
 					name=${this.name}
-					class=${this.classMap(u)}
+					class=${this.classMap(d)}
 					style=${this.styleMap(h)}
 					.value=${this.value}
 					.type=${this.type}
 					.autocomplete=${this.autocomplete}
 					.spellcheck=${this.spellcheck}
 					placeholder=${this.placeholder}
-					inputmode=${o(this.inputmode)}
-					pattern=${o(this.pattern)}
-					step=${o(this.step)}
-					minlength=${o(this.minlength)}
-					maxlength=${o(this.maxlength)}
-					min=${o(this.min)}
-					max=${o(this.max)}
-					list=${o(this.list)}
+					inputmode=${l(this.inputmode)}
+					pattern=${l(this.pattern)}
+					step=${l(this.step)}
+					minlength=${l(this.minlength)}
+					maxlength=${l(this.maxlength)}
+					min=${l(this.min)}
+					max=${l(this.max)}
+					list=${l(this.list)}
 					?required=${this.required}
 					?disabled=${this.disabled}
 					?readonly=${this.readonly}
 					aria-invalid=${this.error ? "true" : "false"}
 					aria-required=${this.required ? "true" : "false"}
 					aria-labelledby=${this.label ? `label-${this.id}` : b}
-					aria-describedby=${this.hint || this.validationMessage ? `hint-${this.id}` : b}
-					aria-label=${o(this.label ? void 0 : this.placeholder || "Input")}
+					aria-describedby="hint-${this.id}"
+					aria-label=${l(this.label ? void 0 : this.placeholder || "Input")}
 				/>
 
-				${y(this.hint || this.error && this.validationMessage, () => m`
-						<div
-							id="hint-${this.id}"
-							class="mt-1 text-sm ${this.error ? "text-error-default" : "text-surface-onVariant"}"
-						>
-							${this.error && this.validationMessage ? this.validationMessage : this.hint}
-						</div>
-					`)}
+				<!-- Always render the hint/error container to prevent layout shift -->
+				<div
+					id="hint-${this.id}"
+					class="hint-container mt-1 text-sm min-h-[1.25rem] ${this.error ? "text-error-default" : "text-surface-onVariant"}"
+				>
+					${this.error && this.validationMessage ? m`<span class="error-message">${this.validationMessage}</span>` : this.hint ? m`<span class="hint-message">${this.hint}</span>` : b}
+				</div>
 			</div>
 		`;
   }
 };
-i._idCounter = 0, i.shadowRootOptions = { ...x.shadowRootOptions, delegatesFocus: !0 }, s([a({ type: String, reflect: !0 })], i.prototype, "value", 2), s([a({ reflect: !0 })], i.prototype, "type", 2), s([a()], i.prototype, "placeholder", 2), s([a({ type: String, reflect: !0 })], i.prototype, "pattern", 2), s([a({ type: Boolean, reflect: !0 })], i.prototype, "clickable", 2), s([a({ type: Boolean, reflect: !0 })], i.prototype, "spellcheck", 2), s([a({ type: String, reflect: !0 })], i.prototype, "align", 2), s([a()], i.prototype, "inputmode", 2), s([a({ type: Number, reflect: !0 })], i.prototype, "minlength", 2), s([a({ type: Number })], i.prototype, "maxlength", 2), s([a()], i.prototype, "min", 2), s([a()], i.prototype, "max", 2), s([a({ type: Number, reflect: !0 })], i.prototype, "step", 2), s([a({ type: Boolean })], i.prototype, "autofocus", 2), s([a({ type: String, reflect: !0 })], i.prototype, "autocomplete", 2), s([a({ type: Number, reflect: !0 })], i.prototype, "tabIndex", 2), s([a({ type: String, reflect: !0 })], i.prototype, "size", 2), s([a({ type: String })], i.prototype, "validateOn", 2), s([a({ type: String })], i.prototype, "list", 2), s([k("input")], i.prototype, "inputElement", 2), s([c()], i.prototype, "isAutofilled", 2), s([c()], i.prototype, "touched", 2), s([c()], i.prototype, "dirty", 2), s([c()], i.prototype, "submitted", 2), s([c()], i.prototype, "defaultValue", 2), i = s([w("schmancy-input")], i);
-let g = class extends i {
+i._idCounter = 0, i.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 }, s([a({ type: String, reflect: !0 })], i.prototype, "value", 2), s([a({ reflect: !0 })], i.prototype, "type", 2), s([a()], i.prototype, "placeholder", 2), s([a({ type: String, reflect: !0 })], i.prototype, "pattern", 2), s([a({ type: Boolean, reflect: !0 })], i.prototype, "clickable", 2), s([a({ type: Boolean, reflect: !0 })], i.prototype, "spellcheck", 2), s([a({ type: String, reflect: !0 })], i.prototype, "align", 2), s([a()], i.prototype, "inputmode", 2), s([a({ type: Number, reflect: !0 })], i.prototype, "minlength", 2), s([a({ type: Number })], i.prototype, "maxlength", 2), s([a()], i.prototype, "min", 2), s([a()], i.prototype, "max", 2), s([a({ type: Number, reflect: !0 })], i.prototype, "step", 2), s([a({ type: Boolean })], i.prototype, "autofocus", 2), s([a({ type: String, reflect: !0 })], i.prototype, "autocomplete", 2), s([a({ type: Number, reflect: !0 })], i.prototype, "tabIndex", 2), s([a({ type: String, reflect: !0 })], i.prototype, "size", 2), s([a({ type: String })], i.prototype, "validateOn", 2), s([a({ type: String })], i.prototype, "list", 2), s([x("input")], i.prototype, "inputElement", 2), s([c()], i.prototype, "isAutofilled", 2), s([c()], i.prototype, "touched", 2), s([c()], i.prototype, "dirty", 2), s([c()], i.prototype, "submitted", 2), s([c()], i.prototype, "defaultValue", 2), i = s([g("schmancy-input")], i);
+let v = class extends i {
 };
-g = s([w("sch-input")], g);
+v = s([g("sch-input")], v);
 export {
   i as S,
-  g as a
+  v as a
 };
-//# sourceMappingURL=input-rNxC53BQ.js.map
+//# sourceMappingURL=input-J4PZ5mx6.js.map