@sandlada/mdc/build/components/text-field/internal/base-text-field.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../node_modules/@lit/reactive-element/decorators/state.js";import{query as n}from"../../../node_modules/@lit/reactive-element/decorators/query.js";import"../../../node_modules/lit/decorators.js";import{html as r,nothing as i}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{mixinElementInternals as o}from"../../../utils/behaviors/element-internals.js";import{composeMixin as s}from"../../../utils/compose-mixin/compose-mixin.js";import c from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as l}from"../../../utils/aria/delegate.js";import{mixinFocusRingOptions as u}from"../../focus-ring/focus-ring-options.mixin.js";import{getFormState as d,getFormValue as f,mixinFormAssociated as p}from"../../../utils/form/form-associated.js";import{createValidator as m,getValidityAnchor as h,mixinConstraintValidation as g}from"../../../utils/behaviors/constraint-validation.js";import{redispatchEvent as _}from"../../../utils/event/redispatch-event.js";import"../../field/field.js";import{live as v}from"../../../node_modules/lit-html/directives/live.js";import"../../../node_modules/lit/directives/live.js";import{TextFieldValidator as y}from"../../../utils/behaviors/validators/text-field-validator.js";import{textFieldStyles as b}from"../text-field.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var x=class extends s(l,g,p,o,u)(a){constructor(...e){super(...e),this.variant=`filled`,this.value=``,this.type=`text`,this.label=``,this.placeholder=``,this.supportingText=``,this.errorText=``,this.error=!1,this.prefixText=``,this.suffixText=``,this.required=!1,this.noAsterisk=!1,this.readOnly=!1,this.min=``,this.max=``,this.step=``,this.pattern=``,this.minLength=-1,this.maxLength=-1,this.autocomplete=``,this.autofocus=!1,this.inputMode=``,this.rows=2,this.cols=20,this.clearable=!1,this.counter=!1,this.counterText=``,this.floatingLabelBehavior=`auto`,this.alignEnd=!1,this.autoValidate=!1,this.focused=!1,this.nativeError=!1}static{this.styles=b}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}get focusRingControl(){return this.inputElement??null}focus(e){this.inputElement?.focus(e)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(e,t,n){this.inputElement?.setSelectionRange(e,t,n)}setRangeText(e,t,n,r){this.inputElement&&(t!==void 0&&n!==void 0&&r!==void 0?this.inputElement.setRangeText(e,t,n,r):t!==void 0&&n!==void 0?this.inputElement.setRangeText(e,t,n):this.inputElement.setRangeText(e),this.value=this.inputElement.value)}stepUp(e){this.inputElement instanceof HTMLInputElement&&(this.inputElement.stepUp(e),this.value=this.inputElement.value)}stepDown(e){this.inputElement instanceof HTMLInputElement&&(this.inputElement.stepDown(e),this.value=this.inputElement.value)}showPicker(){this.inputElement instanceof HTMLInputElement&&`showPicker`in this.inputElement&&this.inputElement.showPicker()}reset(){this.value=this.getAttribute(`value`)??``,this.nativeError=!1}get selectionStart(){return this.inputElement?.selectionStart??null}set selectionStart(e){this.inputElement&&(this.inputElement.selectionStart=e)}get selectionEnd(){return this.inputElement?.selectionEnd??null}set selectionEnd(e){this.inputElement&&(this.inputElement.selectionEnd=e)}get selectionDirection(){return this.inputElement?.selectionDirection??null}set selectionDirection(e){this.inputElement&&e&&(this.inputElement.selectionDirection=e)}get valueAsNumber(){return this.inputElement instanceof HTMLInputElement?this.inputElement.valueAsNumber:Number(this.value)}set valueAsNumber(e){this.inputElement instanceof HTMLInputElement&&(this.inputElement.valueAsNumber=e,this.value=this.inputElement.value)}get valueAsDate(){return this.inputElement instanceof HTMLInputElement?this.inputElement.valueAsDate:null}set valueAsDate(e){this.inputElement instanceof HTMLInputElement&&(this.inputElement.valueAsDate=e,this.value=this.inputElement.value)}connectedCallback(){super.connectedCallback(),this.hasAttribute(`value`)&&!this.value&&(this.value=this.getAttribute(`value`)??``)}update(e){e.has(`value`)&&this.inputElement&&this.inputElement.value!==this.value&&(this.inputElement.value=this.value),super.update(e)}[f](){return this.value}[d](){return this.value}formResetCallback(){this.reset()}formStateRestoreCallback(e){this.value=e}formDisabledCallback(e){this.disabled=e}[m](){return new y(()=>({state:this.getValidationState(),renderedControl:this.inputElement}))}[h](){return this.inputElement}getValidationState(){return this.type===`textarea`?{type:`textarea`,value:this.value,required:this.required,minLength:this.minLength,maxLength:this.maxLength}:{type:this.type,value:this.value,required:this.required,pattern:this.pattern,min:this.min,max:this.max,step:this.step,minLength:this.minLength,maxLength:this.maxLength}}isPopulated(){return this.value.length>0||(this.inputElement?.value?.length??0)>0}isInvalid(){return this.error||this.nativeError||this.autoValidate&&!this.validity.valid}getErrorText(){return this.errorText?this.errorText:this.validity.valid?``:this.validationMessage}getComputedCounterText(){return this.counterText?this.counterText:this.counter&&this.maxLength>0?`${this.value.length} / ${this.maxLength}`:this.counter?`${this.value.length}`:``}render(){return r`<mdc-field class="field" part="field" .variant="${this.variant}" .label="${this.label}" .supportingText="${this.supportingText}" .errorText="${this.getErrorText()}" .prefixText="${this.prefixText}" .suffixText="${this.suffixText}" .counterText="${this.getComputedCounterText()}" .disabled="${this.disabled}" .required="${this.required}" .noAsterisk="${this.noAsterisk}" .populated="${this.isPopulated()}" .focused="${this.focused}" .invalid="${this.isInvalid()}" .floatingLabelBehavior="${this.floatingLabelBehavior}" .alignEnd="${this.alignEnd}" .multiline="${this.type===`textarea`}" .resizable="${this.type===`textarea`}"><slot name="leading-icon" slot="leading-icon"></slot><slot name="prefix" slot="prefix"></slot>${this.renderInputOrTextarea()} ${this.clearable&&this.value.length>0&&!this.disabled&&!this.readOnly?r`<span class="clear-button-wrapper" slot="trailing-icon"><button type="button" class="clear-button" aria-label="Clear text" tabindex="-1" @click="${this.handleClearClick}"><svg class="clear-icon" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></button></span>`:i}<slot name="trailing-icon" slot="trailing-icon"></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="counter" slot="counter"></slot></mdc-field>`}renderInputOrTextarea(){let{ariaInvalid:e,ariaLabel:t,ariaAutoComplete:n}=this;return this.type===`textarea`?r`<textarea id="input" class="input" part="input" .value="${v(this.value)}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readOnly}" placeholder="${this.placeholder||i}" minlength="${this.minLength>-1?this.minLength:i}" maxlength="${this.maxLength>-1?this.maxLength:i}" autocomplete="${this.autocomplete||i}" inputmode="${this.inputMode||i}" rows="${this.rows}" cols="${this.cols}" aria-label="${t||this.label||i}" aria-invalid="${e||(this.isInvalid()?`true`:i)}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @select="${this.handleSelect}"></textarea>`:r`<input id="input" class="input" part="input" type="${this.type}" .value="${v(this.value)}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readOnly}" placeholder="${this.placeholder||i}" min="${this.min||i}" max="${this.max||i}" step="${this.step||i}" pattern="${this.pattern||i}" minlength="${this.minLength>-1?this.minLength:i}" maxlength="${this.maxLength>-1?this.maxLength:i}" autocomplete="${this.autocomplete||i}" ?autofocus="${this.autofocus}" inputmode="${this.inputMode||i}" aria-label="${t||this.label||i}" aria-invalid="${e||(this.isInvalid()?`true`:i)}" aria-autocomplete="${n||i}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @select="${this.handleSelect}">`}handleInput(e){let t=e.target;this.value=t.value,this.nativeError=!this.checkValidity()}handleChange(e){let t=e.target;this.value=t.value,this.nativeError=!this.checkValidity(),_(this,e)}handleFocus(){this.focused=!0}handleBlur(){this.focused=!1,this.autoValidate&&(this.nativeError=!this.reportValidity())}handleSelect(e){_(this,e)}handleClearClick(e){e.preventDefault(),e.stopPropagation(),this.value=``,this.nativeError=!1,this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.focus()}};c([e({type:String,reflect:!0})],x.prototype,`variant`,void 0),c([e({type:String})],x.prototype,`value`,void 0),c([e({type:String,reflect:!0})],x.prototype,`type`,void 0),c([e({type:String})],x.prototype,`label`,void 0),c([e({type:String})],x.prototype,`placeholder`,void 0),c([e({type:String,attribute:`supporting-text`})],x.prototype,`supportingText`,void 0),c([e({type:String,attribute:`error-text`})],x.prototype,`errorText`,void 0),c([e({type:Boolean,reflect:!0})],x.prototype,`error`,void 0),c([e({type:String,attribute:`prefix-text`})],x.prototype,`prefixText`,void 0),c([e({type:String,attribute:`suffix-text`})],x.prototype,`suffixText`,void 0),c([e({type:Boolean,reflect:!0})],x.prototype,`required`,void 0),c([e({type:Boolean,attribute:`no-asterisk`,reflect:!0})],x.prototype,`noAsterisk`,void 0),c([e({type:Boolean,attribute:`readonly`,reflect:!0})],x.prototype,`readOnly`,void 0),c([e({type:String})],x.prototype,`min`,void 0),c([e({type:String})],x.prototype,`max`,void 0),c([e({type:String})],x.prototype,`step`,void 0),c([e({type:String})],x.prototype,`pattern`,void 0),c([e({type:Number,attribute:`minlength`})],x.prototype,`minLength`,void 0),c([e({type:Number,attribute:`maxlength`})],x.prototype,`maxLength`,void 0),c([e({type:String})],x.prototype,`autocomplete`,void 0),c([e({type:Boolean,reflect:!0})],x.prototype,`autofocus`,void 0),c([e({type:String,attribute:`inputmode`})],x.prototype,`inputMode`,void 0),c([e({type:Number})],x.prototype,`rows`,void 0),c([e({type:Number})],x.prototype,`cols`,void 0),c([e({type:Boolean,reflect:!0})],x.prototype,`clearable`,void 0),c([e({type:Boolean,reflect:!0})],x.prototype,`counter`,void 0),c([e({type:String,attribute:`counter-text`})],x.prototype,`counterText`,void 0),c([e({type:String,attribute:`floating-label-behavior`})],x.prototype,`floatingLabelBehavior`,void 0),c([e({type:Boolean,attribute:`align-end`,reflect:!0})],x.prototype,`alignEnd`,void 0),c([e({type:Boolean,attribute:`auto-validate`})],x.prototype,`autoValidate`,void 0),c([t()],x.prototype,`focused`,void 0),c([t()],x.prototype,`nativeError`,void 0),c([n(`.input`)],x.prototype,`inputElement`,void 0),c([n(`.field`)],x.prototype,`fieldElement`,void 0);export{x as BaseTextField};
//# sourceMappingURL=base-text-field.js.map