@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
3 lines (2 loc) • 22.3 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{a as B}from"./MONAHAME.js";import{a as q}from"./VO26MCLG.js";import{a as S}from"./MN4PER7E.js";import{c as R,d as L,e as M}from"./LCVNP3EO.js";import{a as E,c as C,e as V,g as b,h as F}from"./GTD2HZYS.js";import{a as H}from"./77EQHO2G.js";import{a as T}from"./SQ6RHDDF.js";import{a as z}from"./3XLPUKLV.js";import{a as f}from"./3YEM2IPT.js";import{c as $}from"./QUTTHRH3.js";import"./MNIRD7Q7.js";import{e as I,o as h}from"./ZQBZ5QPB.js";import"./CIYXQ5G6.js";import{B as x,C as c,D as d,E as k,F as n,J as p,K as y,Q as w,g as m,h as l,l as i,p as o}from"./G7AHLVJ5.js";var t={loader:"loader",clearable:"clearable",clearButton:"clear-button",editingEnabled:"editing-enabled",hasPrefix:"has-prefix",hasSuffix:"has-suffix",inlineChild:"inline-child",inputIcon:"icon",prefix:"prefix",suffix:"suffix",wrapper:"element-wrapper",inputWrapper:"wrapper",actionWrapper:"action-wrapper"},O={validationMessage:"inputTextValidationMessage"},W={action:"action"},D=m`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input{padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-sm))}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .has-prefix input{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=s]) .prefix{padding-inline:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-xxs)))}:host([scale=s]) .suffix{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s]) .action-wrapper{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input{padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-md))}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .has-prefix input{padding-inline-start:var(--calcite-spacing-xs)}:host([scale=m]) .prefix{padding-inline:var(--calcite-spacing-md) var(--calcite-spacing-xs)}:host([scale=m]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-xs)))}:host([scale=m]) .suffix{padding-inline:var(--calcite-spacing-xs) var(--calcite-spacing-md)}:host([scale=m]) .action-wrapper{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input{padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-lg))}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .has-prefix input{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .prefix{padding-inline:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=l]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-sm)))}:host([scale=l]) .suffix{padding-inline:var(--calcite-spacing-sm) var(--calcite-spacing-lg)}:host([scale=l]) .action-wrapper{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing),block-size 0,outline-offset 0s;-webkit-appearance:none;position:relative;margin:0;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-width:1px;border-style:solid;font-family:inherit;font-weight:var(--calcite-font-weight-normal);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-text-text-color, var(--calcite-color-text-1));border-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));text-align:var(--calcite-internal-input-text-alignment)}input:placeholder-shown{text-overflow:ellipsis}:host(:not([status=invalid])) .has-prefix input{border-inline-start-width:0}:host(:not([status=invalid])) .has-suffix input{border-inline-end-width:0}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-number-placeholder-text-color, var(--calcite-color-text-3))}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-input-text-text-color-focus, var(--calcite-color-text-1))}input[readonly]{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-input-text-background-color, var(--calcite-color-background))}input[readonly]:focus{color:var(--calcite-input-text-text-color-focus, var(--calcite-color-text-1))}:host([read-only]) .prefix,:host([read-only]) .suffix{background-color:var(--calcite-input-text-background-color, var(--calcite-color-background))}calcite-icon{color:var(--calcite-input-action-icon-color, var(--calcite-color-text-3))}input{outline-color:transparent}input:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .icon{inset-inline-start:.5rem}:host([scale=m]) .icon{inset-inline-start:.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center;isolation:isolate}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-input-text-icon-color, var(--calcite-color-text-3))}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}.clear-button{pointer-events:initial;order:4;margin:0;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;outline-color:transparent;border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));background-color:var(--calcite-input-action-background-color, var(--calcite-color-foreground-1));border-inline-start-width:0px}.clear-button:hover{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-input-action-background-color-hover, var(--calcite-color-foreground-2))}.clear-button:hover calcite-icon{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-input-action-icon-color-hover, var(--calcite-color-text-1))}.clear-button:active{background-color:var(--calcite-input-action-background-color-press, var(--calcite-color-foreground-3))}.clear-button:active calcite-icon{color:var(--calcite-input-action-icon-color-press, --calcite-color-text-1)}.clear-button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.has-suffix .clear-button{border-inline-end-width:0}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.loader calcite-progress{--calcite-progress-background-color: var(--calcite-input-loading-background-color);--calcite-progress-fill-color: var(--calcite-input-loading-fill-color)}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;line-height:1;font-weight:var(--calcite-font-weight-regular);border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input))}.prefix{order:2;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size-x, auto);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-prefix-text-color, var(--calcite-color-text-2));border-start-start-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-end-start-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size-x, auto);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-suffix-text-color, var(--calcite-color-text-2));border-start-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-end-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}:host([prefix-text]:not([prefix-text=""])) input{border-start-start-radius:0;border-end-start-radius:0}:host([suffix-text]:not([suffix-text=""])) input,:host .clearable input{border-start-end-radius:0;border-end-end-radius:0}:host(:not([suffix-text])) .clear-button,:host([suffix-text=""]) .clear-button{border-start-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-end-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}:host([alignment=start]){--calcite-internal-input-text-alignment: start}:host([alignment=center]){--calcite-internal-input-text-alignment: center}:host([alignment=end]){--calcite-internal-input-text-alignment: end}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.input--no-bottom-border) input{border-block-end-width:0px}:host(.input--no-top-border) input{border-block-start-width:0px}:host(.input--no-right-border) input{border-inline-end:0}:host(.input--no-left-border) input{border-inline-start:0}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`,v=class extends k{constructor(){super(),this.actionWrapperRef=c(),this.attributeWatch=$(["autofocus","enterkeyhint","inputmode","spellcheck"],this.handleGlobalAttributesChanged),this.childRef=c(),this.inputWrapperRef=c(),this.onHiddenFormInputInput=e=>{e.target.name===this.name&&this.setValue({value:e.target.value,origin:"direct"}),this.setFocus(),e.stopPropagation()},this.previousValueOrigin="initial",this.userChangedValue=!1,this._value="",this.messages=T(),this.focusSetter=z()(this),this.interactiveContainer=H(this),this.slottedActionElDisabledInternally=!1,this.alignment="start",this.clearable=!1,this.disabled=!1,this.editingEnabled=!1,this.iconFlipRtl=!1,this.loading=!1,this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.calciteInputTextChange=o(),this.calciteInputTextInput=o(),this.calciteInternalInputTextBlur=o(),this.calciteInternalInputTextFocus=o(),this.listen("click",this.clickHandler),this.listen("keydown",this.keyDownHandler)}static{this.properties={slottedActionElDisabledInternally:[16,{},{state:!0}],alignment:[3,{},{reflect:!0}],autocomplete:1,clearable:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],editingEnabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],icon:[3,{converter:p,type:String},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],label:1,labelText:1,loading:[7,{},{reflect:!0,type:Boolean}],maxLength:[11,{},{reflect:!0,type:Number}],messageOverrides:[0,{},{attribute:!1}],minLength:[11,{},{reflect:!0,type:Number}],name:[3,{},{reflect:!0}],pattern:1,placeholder:1,prefixText:1,readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],suffixText:1,validationIcon:[3,{converter:p,type:String},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1}}static{this.styles=D}get isClearable(){return this.clearable&&this.value.length>0}get value(){return this._value}set value(e){let a=this._value;e!==a&&(this._value=e,this.valueWatcher(e,a))}async selectText(){this.childRef.value?.select()}async setFocus(e){return this.focusSetter(()=>this.childRef.value,e)}connectedCallback(){super.connectedCallback(),this.inlineEditableEl=this.el.closest("calcite-inline-editable"),this.inlineEditableEl&&(this.editingEnabled=this.inlineEditableEl.editingEnabled||!1),R(this),C(this),this.el.addEventListener(b,this.onHiddenFormInputInput)}async load(){this.requestedIcon=h({},this.icon,"text"),this.setPreviousEmittedValue(this.value),this.setPreviousValue(this.value)}willUpdate(e){e.has("icon")&&(this.requestedIcon=h({},this.icon,"text"))}disconnectedCallback(){super.disconnectedCallback(),L(this),V(this),this.el.removeEventListener(b,this.onHiddenFormInputInput)}handleGlobalAttributesChanged(){this.requestUpdate()}valueWatcher(e,a){this.userChangedValue||this.setValue({origin:"direct",previousValue:a,value:e||""}),this.userChangedValue=!1}keyDownHandler(e){this.readOnly||this.disabled||e.defaultPrevented||(this.isClearable&&e.key==="Escape"&&(this.clearInputTextValue(e),e.preventDefault()),e.key==="Enter"&&E(this)&&e.preventDefault())}onLabelClick(){this.setFocus()}clearInputTextValue(e){this.setValue({committing:!0,nativeEvent:e,origin:"user",value:""})}emitChangeIfUserModified(){this.previousValueOrigin==="user"&&this.value!==this.previousEmittedValue&&(this.calciteInputTextChange.emit(),this.setPreviousEmittedValue(this.value))}inputTextBlurHandler(){this.calciteInternalInputTextBlur.emit({element:this.childRef.value,value:this.value}),this.emitChangeIfUserModified()}clickHandler(e){if(this.disabled)return;let a=e.composedPath();!a.includes(this.inputWrapperRef.value)||a.includes(this.actionWrapperRef.value)||this.setFocus()}inputTextFocusHandler(){this.calciteInternalInputTextFocus.emit({element:this.childRef.value,value:this.value})}inputTextInputHandler(e){this.disabled||this.readOnly||this.setValue({nativeEvent:e,origin:"user",value:e.target.value})}inputTextKeyDownHandler(e){this.disabled||this.readOnly||e.key==="Enter"&&this.emitChangeIfUserModified()}syncHiddenFormInput(e){B("text",this,e)}setInputValue(e){this.childRef.value&&(this.childRef.value.value=e)}setPreviousEmittedValue(e){this.previousEmittedValue=e}setPreviousValue(e){this.previousValue=e}setValue({committing:e=!1,nativeEvent:a,origin:s,previousValue:u,value:r}){this.setPreviousValue(u??this.value),this.previousValueOrigin=s,this.userChangedValue=s==="user"&&r!==this.value,this.value=r,s==="direct"&&(this.setInputValue(r),this.setPreviousEmittedValue(r)),a&&(this.calciteInputTextInput.emit().defaultPrevented?this.value=this.previousValue:e&&this.emitChangeIfUserModified())}render(){let e=I(this.el),a=l`<div class=${n(t.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`,s=l`<button .ariaLabel=${this.messages.clear} class=${n(t.clearButton)} .disabled=${this.disabled||this.readOnly} =${this.clearInputTextValue} tabindex=-1 type=button><calcite-icon icon=x .scale=${f(this.scale)}></calcite-icon></button>`,u=l`<calcite-icon class=${n(t.inputIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${f(this.scale)}></calcite-icon>`,r=l`<div class=${n(t.prefix)}>${this.prefixText}</div>`,g=l`<div class=${n(t.suffix)}>${this.suffixText}</div>`,P=l`<input aria-errormessage=${O.validationMessage} .ariaInvalid=${this.status==="invalid"} .ariaLabel=${M(this)} autocomplete=${this.autocomplete??i} .autofocus=${this.el.autofocus} class=${n({[t.editingEnabled]:this.editingEnabled,[t.inlineChild]:!!this.inlineEditableEl})} value=${this.defaultValue??i} .disabled=${this.disabled?!0:null} enterkeyhint=${this.el.enterKeyHint??i} inputmode=${this.el.inputMode??i} maxlength=${this.maxLength??i} minlength=${this.minLength??i} name=${this.name??i} =${this.inputTextBlurHandler} =${this.inputTextFocusHandler} =${this.inputTextInputHandler} =${this.inputTextKeyDownHandler} pattern=${this.pattern??i} placeholder=${(this.placeholder||"")??i} .readOnly=${this.readOnly} .required=${this.required?!0:null} spellcheck=${this.el.spellcheck??i} tabindex=${(this.disabled||this.inlineEditableEl&&!this.editingEnabled?-1:null)??i} type=text .value=${x(this.value??"")} ${d(this.childRef)}>`;return this.interactiveContainer({disabled:this.disabled,children:l`${this.labelText&&S({labelText:this.labelText,onClick:this.onLabelClick,required:this.required,tooltipText:this.messages.required})||""}<div class=${n({[t.inputWrapper]:!0,[y.rtl]:e==="rtl",[t.clearable]:this.isClearable,[t.hasSuffix]:this.suffixText,[t.hasPrefix]:this.prefixText})} ${d(this.inputWrapperRef)}>${this.prefixText?r:null}<div class=${n(t.wrapper)}>${P}${this.isClearable?s:null}${this.requestedIcon?u:null}${this.loading?a:null}</div><div class=${n(t.actionWrapper)} ${d(this.actionWrapperRef)}><slot name=${W.action}></slot></div>${this.suffixText?g:null}${F({component:this})}</div>${this.validationMessage&&this.status==="invalid"?q({icon:this.validationIcon,id:O.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}};w("calcite-input-text",v);export{v as InputText};