@lmvz-ds/components 0.14.1 → 0.15.2

package/dist/lmvz-components/p-c6bae21b.entry.js

@@ -1 +0,0 @@
-import{g as t,r as e,c as r,h as i}from"./p-smGPjoDX.js";import{c as o}from"./p-BfTCfPZ1.js";import{R as a,A as n}from"./p-B3j8zrhV.js";import{a as s}from"./p-B3JVFwO1.js";import"./p-BTpia82J.js";let l=0;const p=class extends a{get el(){return t(this)}validationEl=this.el;lmvzInput;internals;nativeInputElement;inputId="lmvz-input-"+l++;initialValue="";nativeError=!1;errorFromProp=!1;get helperId(){return this.helperText?`${this.inputId}-helper`:void 0}get showErrorMessage(){return this.error&&Boolean(this.errorMessage)}get errorId(){return`${this.inputId}-error`}get describedBy(){const t=[];return this.helperId&&t.push(this.helperId),this.showErrorMessage&&t.push(this.errorId),t.length>0?t.join(" "):void 0}value;label;helperText;placeholder;disabled=!1;readonly=!1;required=!1;name;type="text";errorMessage;autocomplete;inputmode;autocorrect;autocapitalize;spellcheck;autofocus=!1;minlength;maxlength;pattern;min;max;step;form;get error(){return this.errorFromProp||this.nativeError}set error(t){this.errorFromProp=t}async setValue(t){this.value=this.nativeInputElement.value=t??"",this.internals.setFormValue?.(t),this.lmvzInput.emit(t)}async focusInput(){this.nativeInputElement?.focus()}async blurInput(){this.nativeInputElement?.blur()}async select(){this.nativeInputElement?.select()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((t=>s(this.el,t))),Promise.resolve(this.nativeInputElement)}constructor(t){super(),e(this,t),this.lmvzInput=r(this,"lmvzInput"),t.$hostElement$["s-ei"]?this.internals=t.$hostElement$["s-ei"]:(this.internals=t.$hostElement$.attachInternals(),t.$hostElement$["s-ei"]=this.internals),this.addController(new n(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialValue=this.value,super.componentWillLoad()}formAssociatedCallback(t){t&&this.internals.setFormValue?.(this.value)}formResetCallback(){this.internals.setValidity({}),this.setValue(this.initialValue)}formStateRestoreCallback(t){this.setValue(t)}handleValueChange(t){this.nativeInputElement&&(this.nativeInputElement.value===t||this.setValue(t))}handleDisabledChange(t){t&&this.nativeInputElement&&this.nativeInputElement.blur()}handleInput=t=>{this.setValue(t.target.value)};handleChange=t=>{this.updateNativeError(t.target??this.nativeInputElement)};handleFocus=()=>{};handleBlur=t=>{const e=t.target;e.reportValidity?.()};updateNativeError(t){const e=t??this.nativeInputElement;e&&(this.nativeError=!(e.checkValidity?.()??1))}render(){const t=Boolean(this.value),e=t||Boolean(this.placeholder);return i("div",{key:"79ab97e1e1d0217d5302ca1dea7087292ef19fc7",class:o("input-container",{"interaction-filled":t})},i("div",{key:"9e59a33c261f610f93e1d6db3a07107f9300bbda",class:"input-wrapper"},i("slot",{key:"fadb3f5e49afa817014cdbd44774462b467827f4",name:"before-input"}),i("div",{key:"27d592787bb841fbd430c2e8ce0adc10f59b68ec",class:"label-input-group"},i("label",{key:"f83f154f356660ecafde254b5437ce6c42898b54",htmlFor:this.inputId,class:o({floating:e})},this.label,this.required&&i("span",{key:"b51463179a2099ecd687ccd2480136379b0d0502",class:"required-indicator","aria-hidden":"true"}," ","*")),i("input",{key:"30d8308f286e82fba5d2ebdad972509c06294543",id:this.inputId,ref:t=>this.nativeInputElement=t,type:this.type,min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,required:this.required,form:this.form,autocomplete:this.autocomplete,inputmode:this.inputmode,autocorrect:this.autocorrect,autocapitalize:this.autocapitalize,spellcheck:this.spellcheck,autofocus:this.autofocus,minlength:this.minlength,maxlength:this.maxlength,pattern:this.pattern,"aria-invalid":this.error?"true":"false","aria-required":this.required?"true":"false","aria-describedby":this.describedBy,"aria-errormessage":this.errorId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})),i("slot",{key:"a8448a0827ce24194b21b8281d2b54eb76f24652",name:"after-input"})),i("div",{key:"79413854b97380812c84f3128d1db053d4154008",id:this.helperId,role:"status"},this.helperText||null),i("div",{key:"d34c6b421688934b69917f6da1f9bb22c220a6f9",id:this.errorId,role:"alert"},this.showErrorMessage&&this.errorMessage||null))}static get formAssociated(){return!0}static get watchers(){return{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}}};p.style="@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --input-border-color-focus: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);   --input-height: 48px;    --input-padding-x: 16px;    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --label-floating-scale: 0.85;    --label-minimized-top: -6px;   --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: 8px;  } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--input-border-color-focus);   outline: 2px solid var(--input-border-color-focus);   outline-offset: 2px; }  .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input {   box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color);   outline-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: 14px;    font-family: Router, sans-serif;   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: normal;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0;    transform: translateY(-50%) scale(0.85);    transform-origin: left top;   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 500;  } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: 14px;   outline: none;   padding: 0;   margin: 0;   font-weight: 400;  } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: 12px;    font-size: 12px;   color: var(--helper-text-color);   font-family: Router, sans-serif;   font-weight: 500;  } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: 12px;   font-size: 12px;   color: var(--error-text-color);   font-family: Router, sans-serif;   font-weight: 500; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: 4px; }";export{p as lmvz_input}