@dialpad/dialtone-vue 3.223.0-next.3 → 3.223.0-next.4

package/dist/lib/icon/icon.js

@@ -1,20 +1,21 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { ICON_NAMES as t, ICON_SIZE_MODIFIERS as n } from "./icon-constants.js";
-import { createBlock as r, createCommentVNode as i, openBlock as a, resolveDynamicComponent as o } from "vue";
-import { icons as s } from "@dialpad/dialtone-icons/vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { ICON_NAMES as n, ICON_SIZE_MODIFIERS as r } from "./icon-constants.js";
+import { createBlock as i, createCommentVNode as a, openBlock as o, resolveDynamicComponent as s } from "vue";
+import { icons as c } from "@dialpad/dialtone-icons/vue";
 //#region components/Icon/Icon.vue
-var c = {
+var l = {
 	name: "DtIcon",
 	props: {
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(n).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(r)
 		},
 		name: {
 			type: String,
 			required: !0,
-			validator: (e) => t.includes(e)
+			validator: (e) => n.includes(e)
 		},
 		ariaLabel: {
 			type: String,
@@ -26,15 +27,15 @@ var c = {
 	},
 	computed: {
 		icon() {
-			return s[`./src/icons/${this.name}.vue`];
+			return c[`./src/icons/${this.name}.vue`];
 		},
 		iconAriaLabel() {
 			return this.ariaLabel;
 		}
 	}
 };
-function l(e, t, n, s, c, l) {
-	return l.icon ? (a(), r(o(l.icon), {
+function u(e, t, n, r, c, l) {
+	return l.icon ? (o(), i(s(l.icon), {
 		key: 0,
 		size: n.size,
 		"aria-label": l.iconAriaLabel,
@@ -43,10 +44,10 @@ function l(e, t, n, s, c, l) {
 		"size",
 		"aria-label",
 		"data-qa"
-	])) : i("", !0);
+	])) : a("", !0);
 }
-var u = /* @__PURE__ */ e(c, [["render", l]]);
+var d = /* @__PURE__ */ t(l, [["render", u]]);
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=icon.js.map

package/dist/lib/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../components/Icon/Icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './IconConstants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAoBA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAlES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../components/Icon/Icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './IconConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAqBA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAnES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}

package/dist/lib/input/input.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../common/mixins/input.cjs`),r=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`../validation-messages/validation-messages.cjs`),a=require(`../text/text-constants.cjs`),o=require(`../text/text.cjs`),s=require(`./input-constants.cjs`);let c=require(`vue`);var l={name:`DtInput`,components:{DtValidationMessages:i.default,DtText:o.default},mixins:[n.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)},modelValue:{type:[String,Number],default:``},disabled:{type:Boolean,default:!1},label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},descriptionClass:{type:[String,Array,Object],default:``},size:{type:[String,Number],default:300,validator:e=>Object.keys(s.INPUT_ICON_SIZES).includes(String(e))},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{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},labelSize:{type:[String,Number],default:null,validator:e=>a.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(a.TEXT_STRENGTH_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``}},emits:[`blur`,`clear`,`focus`,`focusin`,`focusout`,`update:modelValue`,`update:length`,`update:invalid`],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:t.hasSlotContent,isComposing:!1,justEndedComposition:!1,messagesId:t.getUniqueString()}},computed:{isTextarea(){return this.type===s.INPUT_TYPES.TEXTAREA},isDefaultSize(){return String(this.size)===s.INPUT_SIZES.DEFAULT||String(this.size)===`300`},iconSize(){return s.INPUT_ICON_SIZES[String(this.size)]},isValidSize(){return Object.keys(s.INPUT_ICON_SIZES).includes(String(this.size))},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===s.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`update:modelValue`,t)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit(`focus`,e)},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e)}},descriptionKey(){return`input-description-${t.getUniqueString()}`},inputState(){return t.getValidationState(this.validationMessages)},ariaInvalid(){return this.inputState===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.validationMessages.length>0?this.messagesId:void 0},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.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?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.VALIDATION_MESSAGE_TYPES.CRITICAL},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)},resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?``:s.INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)]},stateClass(){return[s.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit(`update:invalid`,e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue),this.runValidations()},methods:{removeClassStyleAttrs:t.removeClassStyleAttrs,inputClasses(){return[`d-input__input`,this.inputComponent===`input`?`d-input`:`d-textarea`,{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.startIcon||this.$slots.leftIcon,"d-input-icon--right":this.$slots.endIcon||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`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.contains(e.relatedTarget)||this.$emit(`blur`,e)},emitClearEvents(){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()},runValidations(){!this.label&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label prop and use show-label="false" to hide it visually.`)}}},u=[`aria-details`],d={key:0},f={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},p=[`read-only`],m=[`name`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`],h=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`];function g(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-text`),s=(0,c.resolveComponent)(`dt-validation-messages`);return(0,c.openBlock)(),(0,c.createElementBlock)(`div`,{ref:`container`,class:(0,c.normalizeClass)([`d-input__root`,{"d-input--hidden":n.hidden},e.$attrs.class]),style:(0,c.normalizeStyle)(e.$attrs.style),"data-qa":`dt-input`},[(0,c.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,c.renderSlot)(e.$slots,`label`,{},()=>[n.showLabel&&n.label?((0,c.openBlock)(),(0,c.createBlock)(o,{key:0,ref:`label`,"data-qa":`dt-input-label`,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,class:(0,c.normalizeClass)([`d-input__label-text`,n.labelClass])},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)(n.label),1)]),_:1},8,[`size`,`strength`,`class`])):(0,c.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,c.openBlock)(),(0,c.createBlock)(o,{key:0,id:a.descriptionKey,ref:`description`,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:(0,c.normalizeClass)([`d-input__description`,`d-description`,n.descriptionClass]),"data-qa":`dt-input-description`},{default:(0,c.withCtx)(()=>[i.hasSlotContent(e.$slots.description)||n.description?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.renderSlot)(e.$slots,`description`,{},()=>[(0,c.createTextVNode)((0,c.toDisplayString)(n.description),1)])])):(0,c.createCommentVNode)(``,!0),a.shouldValidateLength?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,f,(0,c.toDisplayString)(a.validationProps.length.description),1)):(0,c.createCommentVNode)(``,!0)]),_:3},8,[`id`,`size`,`density`,`class`])):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`d-input-icon`,`d-input-icon--left`,n.startIconClass]),"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.startIcon?(0,c.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:a.iconSize}):(0,c.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:a.iconSize})],34),a.isTextarea?((0,c.openBlock)(),(0,c.createElementBlock)(`textarea`,(0,c.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,c.toHandlers)(a.inputListeners,!0)),null,16,m)):((0,c.openBlock)(),(0,c.createElementBlock)(`input`,(0,c.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,c.toHandlers)(a.inputListeners,!0)),null,16,h)),(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`d-input-icon`,`d-input-icon--right`,n.endIconClass]),"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.endIcon?(0,c.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:a.iconSize,clear:a.clearInput}):(0,c.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:a.iconSize,clear:a.clearInput})],34)],10,p)],8,u),(0,c.createVNode)(s,(0,c.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-input-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var _=r.t(l,[[`render`,g]]);exports.default=_;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/validators/index.cjs`),n=require(`../../common/utils/index.cjs`),r=require(`../../common/mixins/input.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../text/text-constants.cjs`),s=require(`../text/text.cjs`),c=require(`./input-constants.cjs`);let l=require(`vue`);var u=t.ordinalSizeValidator(c.INPUT_ICON_SIZES),d={name:`DtInput`,components:{DtValidationMessages:a.default,DtText:s.default},mixins:[r.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:``},type:{type:String,default:c.INPUT_TYPES.TEXT,validator:e=>Object.values(c.INPUT_TYPES).includes(e)},modelValue:{type:[String,Number],default:``},disabled:{type:Boolean,default:!1},label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},descriptionClass:{type:[String,Array,Object],default:``},size:{type:[String,Number],default:300,validator:u},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{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},labelSize:{type:[String,Number],default:null,validator:e=>o.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(o.TEXT_STRENGTH_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``}},emits:[`blur`,`clear`,`focus`,`focusin`,`focusout`,`update:modelValue`,`update:length`,`update:invalid`],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:n.hasSlotContent,isComposing:!1,justEndedComposition:!1,messagesId:n.getUniqueString()}},computed:{isTextarea(){return this.type===c.INPUT_TYPES.TEXTAREA},isDefaultSize(){return String(this.size)===c.INPUT_SIZES.DEFAULT||String(this.size)===`300`},iconSize(){return c.INPUT_ICON_SIZES[String(this.size)]},isValidSize(){return u(this.size)},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===c.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`update:modelValue`,t)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit(`focus`,e)},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e)}},descriptionKey(){return`input-description-${n.getUniqueString()}`},inputState(){return n.getValidationState(this.validationMessages)},ariaInvalid(){return this.inputState===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.validationMessages.length>0?this.messagesId:void 0},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.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?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.VALIDATION_MESSAGE_TYPES.CRITICAL},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)},resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?``:c.INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)]},stateClass(){return[c.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit(`update:invalid`,e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue),this.runValidations()},methods:{removeClassStyleAttrs:n.removeClassStyleAttrs,inputClasses(){return[`d-input__input`,this.inputComponent===`input`?`d-input`:`d-textarea`,{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.startIcon||this.$slots.leftIcon,"d-input-icon--right":this.$slots.endIcon||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`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.contains(e.relatedTarget)||this.$emit(`blur`,e)},emitClearEvents(){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()},runValidations(){!this.label&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label prop and use show-label="false" to hide it visually.`)}}},f=[`aria-details`],p={key:0},m={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},h=[`read-only`],g=[`name`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`],_=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`];function v(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-text`),s=(0,l.resolveComponent)(`dt-validation-messages`);return(0,l.openBlock)(),(0,l.createElementBlock)(`div`,{ref:`container`,class:(0,l.normalizeClass)([`d-input__root`,{"d-input--hidden":n.hidden},e.$attrs.class]),style:(0,l.normalizeStyle)(e.$attrs.style),"data-qa":`dt-input`},[(0,l.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,l.renderSlot)(e.$slots,`label`,{},()=>[n.showLabel&&n.label?((0,l.openBlock)(),(0,l.createBlock)(o,{key:0,ref:`label`,"data-qa":`dt-input-label`,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,class:(0,l.normalizeClass)([`d-input__label-text`,n.labelClass])},{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.label),1)]),_:1},8,[`size`,`strength`,`class`])):(0,l.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,l.openBlock)(),(0,l.createBlock)(o,{key:0,id:a.descriptionKey,ref:`description`,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:(0,l.normalizeClass)([`d-input__description`,`d-description`,n.descriptionClass]),"data-qa":`dt-input-description`},{default:(0,l.withCtx)(()=>[i.hasSlotContent(e.$slots.description)||n.description?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,p,[(0,l.renderSlot)(e.$slots,`description`,{},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.description),1)])])):(0,l.createCommentVNode)(``,!0),a.shouldValidateLength?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,m,(0,l.toDisplayString)(a.validationProps.length.description),1)):(0,l.createCommentVNode)(``,!0)]),_:3},8,[`id`,`size`,`density`,`class`])):(0,l.createCommentVNode)(``,!0),(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,l.createElementVNode)(`span`,{class:(0,l.normalizeClass)([`d-input-icon`,`d-input-icon--left`,n.startIconClass]),"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.startIcon?(0,l.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:a.iconSize}):(0,l.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:a.iconSize})],34),a.isTextarea?((0,l.openBlock)(),(0,l.createElementBlock)(`textarea`,(0,l.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,l.toHandlers)(a.inputListeners,!0)),null,16,g)):((0,l.openBlock)(),(0,l.createElementBlock)(`input`,(0,l.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,l.toHandlers)(a.inputListeners,!0)),null,16,_)),(0,l.createElementVNode)(`span`,{class:(0,l.normalizeClass)([`d-input-icon`,`d-input-icon--right`,n.endIconClass]),"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.endIcon?(0,l.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:a.iconSize,clear:a.clearInput}):(0,l.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:a.iconSize,clear:a.clearInput})],34)],10,h)],8,f),(0,l.createVNode)(s,(0,l.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-input-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var y=i.t(d,[[`render`,v]]);exports.default=y;
 //# sourceMappingURL=input.cjs.map

package/dist/lib/input/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":[],"sources":["../../../components/Input/Input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }, $attrs.class]\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"label\">\n        <dt-text\n          v-if=\"showLabel && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          kind=\"label\"\n          :size=\"resolvedLabelSize\"\n          :strength=\"labelStrength\"\n          tone=\"secondary\"\n          :class=\"['d-input__label-text', labelClass]\"\n        >\n          {{ label }}\n        </dt-text>\n      </slot>\n      <dt-text\n        v-if=\"hasSlotContent($slots.description) || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        kind=\"body\"\n        :size=\"resolvedDescriptionSize\"\n        tone=\"tertiary\"\n        :density=\"resolvedDescriptionDensity\"\n        as=\"div\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionClass,\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.description) || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </dt-text>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled === true ? true : undefined\"\n      >\n        <span\n          :class=\"['d-input-icon', 'd-input-icon--left', startIconClass]\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for start icon -->\n          <slot\n            v-if=\"$slots.startIcon\"\n            name=\"startIcon\"\n            :icon-size=\"iconSize\"\n          />\n          <!-- @slot @deprecated Use startIcon -->\n          <slot\n            v-else\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          :class=\"['d-input-icon', 'd-input-icon--right', endIconClass]\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for end icon -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      v-bind=\"messagesChildProps\"\n      :id=\"messagesId\"\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n} from './InputConstants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/ValidationMessages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/Text';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search, color\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input.\n     * Can also be overridden with a slot of the same name.\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (t) => Object.keys(INPUT_ICON_SIZES).includes(String(t)),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Overrides the label text size. When not provided, the label size\n     * is derived from the component size prop.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n      hasSlotContent,\n      isComposing: false,\n      justEndedComposition: false,\n      messagesId: getUniqueString(),\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return String(this.size) === INPUT_SIZES.DEFAULT || String(this.size) === '300';\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[String(this.size)];\n    },\n\n    isValidSize () {\n      return Object.keys(INPUT_ICON_SIZES).includes(String(this.size));\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        compositionstart: () => {\n          this.isComposing = true;\n        },\n\n        compositionend: () => {\n          this.isComposing = false;\n          this.justEndedComposition = true;\n          const val = this.$refs.input.value;\n          this.$emit('update:modelValue', val);\n          // Clear the flag after the current synchronous event processing so\n          // Firefox's post-compositionend input event is skipped, but the\n          // next real user input (a separate browser task) is not.\n          Promise.resolve().then(() => { this.justEndedComposition = false; });\n        },\n\n        input: async event => {\n          if (this.isComposing) return;\n          if (this.justEndedComposition) return;\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    ariaInvalid () {\n      return this.inputState === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showMessages && this.validationMessages.length > 0 ? this.messagesId : undefined;\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.modelValue);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.CRITICAL;\n      }\n    },\n\n    shouldValidateLength () {\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    resolvedLabelSize () {\n      if (this.labelSize != null) return this.labelSize;\n      const sizeStr = String(this.size);\n      // xl/500 exceeds label's max size — cap at lg/400\n      if (sizeStr === 'xl' || sizeStr === '500') return sizeStr === '500' ? '400' : 'lg';\n      return this.size;\n    },\n\n    resolvedDescriptionSize () {\n      const map = {\n        100: 'xs', 200: 'xs', 300: 'sm', 400: 'sm', 500: 'md',\n        xs: 'xs', sm: 'xs', md: 'sm', lg: 'sm', xl: 'md',\n      };\n      return map[String(this.size)] || 'sm';\n    },\n\n    resolvedDescriptionDensity () {\n      const sizeStr = String(this.size);\n      return (sizeStr === 'xl' || sizeStr === '500') ? '300' : undefined;\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    modelValue: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n\n        // Set textarea value programmatically to avoid attribute binding\n        // Skip during IME composition to avoid interrupting in-progress input\n        if (this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== newValue) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    // Set initial textarea value programmatically\n    if (this.isTextarea && this.$refs.input) {\n      this.$refs.input.value = this.modelValue;\n    }\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.startIcon || this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.endIcon || this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n\n    runValidations () {\n      if (!this.label && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"input.cjs","names":[],"sources":["../../../components/Input/Input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }, $attrs.class]\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"label\">\n        <dt-text\n          v-if=\"showLabel && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          kind=\"label\"\n          :size=\"resolvedLabelSize\"\n          :strength=\"labelStrength\"\n          tone=\"secondary\"\n          :class=\"['d-input__label-text', labelClass]\"\n        >\n          {{ label }}\n        </dt-text>\n      </slot>\n      <dt-text\n        v-if=\"hasSlotContent($slots.description) || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        kind=\"body\"\n        :size=\"resolvedDescriptionSize\"\n        tone=\"tertiary\"\n        :density=\"resolvedDescriptionDensity\"\n        as=\"div\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionClass,\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.description) || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </dt-text>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled === true ? true : undefined\"\n      >\n        <span\n          :class=\"['d-input-icon', 'd-input-icon--left', startIconClass]\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for start icon -->\n          <slot\n            v-if=\"$slots.startIcon\"\n            name=\"startIcon\"\n            :icon-size=\"iconSize\"\n          />\n          <!-- @slot @deprecated Use startIcon -->\n          <slot\n            v-else\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          :class=\"['d-input-icon', 'd-input-icon--right', endIconClass]\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for end icon -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      v-bind=\"messagesChildProps\"\n      :id=\"messagesId\"\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n} from './InputConstants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n} from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { DtValidationMessages } from '@/components/ValidationMessages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/Text';\nimport { MessagesMixin } from '@/common/mixins/input';\n\nconst isValidInputSize = ordinalSizeValidator(INPUT_ICON_SIZES);\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search, color\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input.\n     * Can also be overridden with a slot of the same name.\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: isValidInputSize,\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Overrides the label text size. When not provided, the label size\n     * is derived from the component size prop.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n      hasSlotContent,\n      isComposing: false,\n      justEndedComposition: false,\n      messagesId: getUniqueString(),\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return String(this.size) === INPUT_SIZES.DEFAULT || String(this.size) === '300';\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[String(this.size)];\n    },\n\n    isValidSize () {\n      return isValidInputSize(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        compositionstart: () => {\n          this.isComposing = true;\n        },\n\n        compositionend: () => {\n          this.isComposing = false;\n          this.justEndedComposition = true;\n          const val = this.$refs.input.value;\n          this.$emit('update:modelValue', val);\n          // Clear the flag after the current synchronous event processing so\n          // Firefox's post-compositionend input event is skipped, but the\n          // next real user input (a separate browser task) is not.\n          Promise.resolve().then(() => { this.justEndedComposition = false; });\n        },\n\n        input: async event => {\n          if (this.isComposing) return;\n          if (this.justEndedComposition) return;\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    ariaInvalid () {\n      return this.inputState === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showMessages && this.validationMessages.length > 0 ? this.messagesId : undefined;\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.modelValue);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.CRITICAL;\n      }\n    },\n\n    shouldValidateLength () {\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    resolvedLabelSize () {\n      if (this.labelSize != null) return this.labelSize;\n      const sizeStr = String(this.size);\n      // xl/500 exceeds label's max size — cap at lg/400\n      if (sizeStr === 'xl' || sizeStr === '500') return sizeStr === '500' ? '400' : 'lg';\n      return this.size;\n    },\n\n    resolvedDescriptionSize () {\n      const map = {\n        100: 'xs', 200: 'xs', 300: 'sm', 400: 'sm', 500: 'md',\n        xs: 'xs', sm: 'xs', md: 'sm', lg: 'sm', xl: 'md',\n      };\n      return map[String(this.size)] || 'sm';\n    },\n\n    resolvedDescriptionDensity () {\n      const sizeStr = String(this.size);\n      return (sizeStr === 'xl' || sizeStr === '500') ? '300' : undefined;\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    modelValue: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n\n        // Set textarea value programmatically to avoid attribute binding\n        // Skip during IME composition to avoid interrupting in-progress input\n        if (this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== newValue) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    // Set initial textarea value programmatically\n    if (this.isTextarea && this.$refs.input) {\n      this.$refs.input.value = this.modelValue;\n    }\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.startIcon || this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.endIcon || this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n\n    runValidations () {\n      if (!this.label && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/input/input.js

@@ -1,20 +1,21 @@
 import { DESCRIPTION_SIZE_TYPES as e, VALIDATION_MESSAGE_TYPES as t } from "../../common/constants/index.js";
-import { getUniqueString as n, getValidationState as r, hasSlotContent as i, removeClassStyleAttrs as a } from "../../common/utils/index.js";
-import { MessagesMixin as o } from "../../common/mixins/input.js";
-import { t as s } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import c from "../validation-messages/validation-messages.js";
-import { TEXT_SIZE_MODIFIERS as l, TEXT_STRENGTH_MODIFIERS as u } from "../text/text-constants.js";
-import d from "../text/text.js";
-import { INPUT_ICON_SIZES as f, INPUT_SIZES as p, INPUT_SIZE_CLASSES as m, INPUT_STATE_CLASSES as h, INPUT_TYPES as g } from "./input-constants.js";
-import { createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createTextVNode as x, createVNode as S, mergeProps as C, normalizeClass as w, normalizeStyle as T, openBlock as E, renderSlot as D, resolveComponent as O, toDisplayString as k, toHandlers as A, withCtx as j } from "vue";
+import { ordinalSizeValidator as n } from "../../common/validators/index.js";
+import { getUniqueString as r, getValidationState as i, hasSlotContent as a, removeClassStyleAttrs as o } from "../../common/utils/index.js";
+import { MessagesMixin as s } from "../../common/mixins/input.js";
+import { t as c } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import l from "../validation-messages/validation-messages.js";
+import { TEXT_SIZE_MODIFIERS as u, TEXT_STRENGTH_MODIFIERS as d } from "../text/text-constants.js";
+import f from "../text/text.js";
+import { INPUT_ICON_SIZES as p, INPUT_SIZES as m, INPUT_SIZE_CLASSES as h, INPUT_STATE_CLASSES as g, INPUT_TYPES as _ } from "./input-constants.js";
+import { createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, mergeProps as w, normalizeClass as T, normalizeStyle as E, openBlock as D, renderSlot as O, resolveComponent as k, toDisplayString as A, toHandlers as j, withCtx as M } from "vue";
 //#region components/Input/Input.vue
-var M = {
+var N = n(p), P = {
 	name: "DtInput",
 	components: {
-		DtValidationMessages: c,
-		DtText: d
+		DtValidationMessages: l,
+		DtText: f
 	},
-	mixins: [o],
+	mixins: [s],
 	inheritAttrs: !1,
 	props: {
 		name: {
@@ -23,8 +24,8 @@ var M = {
 		},
 		type: {
 			type: String,
-			default: g.TEXT,
-			validator: (e) => Object.values(g).includes(e)
+			default: _.TEXT,
+			validator: (e) => Object.values(_).includes(e)
 		},
 		modelValue: {
 			type: [String, Number],
@@ -57,7 +58,7 @@ var M = {
 		size: {
 			type: [String, Number],
 			default: 300,
-			validator: (e) => Object.keys(f).includes(String(e))
+			validator: N
 		},
 		inputClass: {
 			type: [
@@ -94,12 +95,12 @@ var M = {
 		labelSize: {
 			type: [String, Number],
 			default: null,
-			validator: (e) => l.label.includes(String(e))
+			validator: (e) => u.label.includes(String(e))
 		},
 		labelStrength: {
 			type: String,
 			default: null,
-			validator: (e) => Object.keys(u).includes(e)
+			validator: (e) => Object.keys(d).includes(e)
 		},
 		labelClass: {
 			type: [
@@ -141,24 +142,24 @@ var M = {
 			isInputFocused: !1,
 			isInvalid: !1,
 			defaultLength: 0,
-			hasSlotContent: i,
+			hasSlotContent: a,
 			isComposing: !1,
 			justEndedComposition: !1,
-			messagesId: n()
+			messagesId: r()
 		};
 	},
 	computed: {
 		isTextarea() {
-			return this.type === g.TEXTAREA;
+			return this.type === _.TEXTAREA;
 		},
 		isDefaultSize() {
-			return String(this.size) === p.DEFAULT || String(this.size) === "300";
+			return String(this.size) === m.DEFAULT || String(this.size) === "300";
 		},
 		iconSize() {
-			return f[String(this.size)];
+			return p[String(this.size)];
 		},
 		isValidSize() {
-			return Object.keys(f).includes(String(this.size));
+			return N(this.size);
 		},
 		isValidDescriptionSize() {
 			return Object.values(e).includes(this.size);
@@ -181,7 +182,7 @@ var M = {
 				input: async (e) => {
 					if (this.isComposing || this.justEndedComposition) return;
 					let t = e.target.value;
-					this.type === g.FILE && (t = Array.from(e.target.files).map((e) => e.name)), this.$emit("update:modelValue", t);
+					this.type === _.FILE && (t = Array.from(e.target.files).map((e) => e.name)), this.$emit("update:modelValue", t);
 				},
 				blur: (e) => {
 					this.isInputFocused = !1, this.onBlur(e);
@@ -194,10 +195,10 @@ var M = {
 			};
 		},
 		descriptionKey() {
-			return `input-description-${n()}`;
+			return `input-description-${r()}`;
 		},
 		inputState() {
-			return r(this.validationMessages);
+			return i(this.validationMessages);
 		},
 		ariaInvalid() {
 			return this.inputState === t.CRITICAL ? "true" : void 0;
@@ -262,10 +263,10 @@ var M = {
 			return e === "xl" || e === "500" ? "300" : void 0;
 		},
 		sizeModifierClass() {
-			return this.isDefaultSize || !this.isValidSize ? "" : m[this.inputComponent][String(this.size)];
+			return this.isDefaultSize || !this.isValidSize ? "" : h[this.inputComponent][String(this.size)];
 		},
 		stateClass() {
-			return [h[this.inputState]];
+			return [g[this.inputState]];
 		}
 	},
 	watch: {
@@ -283,7 +284,7 @@ var M = {
 		this.isTextarea && this.$refs.input && (this.$refs.input.value = this.modelValue), this.runValidations();
 	},
 	methods: {
-		removeClassStyleAttrs: a,
+		removeClassStyleAttrs: o,
 		inputClasses() {
 			return [
 				"d-input__input",
@@ -341,11 +342,11 @@ var M = {
 			!this.label && !this.$attrs["aria-label"] && console.info("[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.");
 		}
 	}
-}, N = ["aria-details"], P = { key: 0 }, F = {
+}, F = ["aria-details"], I = { key: 0 }, L = {
 	key: 1,
 	"data-qa": "dt-input-length-description",
 	class: "d-input__length-description"
-}, I = ["read-only"], L = [
+}, R = ["read-only"], z = [
 	"name",
 	"disabled",
 	"autocomplete",
@@ -353,7 +354,7 @@ var M = {
 	"aria-label",
 	"aria-invalid",
 	"aria-describedby"
-], R = [
+], B = [
 	"value",
 	"name",
 	"type",
@@ -364,23 +365,23 @@ var M = {
 	"aria-invalid",
 	"aria-describedby"
 ];
-function z(e, t, n, r, i, a) {
-	let o = O("dt-text"), s = O("dt-validation-messages");
-	return E(), y("div", {
+function V(e, t, n, r, i, a) {
+	let o = k("dt-text"), s = k("dt-validation-messages");
+	return D(), b("div", {
 		ref: "container",
-		class: w([
+		class: T([
 			"d-input__root",
 			{ "d-input--hidden": n.hidden },
 			e.$attrs.class
 		]),
-		style: T(e.$attrs.style),
+		style: E(e.$attrs.style),
 		"data-qa": "dt-input"
-	}, [b("label", {
+	}, [x("label", {
 		class: "d-input__label",
 		"aria-details": e.$slots.description || n.description ? a.descriptionKey : void 0,
 		"data-qa": "dt-input-label-wrapper"
 	}, [
-		D(e.$slots, "label", {}, () => [n.showLabel && n.label ? (E(), _(o, {
+		O(e.$slots, "label", {}, () => [n.showLabel && n.label ? (D(), v(o, {
 			key: 0,
 			ref: "label",
 			"data-qa": "dt-input-label",
@@ -388,16 +389,16 @@ function z(e, t, n, r, i, a) {
 			size: a.resolvedLabelSize,
 			strength: n.labelStrength,
 			tone: "secondary",
-			class: w(["d-input__label-text", n.labelClass])
+			class: T(["d-input__label-text", n.labelClass])
 		}, {
-			default: j(() => [x(k(n.label), 1)]),
+			default: M(() => [S(A(n.label), 1)]),
 			_: 1
 		}, 8, [
 			"size",
 			"strength",
 			"class"
-		])) : v("", !0)]),
-		i.hasSlotContent(e.$slots.description) || n.description || a.shouldValidateLength ? (E(), _(o, {
+		])) : y("", !0)]),
+		i.hasSlotContent(e.$slots.description) || n.description || a.shouldValidateLength ? (D(), v(o, {
 			key: 0,
 			id: a.descriptionKey,
 			ref: "description",
@@ -406,41 +407,41 @@ function z(e, t, n, r, i, a) {
 			tone: "tertiary",
 			density: a.resolvedDescriptionDensity,
 			as: "div",
-			class: w([
+			class: T([
 				"d-input__description",
 				"d-description",
 				n.descriptionClass
 			]),
 			"data-qa": "dt-input-description"
 		}, {
-			default: j(() => [i.hasSlotContent(e.$slots.description) || n.description ? (E(), y("div", P, [D(e.$slots, "description", {}, () => [x(k(n.description), 1)])])) : v("", !0), a.shouldValidateLength ? (E(), y("div", F, k(a.validationProps.length.description), 1)) : v("", !0)]),
+			default: M(() => [i.hasSlotContent(e.$slots.description) || n.description ? (D(), b("div", I, [O(e.$slots, "description", {}, () => [S(A(n.description), 1)])])) : y("", !0), a.shouldValidateLength ? (D(), b("div", L, A(a.validationProps.length.description), 1)) : y("", !0)]),
 			_: 3
 		}, 8, [
 			"id",
 			"size",
 			"density",
 			"class"
-		])) : v("", !0),
-		b("div", {
-			class: w(a.inputWrapperClasses()),
+		])) : y("", !0),
+		x("div", {
+			class: T(a.inputWrapperClasses()),
 			"read-only": n.disabled === !0 ? !0 : void 0
 		}, [
-			b("span", {
-				class: w([
+			x("span", {
+				class: T([
 					"d-input-icon",
 					"d-input-icon--left",
 					n.startIconClass
 				]),
 				"data-qa": "dt-input-left-icon-wrapper",
 				onFocusout: t[0] || (t[0] = (...e) => a.onBlur && a.onBlur(...e))
-			}, [e.$slots.startIcon ? D(e.$slots, "startIcon", {
+			}, [e.$slots.startIcon ? O(e.$slots, "startIcon", {
 				key: 0,
 				iconSize: a.iconSize
-			}) : D(e.$slots, "leftIcon", {
+			}) : O(e.$slots, "leftIcon", {
 				key: 1,
 				iconSize: a.iconSize
 			})], 34),
-			a.isTextarea ? (E(), y("textarea", C({
+			a.isTextarea ? (D(), b("textarea", w({
 				key: 0,
 				ref: "input",
 				name: n.name,
@@ -452,7 +453,7 @@ function z(e, t, n, r, i, a) {
 				"aria-invalid": a.ariaInvalid,
 				"aria-describedby": a.ariaDescribedBy,
 				"data-qa": "dt-input-input"
-			}, a.removeClassStyleAttrs(e.$attrs), A(a.inputListeners, !0)), null, 16, L)) : (E(), y("input", C({
+			}, a.removeClassStyleAttrs(e.$attrs), j(a.inputListeners, !0)), null, 16, z)) : (D(), b("input", w({
 				key: 1,
 				ref: "input",
 				value: n.modelValue,
@@ -466,26 +467,26 @@ function z(e, t, n, r, i, a) {
 				"aria-invalid": a.ariaInvalid,
 				"aria-describedby": a.ariaDescribedBy,
 				"data-qa": "dt-input-input"
-			}, a.removeClassStyleAttrs(e.$attrs), A(a.inputListeners, !0)), null, 16, R)),
-			b("span", {
-				class: w([
+			}, a.removeClassStyleAttrs(e.$attrs), j(a.inputListeners, !0)), null, 16, B)),
+			x("span", {
+				class: T([
 					"d-input-icon",
 					"d-input-icon--right",
 					n.endIconClass
 				]),
 				"data-qa": "dt-input-right-icon-wrapper",
 				onFocusout: t[1] || (t[1] = (...e) => a.onBlur && a.onBlur(...e))
-			}, [e.$slots.endIcon ? D(e.$slots, "endIcon", {
+			}, [e.$slots.endIcon ? O(e.$slots, "endIcon", {
 				key: 0,
 				iconSize: a.iconSize,
 				clear: a.clearInput
-			}) : D(e.$slots, "rightIcon", {
+			}) : O(e.$slots, "rightIcon", {
 				key: 1,
 				iconSize: a.iconSize,
 				clear: a.clearInput
 			})], 34)
-		], 10, I)
-	], 8, N), S(s, C(e.messagesChildProps, {
+		], 10, R)
+	], 8, F), C(s, w(e.messagesChildProps, {
 		id: i.messagesId,
 		"validation-messages": a.validationMessages,
 		"show-messages": e.showMessages,
@@ -498,8 +499,8 @@ function z(e, t, n, r, i, a) {
 		"class"
 	])], 6);
 }
-var B = /* @__PURE__ */ s(M, [["render", z]]);
+var H = /* @__PURE__ */ c(P, [["render", V]]);
 //#endregion
-export { B as default };
+export { H as default };
 
 //# sourceMappingURL=input.js.map