@sandlada/mdc/build/components/field/internal/base-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{queryAssignedElements as n}from"../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.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{classMap as o}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as s}from"../../../utils/behaviors/element-internals.js";import{composeMixin as c}from"../../../utils/compose-mixin/compose-mixin.js";import l from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as u}from"../../../utils/aria/delegate.js";import{mixinFocusRingOptions as d}from"../../focus-ring/focus-ring-options.mixin.js";import{fieldStyles as f}from"../field.style.js";import{FIELD_LABEL_POINTER_EVENT as p}from"../field.interface.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var m=class extends c(u,s,d)(a){constructor(...e){super(...e),this.variant=`filled`,this.label=``,this.supportingText=``,this.errorText=``,this.prefixText=``,this.suffixText=``,this.counterText=``,this.disabled=!1,this.required=!1,this.noAsterisk=!1,this.populated=!1,this.focused=!1,this.invalid=!1,this.floatingLabelBehavior=`auto`,this.alignEnd=!1,this.multiline=!1,this.resizable=!1,this.hasLeadingIcon=!1,this.hasTrailingIcon=!1,this.hasPrefix=!1,this.hasSuffix=!1,this.hasSupportingText=!1,this.hasErrorText=!1,this.hasCounter=!1,this.handleLeadingIconSlotChange=()=>{this.hasLeadingIcon=this.assignedLeadingIcons.length>0},this.handleTrailingIconSlotChange=()=>{this.hasTrailingIcon=this.assignedTrailingIcons.length>0},this.handlePrefixSlotChange=()=>{this.hasPrefix=this.assignedPrefixElements.length>0},this.handleSuffixSlotChange=()=>{this.hasSuffix=this.assignedSuffixElements.length>0},this.handleDefaultSlotChange=e=>{},this.handleSupportingTextSlotChange=()=>{this.hasSupportingText=this.assignedSupportingTextElements.length>0},this.handleErrorTextSlotChange=()=>{this.hasErrorText=this.assignedErrorTextElements.length>0},this.handleCounterSlotChange=()=>{this.hasCounter=this.assignedCounterElements.length>0},this.handleContainerClick=e=>{let t=e.target;if(t.closest(`slot[name="trailing-icon"]`)||t.closest(`slot[name="leading-icon"]`))return;let n=this.getDefaultSlotFocusable();n&&document.activeElement!==n&&n.focus()},this.handleLabelClick=e=>{this.dispatchEvent(new Event(p,{bubbles:!0,composed:!0}));let t=this.getDefaultSlotFocusable();t&&t.focus(),e.preventDefault()}}static{this.styles=f}get shouldLabelFloat(){return this.label?this.floatingLabelBehavior===`always`?!0:this.floatingLabelBehavior===`never`?!1:this.focused||this.populated:!1}getRenderClasses(){let e=this.shouldLabelFloat,t=this.invalid&&(this.errorText.length>0||this.hasErrorText),n=this.supportingText.length>0||this.hasSupportingText,r=this.counterText.length>0||this.hasCounter;return{container:!0,filled:this.variant===`filled`,outlined:this.variant===`outlined`,"has-label":this.label.length>0,"floating-label":e,"resting-label":!e&&this.label.length>0,"has-leading-icon":this.hasLeadingIcon,"has-trailing-icon":this.hasTrailingIcon,"has-prefix":this.hasPrefix||this.prefixText.length>0,"has-suffix":this.hasSuffix||this.suffixText.length>0,"has-supporting-text":n,"has-error-text":t,"has-counter":r,disabled:this.disabled,required:this.required,invalid:this.invalid,focused:this.focused,populated:this.populated,multiline:this.multiline,resizable:this.resizable,"align-end":this.alignEnd}}render(){let e=this.shouldLabelFloat,t=this.invalid&&(this.errorText.length>0||this.hasErrorText),n=this.supportingText.length>0||this.hasSupportingText,a=this.counterText.length>0||this.hasCounter,s=t||n||a;return r`<div class="${o(this.getRenderClasses())}" part="container" @click="${this.handleContainerClick}"><span class="leading" part="leading-icon"><slot name="leading-icon" @slotchange="${this.handleLeadingIconSlotChange}"></slot></span><div class="content" part="content"><span class="prefix" part="prefix"><slot name="prefix" @slotchange="${this.handlePrefixSlotChange}"></slot>${this.prefixText?r`<span class="prefix-text">${this.prefixText}</span>`:i} </span><span class="input" part="input"><slot @slotchange="${this.handleDefaultSlotChange}"></slot></span><span class="suffix" part="suffix">${this.suffixText?r`<span class="suffix-text">${this.suffixText}</span>`:i}<slot name="suffix" @slotchange="${this.handleSuffixSlotChange}"></slot></span></div><span class="trailing" part="trailing-icon"><slot name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}"></slot></span>${this.label?r`<label class="label ${o({floating:e,resting:!e})}" part="label" @click="${this.handleLabelClick}"><span class="label-text">${this.label}</span> ${this.required&&!this.noAsterisk?r`<span class="required-asterisk" aria-hidden="true">*</span>`:i}</label>`:i} ${this.renderFocusRing()}</div>${s?r`<div class="supporting-wrapper" part="supporting-wrapper"><div class="supporting-text" part="supporting-text">${this.invalid&&(this.errorText||this.hasErrorText)?r`<slot name="error-text" @slotchange="${this.handleErrorTextSlotChange}">${this.errorText}</slot>`:r`<slot name="supporting-text" @slotchange="${this.handleSupportingTextSlotChange}">${this.supportingText}</slot>`}</div><div class="counter" part="counter"><slot name="counter" @slotchange="${this.handleCounterSlotChange}">${this.counterText}</slot></div></div>`:i}`}getDefaultSlotFocusable(){let e=this.renderRoot.querySelector(`.input`);if(!e)return null;let t=e.querySelector(`slot:not([name])`);if(!t)return null;let n=t.assignedElements({flatten:!0});for(let e of n)if(e instanceof HTMLElement&&e.tabIndex>=0&&!e.hasAttribute(`disabled`))return e;return null}};l([e({type:String,reflect:!0})],m.prototype,`variant`,void 0),l([e({type:String})],m.prototype,`label`,void 0),l([e({type:String,attribute:`supporting-text`})],m.prototype,`supportingText`,void 0),l([e({type:String,attribute:`error-text`})],m.prototype,`errorText`,void 0),l([e({type:String,attribute:`prefix-text`})],m.prototype,`prefixText`,void 0),l([e({type:String,attribute:`suffix-text`})],m.prototype,`suffixText`,void 0),l([e({type:String,attribute:`counter-text`})],m.prototype,`counterText`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`disabled`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`required`,void 0),l([e({type:Boolean,attribute:`no-asterisk`,reflect:!0})],m.prototype,`noAsterisk`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`populated`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`focused`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`invalid`,void 0),l([e({type:String,attribute:`floating-label-behavior`})],m.prototype,`floatingLabelBehavior`,void 0),l([e({type:Boolean,attribute:`align-end`,reflect:!0})],m.prototype,`alignEnd`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`multiline`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`resizable`,void 0),l([t()],m.prototype,`hasLeadingIcon`,void 0),l([t()],m.prototype,`hasTrailingIcon`,void 0),l([t()],m.prototype,`hasPrefix`,void 0),l([t()],m.prototype,`hasSuffix`,void 0),l([t()],m.prototype,`hasSupportingText`,void 0),l([t()],m.prototype,`hasErrorText`,void 0),l([t()],m.prototype,`hasCounter`,void 0),l([n({slot:`leading-icon`,flatten:!0})],m.prototype,`assignedLeadingIcons`,void 0),l([n({slot:`trailing-icon`,flatten:!0})],m.prototype,`assignedTrailingIcons`,void 0),l([n({slot:`prefix`,flatten:!0})],m.prototype,`assignedPrefixElements`,void 0),l([n({slot:`suffix`,flatten:!0})],m.prototype,`assignedSuffixElements`,void 0),l([n({slot:`supporting-text`,flatten:!0})],m.prototype,`assignedSupportingTextElements`,void 0),l([n({slot:`error-text`,flatten:!0})],m.prototype,`assignedErrorTextElements`,void 0),l([n({slot:`counter`,flatten:!0})],m.prototype,`assignedCounterElements`,void 0);export{m as BaseField};
//# sourceMappingURL=base-field.js.map