@progress/kendo-vue-inputs 6.1.0-develop.1 → 6.1.0-develop.2

package/index.d.ts

@@ -1895,78 +1895,83 @@ export declare const InputSeparator: DefineComponent<    {}, {}, {}, {}, {}, Com
  */
 export declare const MaskedTextBox: DefineComponent<ExtractPropTypes<    {
 type: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 };
-modelValue: StringConstructor;
-modelRawValue: StringConstructor;
-value: StringConstructor;
-defaultValue: StringConstructor;
-placeholder: StringConstructor;
-title: StringConstructor;
-dir: StringConstructor;
-id: StringConstructor;
-ariaLabelledBy: StringConstructor;
-ariaDescribedBy: StringConstructor;
-tabIndex: NumberConstructor;
-accessKey: StringConstructor;
-disabled: BooleanConstructor;
-readonly: BooleanConstructor;
+modelValue: PropType<string>;
+modelRawValue: PropType<string>;
+value: PropType<string>;
+defaultValue: PropType<string>;
+placeholder: PropType<string>;
+title: PropType<string>;
+dir: PropType<string>;
+id: PropType<string>;
+ariaLabelledBy: PropType<string>;
+ariaDescribedBy: PropType<string>;
+tabIndex: PropType<number>;
+accessKey: PropType<string>;
+disabled: PropType<boolean>;
+readonly: PropType<boolean>;
 size: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
 rounded: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
 fillMode: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
 prompt: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 };
 promptPlaceholder: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 };
 includeLiterals: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
 maskValidation: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
-mask: StringConstructor;
+mask: PropType<string>;
 rules: {
-type: ObjectConstructor;
+type: PropType<{
+[key: string]: RegExp;
+}>;
 default: () => {
 [key: string]: RegExp;
 };
 };
-selection: ObjectConstructor;
-name: StringConstructor;
-label: StringConstructor;
-validationMessage: StringConstructor;
+selection: PropType<{
+start: number;
+end: number;
+}>;
+name: PropType<string>;
+label: PropType<string>;
+validationMessage: PropType<string>;
 required: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
 valid: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: any;
 };
 validityStyles: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
-iconName: StringConstructor;
+iconName: PropType<String>;
 inputPrefix: {
 type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
 default: () => any;
@@ -1975,11 +1980,12 @@ inputSuffix: {
 type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
 default: () => any;
 };
-showValidationIcon: BooleanConstructor;
-showLoadingIcon: BooleanConstructor;
-showClearButton: BooleanConstructor;
-inputClass: StringConstructor;
-wrapperClass: StringConstructor;
+showValidationIcon: PropType<Boolean>;
+showLoadingIcon: PropType<Boolean>;
+showClearButton: PropType<Boolean>;
+inputClass: PropType<String>;
+wrapperClass: PropType<String>;
+inputAttributes: PropType<Object>;
 }>, {
 inputRef: Ref<any, any>;
 }, {
@@ -2027,78 +2033,83 @@ updateService(extra?: any): void;
 setValidity(): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, ("blur" | "change" | "focus" | "changemodel" | "update:modelValue" | "update:modelRawValue")[], "blur" | "change" | "focus" | "changemodel" | "update:modelValue" | "update:modelRawValue", PublicProps, Readonly<ExtractPropTypes<    {
 type: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 };
-modelValue: StringConstructor;
-modelRawValue: StringConstructor;
-value: StringConstructor;
-defaultValue: StringConstructor;
-placeholder: StringConstructor;
-title: StringConstructor;
-dir: StringConstructor;
-id: StringConstructor;
-ariaLabelledBy: StringConstructor;
-ariaDescribedBy: StringConstructor;
-tabIndex: NumberConstructor;
-accessKey: StringConstructor;
-disabled: BooleanConstructor;
-readonly: BooleanConstructor;
+modelValue: PropType<string>;
+modelRawValue: PropType<string>;
+value: PropType<string>;
+defaultValue: PropType<string>;
+placeholder: PropType<string>;
+title: PropType<string>;
+dir: PropType<string>;
+id: PropType<string>;
+ariaLabelledBy: PropType<string>;
+ariaDescribedBy: PropType<string>;
+tabIndex: PropType<number>;
+accessKey: PropType<string>;
+disabled: PropType<boolean>;
+readonly: PropType<boolean>;
 size: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
 rounded: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
 fillMode: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
 prompt: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 };
 promptPlaceholder: {
-type: StringConstructor;
+type: PropType<string>;
 default: string;
 };
 includeLiterals: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
 maskValidation: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
-mask: StringConstructor;
+mask: PropType<string>;
 rules: {
-type: ObjectConstructor;
+type: PropType<{
+[key: string]: RegExp;
+}>;
 default: () => {
 [key: string]: RegExp;
 };
 };
-selection: ObjectConstructor;
-name: StringConstructor;
-label: StringConstructor;
-validationMessage: StringConstructor;
+selection: PropType<{
+start: number;
+end: number;
+}>;
+name: PropType<string>;
+label: PropType<string>;
+validationMessage: PropType<string>;
 required: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
 valid: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: any;
 };
 validityStyles: {
-type: BooleanConstructor;
+type: PropType<boolean>;
 default: boolean;
 };
-iconName: StringConstructor;
+iconName: PropType<String>;
 inputPrefix: {
 type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
 default: () => any;
@@ -2107,11 +2118,12 @@ inputSuffix: {
 type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
 default: () => any;
 };
-showValidationIcon: BooleanConstructor;
-showLoadingIcon: BooleanConstructor;
-showClearButton: BooleanConstructor;
-inputClass: StringConstructor;
-wrapperClass: StringConstructor;
+showValidationIcon: PropType<Boolean>;
+showLoadingIcon: PropType<Boolean>;
+showClearButton: PropType<Boolean>;
+inputClass: PropType<String>;
+wrapperClass: PropType<String>;
+inputAttributes: PropType<Object>;
 }>> & Readonly<{
 onFocus?: (...args: any[]) => any;
 onBlur?: (...args: any[]) => any;
@@ -2123,21 +2135,18 @@ onChangemodel?: (...args: any[]) => any;
 type: string;
 required: boolean;
 size: string;
-disabled: boolean;
 rounded: string;
 fillMode: string;
 valid: boolean;
 validityStyles: boolean;
 inputPrefix: string | boolean | Function | Record<string, any>;
 inputSuffix: string | boolean | Function | Record<string, any>;
-showValidationIcon: boolean;
-showLoadingIcon: boolean;
-showClearButton: boolean;
 prompt: string;
 promptPlaceholder: string;
-rules: Record<string, any>;
+rules: {
+[key: string]: RegExp;
+};
 includeLiterals: boolean;
-readonly: boolean;
 maskValidation: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -2361,6 +2370,11 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
      * Defines additional class to the wrapper element.
      */
     wrapperClass?: String;
+    /**
+     * Sets the built-in HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: Object;
 }
 
 /**
@@ -2434,6 +2448,7 @@ type: PropType<string>;
 default: string;
 };
 wrapperClass: PropType<string>;
+inputAttributes: PropType<Object>;
 }>, {
 inputRef: Ref<any, any>;
 elementWrapperRef: Ref<any, any>;
@@ -2580,6 +2595,7 @@ type: PropType<string>;
 default: string;
 };
 wrapperClass: PropType<string>;
+inputAttributes: PropType<Object>;
 }>> & Readonly<{
 onBlur?: (...args: any[] | unknown[]) => any;
 onChange?: (...args: any[] | unknown[]) => any;
@@ -4612,6 +4628,7 @@ type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
+inputAttributes: PropType<Object>;
 }>, {}, {
 currentValue: string | number | string[];
 textAreaHeight: string;
@@ -4733,6 +4750,7 @@ type: PropType<string>;
 default: string;
 validator: (value: any) => any;
 };
+inputAttributes: PropType<Object>;
 }>> & Readonly<{
 onInput?: (...args: any[] | unknown[]) => any;
 onBlur?: (...args: any[] | unknown[]) => any;
@@ -4948,6 +4966,11 @@ export declare interface TextAreaProps extends FormComponentProps {
      * Defines additional class to the input element.
      */
     inputClass?: string;
+    /**
+     * Sets the built-in HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: Object;
     /**
      * The event handler that will be fired when the changes the selected value.
      */
@@ -5069,6 +5092,7 @@ tabIndex: PropType<number>;
 role: PropType<string>;
 title: PropType<string>;
 ariaLabel: PropType<string>;
+inputAttributes: PropType<Object>;
 }>, {
 inputRef: Ref<any, any>;
 }, {
@@ -5211,6 +5235,7 @@ tabIndex: PropType<number>;
 role: PropType<string>;
 title: PropType<string>;
 ariaLabel: PropType<string>;
+inputAttributes: PropType<Object>;
 }>> & Readonly<{
 onInput?: (...args: any[] | unknown[]) => any;
 onBlur?: (...args: any[] | unknown[]) => any;
@@ -5392,6 +5417,11 @@ export declare interface TextBoxProps extends FormComponentProps {
      * Defines the built-in [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) property of the input element inside the TextBox.
      */
     ariaLabel?: string;
+    /**
+     * Sets the built-in HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: Object;
 }
 
 /**

package/maskedtextbox/MaskedTextBox.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),g=require("./masking.service.js"),u=require("./utils.js"),s=require("@progress/kendo-vue-common"),v=require("../package-metadata.js"),c=require("@progress/kendo-svg-icons"),$=n.defineComponent({model:{event:"changemodel"},emits:["change","focus","blur","update:modelValue","update:modelRawValue","changemodel"],props:{type:{type:String,default:"text"},modelValue:String,modelRawValue:String,value:String,defaultValue:String,placeholder:String,title:String,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,tabIndex:Number,accessKey:String,disabled:Boolean,readonly:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},prompt:{type:String,default:"_"},promptPlaceholder:{type:String,default:" "},includeLiterals:{type:Boolean,default:!1},maskValidation:{type:Boolean,default:!0},mask:String,rules:{type:Object,default:function(){return u.defaultRules}},selection:Object,name:String,label:String,validationMessage:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:s.templateDefinition,inputSuffix:s.templateDefinition,showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String},data(){return{currentValue:void 0,currentFocused:!1,inputValue:void 0,currentSelection:[null,null]}},created(){s.validatePackage(v.packageMetadata),this.hasMounted=!1,this.valueDuringOnChange=void 0,this.inputId=`k-${s.guid()}`,this.service=new g.MaskingService,this.isPasted=!1},setup(){return{inputRef:n.ref(null)}},mounted(){this.hasMounted=!0,this.element=this.input=this.inputRef,this.updateService(),this.setValidity()},watch:{currentFocused:function(e,t){this.prevCurrentFocused=t},selection:function(e,t){this.prevSelection=t},includeLiterals:function(e,t){this.prevIncludeLiterals=t},mask:function(e,t){this.prevMask=t},prompt:function(e,t){this.prevPrompt=t},promptPlaceholder:function(e,t){this.prevPromptPlaceholder=t},rules:function(e,t){this.prevRules=t}},updated(){if(this.element&&this.currentFocused){let[t,i]=this.currentSelection;const a=this.prevSelection,l=this.$props.selection;(!a&&l||a&&l&&(a.start!==l.start||a.end!==l.end))&&(t=l.start,i=l.end),t!==null&&i!==null&&this.element.setSelectionRange(t,i)}const e={includeLiterals:this.prevIncludeLiterals,mask:this.prevMask,prompt:this.prevPrompt,promptPlaceholder:this.prevPromptPlaceholder,rules:this.prevRules};u.maskingChanged(e,this.$props)&&this.updateService(),this.setValidity()},computed:{computedRules(){return Object.assign({},u.defaultRules,this.$props.rules)},spanClassNames(){const e=!this.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.currentFocused,"k-empty":!this.computedValue(),"k-invalid":!e&&e!==void 0,"k-rtl":this.$props.dir==="rtl","k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},wrapperSpanClass(){const{size:e,fillMode:t,rounded:i}=this.$props,a=!this.$props.validityStyles||this.validity().valid;return{"k-maskedtextbox":!0,"k-input":!0,[`k-input-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${t}`]:t,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!a,"k-required":this.required,"k-disabled":this.$props.disabled,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{focus(){this.input&&this.input.focus()},computedValue(){let e;return this.valueDuringOnChange!==void 0?e=this.valueDuringOnChange:this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:this.currentValue!==void 0?e=this.currentValue:this.$props.defaultValue!==void 0&&(e=this.$props.defaultValue),e||""},rawValue(){return this.service.rawValue(this.computedValue())},validity(){const e=this.computedValue(),t=this.service.validationValue(e),i=this.$props.validationMessage!==void 0,a=this.$props.valid!==void 0?this.$props.valid:(!this.$props.required||!!t)&&(!this.$props.maskValidation||!this.$props.prompt||e.indexOf(this.$props.prompt)===-1);return{customError:i,valid:a,valueMissing:!t}},pasteHandler(e){const{selectionStart:t,selectionEnd:i}=e.target;i!==t&&(this.isPasted=!0,this.currentSelection=[t||0,i||0])},clearClick(e){this.triggerOnChange("",e)},onChangeHandler(e){const t=e.currentTarget,i=this.inputValue=t.value,a=this.currentSelection[0]||0,l=this.currentSelection[1]||0;if(!this.$props.mask){this.isPasted=!1,this.currentSelection=[null,null],this.triggerOnChange(i,e);return}const o=this.computedValue();let r;if(this.isPasted){this.isPasted=!1;const p=o.length-l,d=i.length-p;r=this.service.maskInRange(i.slice(a,d),o,a,l)}else r=this.service.maskInput(i,o,t.selectionStart||0);this.currentSelection=[r.selection,r.selection],this.triggerOnChange(r.value,e),this.inputValue=void 0},focusHandler(e){this.currentFocused||(this.currentFocused=!0,this.$emit("focus",{target:this,event:e}))},blurHandler(e){this.currentFocused&&(this.currentFocused=!1,this.$emit("blur",{target:this,event:e}))},triggerOnChange(e,t){this.currentValue=e,this.valueDuringOnChange=e,this.$emit("change",{event:t,selectionStart:this.currentSelection[0],selectionEnd:this.currentSelection[1],value:this.computedValue(),component:this,target:{name:this.$props.name,value:this.computedValue(),rawValue:this.rawValue()},validity:this.validity()}),this.$emit("update:modelValue",this.computedValue()),this.$emit("update:modelRawValue",this.rawValue()),this.$emit("changemodel",this.computedValue()),this.valueDuringOnChange=void 0},updateService(e){const t=Object.assign({includeLiterals:this.$props.includeLiterals,mask:this.$props.mask,prompt:this.$props.prompt,promptPlaceholder:this.$props.promptPlaceholder,rules:this.$props.rules},e);this.service.update(t)},setValidity(){this.element&&this.element.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")}},render(){const e=this.$props.id||this.inputId,{iconName:t,showValidationIcon:i,showLoadingIcon:a,showClearButton:l}=this.$props,o=!this.$props.validityStyles||this.validity().valid,r=this.computedValue();this.inputValue;const p=s.templateRendering.call(this,this.$props.inputPrefix,s.getListeners.call(this)),d=s.templateRendering.call(this,this.$props.inputSuffix,s.getListeners.call(this)),f=s.getTemplate.call(this,{h:n.h,template:p,additionalProps:{value:r,valid:o}}),m=s.getTemplate.call(this,{h:n.h,template:d,additionalProps:{value:r,valid:o}}),h=n.createVNode("span",{dir:this.$props.dir,class:this.wrapperSpanClass,style:this.$props.label?void 0:{width:this.$props.width}},[t&&n.createVNode(s.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&n.createVNode("span",{class:"k-input-prefix"},[f]),n.createVNode("input",{type:this.$props.type,autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:!1,class:this.inputInnerClass,value:r,id:e,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled,name:this.$props.name,tabindex:s.getTabIndex(this.$props.tabIndex,this.$props.disabled,!0),accesskey:this.$props.accessKey,title:this.$props.title,disabled:this.$props.disabled||void 0,readonly:this.$props.readonly||void 0,placeholder:this.$props.placeholder,"aria-placeholder":this.$props.placeholder,required:this.$props.required,ref:s.setRef(this,"input"),onInput:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragstart:u.returnFalse,onDrop:u.returnFalse},null),this.$props.inputSuffix&&n.createVNode("span",{class:"k-input-suffix"},[m]),i&&o&&n.createVNode(s.Icon,{name:"check",icon:c.checkIcon,class:"k-input-validation-icon"},null),i&&!o&&n.createVNode(s.Icon,{name:"exclamation-circle",icon:c.exclamationCircleIcon,class:"k-input-validation-icon"},null),a&&n.createVNode(s.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&r&&n.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[n.createVNode(s.Icon,{name:"x",icon:c.xIcon},null)])]);return this.$props.label?n.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[h,this.$props.label?e?n.createVNode("label",{for:e,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):h}});exports.MaskedTextBox=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),v=require("./masking.service.js"),p=require("./utils.js"),s=require("@progress/kendo-vue-common"),$=require("../package-metadata.js"),c=require("@progress/kendo-svg-icons"),V=n.defineComponent({model:{event:"changemodel"},emits:["change","focus","blur","update:modelValue","update:modelRawValue","changemodel"],props:{type:{type:String,default:"text"},modelValue:String,modelRawValue:String,value:String,defaultValue:String,placeholder:String,title:String,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,tabIndex:Number,accessKey:String,disabled:Boolean,readonly:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},prompt:{type:String,default:"_"},promptPlaceholder:{type:String,default:" "},includeLiterals:{type:Boolean,default:!1},maskValidation:{type:Boolean,default:!0},mask:String,rules:{type:Object,default:function(){return p.defaultRules}},selection:Object,name:String,label:String,validationMessage:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:s.templateDefinition,inputSuffix:s.templateDefinition,showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,inputAttributes:Object},data(){return{currentValue:void 0,currentFocused:!1,inputValue:void 0,currentSelection:[null,null]}},created(){s.validatePackage($.packageMetadata),this.hasMounted=!1,this.valueDuringOnChange=void 0,this.inputId=`k-${s.guid()}`,this.service=new v.MaskingService,this.isPasted=!1},setup(){return{inputRef:n.ref(null)}},mounted(){this.hasMounted=!0,this.element=this.input=this.inputRef,this.updateService(),this.setValidity()},watch:{currentFocused:function(e,t){this.prevCurrentFocused=t},selection:function(e,t){this.prevSelection=t},includeLiterals:function(e,t){this.prevIncludeLiterals=t},mask:function(e,t){this.prevMask=t},prompt:function(e,t){this.prevPrompt=t},promptPlaceholder:function(e,t){this.prevPromptPlaceholder=t},rules:function(e,t){this.prevRules=t}},updated(){if(this.element&&this.currentFocused){let[t,i]=this.currentSelection;const a=this.prevSelection,l=this.$props.selection;(!a&&l||a&&l&&(a.start!==l.start||a.end!==l.end))&&(t=l.start,i=l.end),t!==null&&i!==null&&this.element.setSelectionRange(t,i)}const e={includeLiterals:this.prevIncludeLiterals,mask:this.prevMask,prompt:this.prevPrompt,promptPlaceholder:this.prevPromptPlaceholder,rules:this.prevRules};p.maskingChanged(e,this.$props)&&this.updateService(),this.setValidity()},computed:{computedRules(){return Object.assign({},p.defaultRules,this.$props.rules)},spanClassNames(){const e=!this.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.currentFocused,"k-empty":!this.computedValue(),"k-invalid":!e&&e!==void 0,"k-rtl":this.$props.dir==="rtl","k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},wrapperSpanClass(){const{size:e,fillMode:t,rounded:i}=this.$props,a=!this.$props.validityStyles||this.validity().valid;return{"k-maskedtextbox":!0,"k-input":!0,[`k-input-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${t}`]:t,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!a,"k-required":this.required,"k-disabled":this.$props.disabled,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{focus(){this.input&&this.input.focus()},computedValue(){let e;return this.valueDuringOnChange!==void 0?e=this.valueDuringOnChange:this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:this.currentValue!==void 0?e=this.currentValue:this.$props.defaultValue!==void 0&&(e=this.$props.defaultValue),e||""},rawValue(){return this.service.rawValue(this.computedValue())},validity(){const e=this.computedValue(),t=this.service.validationValue(e),i=this.$props.validationMessage!==void 0,a=this.$props.valid!==void 0?this.$props.valid:(!this.$props.required||!!t)&&(!this.$props.maskValidation||!this.$props.prompt||e.indexOf(this.$props.prompt)===-1);return{customError:i,valid:a,valueMissing:!t}},pasteHandler(e){const{selectionStart:t,selectionEnd:i}=e.target;i!==t&&(this.isPasted=!0,this.currentSelection=[t||0,i||0])},clearClick(e){this.triggerOnChange("",e)},onChangeHandler(e){const t=e.currentTarget,i=this.inputValue=t.value,a=this.currentSelection[0]||0,l=this.currentSelection[1]||0;if(!this.$props.mask){this.isPasted=!1,this.currentSelection=[null,null],this.triggerOnChange(i,e);return}const u=this.computedValue();let r;if(this.isPasted){this.isPasted=!1;const o=u.length-l,d=i.length-o;r=this.service.maskInRange(i.slice(a,d),u,a,l)}else r=this.service.maskInput(i,u,t.selectionStart||0);this.currentSelection=[r.selection,r.selection],this.triggerOnChange(r.value,e),this.inputValue=void 0},focusHandler(e){this.currentFocused||(this.currentFocused=!0,this.$emit("focus",{target:this,event:e}))},blurHandler(e){this.currentFocused&&(this.currentFocused=!1,this.$emit("blur",{target:this,event:e}))},triggerOnChange(e,t){this.currentValue=e,this.valueDuringOnChange=e,this.$emit("change",{event:t,selectionStart:this.currentSelection[0],selectionEnd:this.currentSelection[1],value:this.computedValue(),component:this,target:{name:this.$props.name,value:this.computedValue(),rawValue:this.rawValue()},validity:this.validity()}),this.$emit("update:modelValue",this.computedValue()),this.$emit("update:modelRawValue",this.rawValue()),this.$emit("changemodel",this.computedValue()),this.valueDuringOnChange=void 0},updateService(e){const t=Object.assign({includeLiterals:this.$props.includeLiterals,mask:this.$props.mask,prompt:this.$props.prompt,promptPlaceholder:this.$props.promptPlaceholder,rules:this.$props.rules},e);this.service.update(t)},setValidity(){this.element&&this.element.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")}},render(){const e=this.$props.id||this.inputId,{iconName:t,showValidationIcon:i,showLoadingIcon:a,showClearButton:l,inputAttributes:u}=this.$props,r=!this.$props.validityStyles||this.validity().valid,o=this.computedValue();this.inputValue;const d=s.templateRendering.call(this,this.$props.inputPrefix,s.getListeners.call(this)),f=s.templateRendering.call(this,this.$props.inputSuffix,s.getListeners.call(this)),m=s.getTemplate.call(this,{h:n.h,template:d,additionalProps:{value:o,valid:r}}),g=s.getTemplate.call(this,{h:n.h,template:f,additionalProps:{value:o,valid:r}}),h=n.createVNode("span",{dir:this.$props.dir,class:this.wrapperSpanClass,style:this.$props.label?void 0:{width:this.$props.width}},[t&&n.createVNode(s.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&n.createVNode("span",{class:"k-input-prefix"},[m]),n.createVNode("input",n.mergeProps({type:this.$props.type,autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:!1,class:this.inputInnerClass,value:o,id:e,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled,name:this.$props.name,tabindex:s.getTabIndex(this.$props.tabIndex,this.$props.disabled,!0),accesskey:this.$props.accessKey,title:this.$props.title,disabled:this.$props.disabled||void 0,readonly:this.$props.readonly||void 0,placeholder:this.$props.placeholder,"aria-placeholder":this.$props.placeholder,required:this.$props.required,ref:s.setRef(this,"input")},u,{onInput:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragstart:p.returnFalse,onDrop:p.returnFalse}),null),this.$props.inputSuffix&&n.createVNode("span",{class:"k-input-suffix"},[g]),i&&r&&n.createVNode(s.Icon,{name:"check",icon:c.checkIcon,class:"k-input-validation-icon"},null),i&&!r&&n.createVNode(s.Icon,{name:"exclamation-circle",icon:c.exclamationCircleIcon,class:"k-input-validation-icon"},null),a&&n.createVNode(s.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&o&&n.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[n.createVNode(s.Icon,{name:"x",icon:c.xIcon},null)])]);return this.$props.label?n.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[h,this.$props.label?e?n.createVNode("label",{for:e,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):h}});exports.MaskedTextBox=V;

package/maskedtextbox/MaskedTextBox.mjs

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as y, ref as b, h as c, createVNode as n } from "vue";
-import { MaskingService as C } from "./masking.service.mjs";
-import { defaultRules as h, maskingChanged as w, returnFalse as f } from "./utils.mjs";
-import { templateDefinition as m, validatePackage as x, guid as P, kendoThemeMaps as g, templateRendering as v, getListeners as $, getTemplate as S, Icon as o, getTabIndex as I, setRef as B } from "@progress/kendo-vue-common";
-import { packageMetadata as M } from "../package-metadata.mjs";
-import { checkIcon as L, exclamationCircleIcon as O, xIcon as R } from "@progress/kendo-svg-icons";
-const N = /* @__PURE__ */ y({
+import { defineComponent as b, ref as C, h as c, createVNode as n, mergeProps as w } from "vue";
+import { MaskingService as x } from "./masking.service.mjs";
+import { defaultRules as h, maskingChanged as P, returnFalse as f } from "./utils.mjs";
+import { templateDefinition as m, validatePackage as I, guid as B, kendoThemeMaps as g, templateRendering as v, getListeners as $, getTemplate as S, Icon as u, getTabIndex as M, setRef as O } from "@progress/kendo-vue-common";
+import { packageMetadata as L } from "../package-metadata.mjs";
+import { checkIcon as R, exclamationCircleIcon as F, xIcon as D } from "@progress/kendo-svg-icons";
+const z = /* @__PURE__ */ b({
   model: {
     event: "changemodel"
   },
@@ -102,7 +102,8 @@ const N = /* @__PURE__ */ y({
     showLoadingIcon: Boolean,
     showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String
+    wrapperClass: String,
+    inputAttributes: Object
   },
   data() {
     return {
@@ -113,11 +114,11 @@ const N = /* @__PURE__ */ y({
     };
   },
   created() {
-    x(M), this.hasMounted = !1, this.valueDuringOnChange = void 0, this.inputId = `k-${P()}`, this.service = new C(), this.isPasted = !1;
+    I(L), this.hasMounted = !1, this.valueDuringOnChange = void 0, this.inputId = `k-${B()}`, this.service = new x(), this.isPasted = !1;
   },
   setup() {
     return {
-      inputRef: b(null)
+      inputRef: C(null)
     };
   },
   mounted() {
@@ -159,7 +160,7 @@ const N = /* @__PURE__ */ y({
       promptPlaceholder: this.prevPromptPlaceholder,
       rules: this.prevRules
     };
-    w(e, this.$props) && this.updateService(), this.setValidity();
+    P(e, this.$props) && this.updateService(), this.setValidity();
   },
   computed: {
     computedRules() {
@@ -238,14 +239,14 @@ const N = /* @__PURE__ */ y({
         this.isPasted = !1, this.currentSelection = [null, null], this.triggerOnChange(i, e);
         return;
       }
-      const r = this.computedValue();
+      const o = this.computedValue();
       let l;
       if (this.isPasted) {
         this.isPasted = !1;
-        const u = r.length - a, p = i.length - u;
-        l = this.service.maskInRange(i.slice(s, p), r, s, a);
+        const r = o.length - a, p = i.length - r;
+        l = this.service.maskInRange(i.slice(s, p), o, s, a);
       } else
-        l = this.service.maskInput(i, r, t.selectionStart || 0);
+        l = this.service.maskInput(i, o, t.selectionStart || 0);
       this.currentSelection = [l.selection, l.selection], this.triggerOnChange(l.value, e), this.inputValue = void 0;
     },
     focusHandler(e) {
@@ -294,22 +295,23 @@ const N = /* @__PURE__ */ y({
       iconName: t,
       showValidationIcon: i,
       showLoadingIcon: s,
-      showClearButton: a
-    } = this.$props, r = !this.$props.validityStyles || this.validity().valid, l = this.computedValue();
+      showClearButton: a,
+      inputAttributes: o
+    } = this.$props, l = !this.$props.validityStyles || this.validity().valid, r = this.computedValue();
     this.inputValue;
-    const u = v.call(this, this.$props.inputPrefix, $.call(this)), p = v.call(this, this.$props.inputSuffix, $.call(this)), k = S.call(this, {
+    const p = v.call(this, this.$props.inputPrefix, $.call(this)), k = v.call(this, this.$props.inputSuffix, $.call(this)), V = S.call(this, {
       h: c,
-      template: u,
+      template: p,
       additionalProps: {
-        value: l,
-        valid: r
+        value: r,
+        valid: l
       }
-    }), V = S.call(this, {
+    }), y = S.call(this, {
       h: c,
-      template: p,
+      template: k,
       additionalProps: {
-        value: l,
-        valid: r
+        value: r,
+        valid: l
       }
     }), d = n("span", {
       dir: this.$props.dir,
@@ -317,25 +319,25 @@ const N = /* @__PURE__ */ y({
       style: this.$props.label ? void 0 : {
         width: this.$props.width
       }
-    }, [t && n(o, {
+    }, [t && n(u, {
       name: t,
       class: "k-input-icon"
     }, null), this.$props.inputPrefix && n("span", {
       class: "k-input-prefix"
-    }, [k]), n("input", {
+    }, [V]), n("input", w({
       type: this.$props.type,
       autocomplete: "off",
       autocorrect: "off",
       autocapitalize: "off",
       spellcheck: !1,
       class: this.inputInnerClass,
-      value: l,
+      value: r,
       id: e,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       "aria-disabled": this.$props.disabled,
       name: this.$props.name,
-      tabindex: I(this.$props.tabIndex, this.$props.disabled, !0),
+      tabindex: M(this.$props.tabIndex, this.$props.disabled, !0),
       accesskey: this.$props.accessKey,
       title: this.$props.title,
       disabled: this.$props.disabled || void 0,
@@ -343,32 +345,33 @@ const N = /* @__PURE__ */ y({
       placeholder: this.$props.placeholder,
       "aria-placeholder": this.$props.placeholder,
       required: this.$props.required,
-      ref: B(this, "input"),
+      ref: O(this, "input")
+    }, o, {
       onInput: this.onChangeHandler,
       onPaste: this.pasteHandler,
       onFocus: this.focusHandler,
       onBlur: this.blurHandler,
       onDragstart: f,
       onDrop: f
-    }, null), this.$props.inputSuffix && n("span", {
+    }), null), this.$props.inputSuffix && n("span", {
       class: "k-input-suffix"
-    }, [V]), i && r && n(o, {
+    }, [y]), i && l && n(u, {
       name: "check",
-      icon: L,
+      icon: R,
       class: "k-input-validation-icon"
-    }, null), i && !r && n(o, {
+    }, null), i && !l && n(u, {
       name: "exclamation-circle",
-      icon: O,
+      icon: F,
       class: "k-input-validation-icon"
-    }, null), s && n(o, {
+    }, null), s && n(u, {
       name: "loading",
       class: "k-input-loading-icon"
-    }, null), a && l && n("span", {
+    }, null), a && r && n("span", {
       onClick: this.clearClick,
       class: "k-clear-value"
-    }, [n(o, {
+    }, [n(u, {
       name: "x",
-      icon: R
+      icon: D
     }, null)])]);
     return this.$props.label ? n("span", {
       class: this.spanClassNames,
@@ -382,5 +385,5 @@ const N = /* @__PURE__ */ y({
   }
 });
 export {
-  N as MaskedTextBox
+  z as MaskedTextBox
 };