@dialpad/dialtone-vue/dist/lib/input/input.cjs

Vue component library for Dialpad's design system Dialtone

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../common/constants/index.cjs"),s=require("./input-constants.cjs"),h=require("../../common/utils/index.cjs"),c=require("../../common/mixins/input.cjs"),g=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),f=require("../validation-messages/validation-messages.cjs"),_={name:"DtInput",components:{DtValidationMessages:f.default},mixins:[c.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:""},type:{type:String,default:s.INPUT_TYPES.TEXT,validator:e=>Object.values(s.INPUT_TYPES).includes(e)},value:{type:[String,Number],default:""},disabled:{type:Boolean,default:!1},label:{type:String,default:""},labelVisible:{type:Boolean,default:!0},description:{type:String,default:""},size:{type:String,default:"md",validator:e=>Object.values(s.INPUT_SIZES).includes(e)},inputClass:{type:[String,Object,Array],default:""},inputWrapperClass:{type:[String,Object,Array],default:""},rootClass:{type:[String,Object,Array],default:""},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1}},emits:["input","blur","clear","focus","focusin","focusout","update:length","update:invalid"],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0}},computed:{isTextarea(){return this.type===s.INPUT_TYPES.TEXTAREA},isDefaultSize(){return this.size===s.INPUT_SIZES.DEFAULT},iconSize(){return s.INPUT_ICON_SIZES[this.size]},isValidSize(){return Object.values(s.INPUT_SIZES).includes(this.size)},isValidDescriptionSize(){return Object.values(a.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?"textarea":"input"},inputListeners(){return{...this.$listeners,input:e=>this.$emit("input",e.target.value),focus:e=>{this.isInputFocused=!0,this.$emit("focus",e)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)}}},descriptionKey(){return`input-description-${h.getUniqueString()}`},inputState(){return h.getValidationState(this.validationMessages)},defaultLengthCalculation(){return this.calculateLength(this.value)},validationProps(){var e,t,i,n,l,r,u,d,o,p;return{length:{description:(t=(e=this==null?void 0:this.validate)==null?void 0:e.length)==null?void 0:t.description,max:(n=(i=this==null?void 0:this.validate)==null?void 0:i.length)==null?void 0:n.max,warn:(r=(l=this==null?void 0:this.validate)==null?void 0:l.length)==null?void 0:r.warn,message:(d=(u=this==null?void 0:this.validate)==null?void 0:u.length)==null?void 0:d.message,limitMaxLength:(p=(o=this==null?void 0:this.validate)==null?void 0:o.length)!=null&&p.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?a.VALIDATION_MESSAGE_TYPES.WARNING:null:a.VALIDATION_MESSAGE_TYPES.ERROR},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?"":s.INPUT_SIZE_CLASSES[this.inputComponent][this.size]},stateClass(){return[s.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit("update:invalid",e)},value:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength==null&&this.$emit("update:length",this.calculateLength(e))}}},beforeMount(){this.descriptionSizeClasses=s.DESCRIPTION_SIZE_CLASSES,this.labelSizeClasses=s.LABEL_SIZE_CLASSES},methods:{inputClasses(){return["d-input__input",this.inputComponent==="input"?"d-input":"d-textarea",{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.leftIcon,"d-input-icon--right":this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:["d-input__wrapper",{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e!="string"?0:[...e].length},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){var t;(t=this.$refs.container)!=null&&t.contains(e.relatedTarget)||this.$emit("blur",e)},emitClearEvents(){this.$emit("input",""),this.$emit("clear"),this.$emit("update:modelValue","")},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,t){return`message-${e}-${t}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value="",this.$refs.input.focus(),this.emitClearEvents()}}};var m=function(){var t=this,i=t._self._c;return i("div",{ref:"container",class:[t.rootClass,"d-input__root",{"d-input--hidden":t.hidden}],attrs:{"data-qa":"dt-input"}},[i("label",{staticClass:"d-input__label",attrs:{"aria-details":t.$slots.description||t.description?t.descriptionKey:void 0,"data-qa":"dt-input-label-wrapper"}},[t._t("labelSlot",function(){return[t.labelVisible&&t.label?i("div",{ref:"label",class:["d-input__label-text","d-label",t.labelSizeClasses[t.size]],attrs:{"data-qa":"dt-input-label"}},[t._v(" "+t._s(t.label)+" ")]):t._e()]}),t.$slots.description||t.description||t.shouldValidateLength?i("div",{ref:"description",class:["d-input__description","d-description",t.descriptionSizeClasses[t.size]],attrs:{id:t.descriptionKey,"data-qa":"dt-input-description"}},[t.$slots.description||t.description?i("div",[t._t("description",function(){return[t._v(t._s(t.description))]})],2):t._e(),t.shouldValidateLength?i("div",{staticClass:"d-input__length-description",attrs:{"data-qa":"dt-input-length-description"}},[t._v(" "+t._s(t.validationProps.length.description)+" ")]):t._e()]):t._e(),i("div",{class:t.inputWrapperClasses(),attrs:{"read-only":t.disabled}},[i("span",{staticClass:"d-input-icon d-input-icon--left",attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{focusout:t.onBlur}},[t._t("leftIcon",null,{iconSize:t.iconSize})],2),t.isTextarea?i("textarea",t._g(t._b({ref:"input",class:t.inputClasses(),attrs:{name:t.name,disabled:t.disabled,autocomplete:t.$attrs.autocomplete??"off",maxlength:t.shouldLimitMaxLength?t.validationProps.length.max:null,"data-qa":t.$attrs["data-qa"]??"dt-input-input"},domProps:{value:t.value}},"textarea",t.$attrs,!1),t.inputListeners)):i("input",t._g(t._b({ref:"input",class:t.inputClasses(),attrs:{name:t.name,type:t.type,disabled:t.disabled,autocomplete:t.$attrs.autocomplete??"off",maxlength:t.shouldLimitMaxLength?t.validationProps.length.max:null,"data-qa":t.$attrs["data-qa"]??"dt-input-input"},domProps:{value:t.value}},"input",t.$attrs,!1),t.inputListeners)),i("span",{staticClass:"d-input-icon d-input-icon--right",attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{focusout:t.onBlur}},[t._t("rightIcon",null,{iconSize:t.iconSize,clear:t.clearInput})],2)])],2),i("dt-validation-messages",t._b({class:t.messagesClass,attrs:{"validation-messages":t.validationMessages,"show-messages":t.showMessages,"data-qa":"dt-input-messages"}},"dt-validation-messages",t.messagesChildProps,!1))],1)},S=[],v=g.n(_,m,S);const L=v.exports;exports.default=L;
//# sourceMappingURL=input.cjs.map