{"version":3,"file":"singleInputField-CCOAJzVW.js","sources":["../../../../Coloplast.UI/src/multisite/components/formElements/singleInputField.vue"],"sourcesContent":["<template>\r\n\t<div :class=\"dynamicClass\" :id=\"'scrolltarget-' + fieldName\" v-if=\"!isHidden\">\r\n\t\t<label v-if=\"label\" :for=\"fieldId\">{{ label }}</label>\r\n\t\t<div class=\"c-single-input__field\" :style=\"calculatedFieldSizeStyle\">\r\n\t\t\t<input\r\n\t\t\t\t:id=\"fieldId\"\r\n\t\t\t\t:type=\"clientSideInputType\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:value=\"localModelValue\"\r\n\t\t\t\t:placeholder=\"placeholderText\"\r\n\t\t\t\t:tabindex=\"0\"\r\n\t\t\t\t:required=\"required\"\r\n\t\t\t\t:maxlength=\"maxLength\"\r\n\t\t\t\t:readonly=\"readOnly\"\r\n\t\t\t\t:disabled=\"readOnly\"\r\n\t\t\t\t:min=\"min\"\r\n\t\t\t\t:max=\"max\"\r\n\t\t\t\t:inputmode=\"inputMode\"\r\n\t\t\t\t:aria-invalid=\"hasError(fieldName) || null\"\r\n\t\t\t\t:aria-errormessage=\"'error_' + fieldId\"\r\n\t\t\t\t:data-field-name=\"fieldName\"\r\n\t\t\t\t@focus=\"onFocus\"\r\n\t\t\t\t@blur=\"onBlur\"\r\n\t\t\t\t@input=\"onInput\"\r\n\t\t\t\t@keyup=\"onKeyUp\"\r\n\t\t\t/>\r\n\t\t\t<a class=\"c-single-input__link\" v-if=\"hasLink\" :href=\"linkUrl\"><DsText text-type=\"body-md\" text-style=\"medium\" html-element=\"span\">{{ linkText }}</DsText></a>\r\n\t\t</div>\r\n\t\t<div :id=\"'error_' + fieldId\" :data-tracking-name=\"trackingName\">\r\n\t\t\t<span\r\n\t\t\t\tclass=\"error show-error validation-error\"\r\n\t\t\t\tv-if=\"hasErrorType(fieldName, 'requiredError')\"\r\n\t\t\t\t>{{ requiredErrorText }}</span\r\n\t\t\t>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"error show-error max-length-error\"\r\n\t\t\t\tv-if=\"hasErrorType(fieldName, 'maxLengthError')\"\r\n\t\t\t\t>{{ maxLengthErrorText }}</span\r\n\t\t\t>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"error show-error format-error\"\r\n\t\t\t\tv-if=\"hasErrorType(fieldName, 'formatError')\"\r\n\t\t\t\t>{{ formatErrorText }}</span\r\n\t\t\t>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"error show-error api-validation-error\"\r\n\t\t\t\tv-if=\"hasErrorType(fieldName, 'apiValidationError')\"\r\n\t\t\t\t>{{ apiValidationError }}</span\r\n\t\t\t>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<script>\r\nimport store from 'shared/store';\r\nimport { trackingFieldName, validateFieldState } from 'multisite/services/checkoutHelperService.js';\r\nimport { addressTypes } from 'shared/settings/constants';\r\nimport { DsText } from \"@coloplast/design-system\";\r\n\r\nexport default {\r\n\tname: 'single-input-field',\r\n\tstore,\r\n\tcomponents: {\r\n\t\tDsText,\r\n\t},\r\n\tprops: {\r\n\t\tmodelValue: [String, Number],\r\n\t\tsubmitted: Boolean,\r\n\t\tfieldId: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tlabel: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tname: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tfieldName: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\trequired: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false,\r\n\t\t},\r\n\t\treadOnly: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false,\r\n\t\t},\r\n\t\tlinkText: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tlinkUrl: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tmaxLength: {\r\n\t\t\ttype: Number,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tmaxLengthErrorText: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: '',\r\n\t\t},\r\n\t\tmax: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tmin: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\trequiredErrorText: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: '',\r\n\t\t},\r\n\t\tformatErrorText: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: '',\r\n\t\t},\r\n\t\tplaceholderText: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: '',\r\n\t\t},\r\n\t\tclientSideInputType: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: 'text',\r\n\t\t},\r\n\t\tinputMode: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\tvalidatePattern: {\r\n\t\t\tdefault: null,\r\n\t\t},\r\n\t\terrors: {\r\n\t\t\ttype: Object,\r\n\t\t\tdefault: () => ({}),\r\n\t\t},\r\n\t\t/** @type {function(fieldName: string, state: Object)} */\r\n\t\tupdateFieldError: {\r\n\t\t\ttype: Function,\r\n\t\t},\r\n\t\tavailableForAlternativeAddresses: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false,\r\n\t\t},\r\n\t\taddressType: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: 'shippingAddress',\r\n\t\t},\r\n\t},\r\n\temits: ['update:modelValue', 'blur', 'focus', 'keyup', 'validate'],\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tisDirty: false,\r\n\t\t\thasBlur: false,\r\n\t\t\ttrackingName: trackingFieldName(this.fieldName),\r\n\t\t\tlocalModelValue: this.modelValue\r\n\t\t};\r\n\t},\r\n\tcomputed: {\r\n\t\tapiValidationError() {\r\n\t\t\treturn this.errors[this.fieldName]\r\n\t\t\t\t? this.errors[this.fieldName].apiValidationError\r\n\t\t\t\t: '';\r\n\t\t},\r\n\t\tnumCharacters() {\r\n\t\t\tif (this.localModelValue) {\r\n\t\t\t\treturn this.localModelValue.length;\r\n\t\t\t}\r\n\t\t\treturn 0;\r\n\t\t},\r\n\t\tcalculatedFieldSizeStyle() {\r\n\t\t\treturn `--field-size: ${this.numCharacters}ch`;\r\n\t\t},\r\n\t\tdynamicClass() {\r\n\t\t\tif (this.hasLink) {\r\n\t\t\t\treturn \"c-single-input c-single-input--has-link\";\r\n\t\t\t}\r\n\t\t\treturn \"c-single-input\";\r\n\t\t},\r\n\t\thasLink() {\r\n\t\t\treturn this.linkText !== null && this.linkText?.length > 0 && this.linkUrl !== null && this.linkUrl?.length > 0;\r\n\t\t},\r\n\t\tisHidden() {\r\n\t\t\treturn (\r\n\t\t\t\tthis.addressType !== addressTypes.SHIPPING_ADDRESS &&\r\n\t\t\t\t!this.availableForAlternativeAddresses\r\n\t\t\t);\r\n\t\t},\r\n\t\tisDirtyBlur() {\r\n\t\t\treturn this.hasBlur && this.isDirty;\r\n\t\t},\r\n\t},\r\n\twatch: {\r\n\t\tmodelValue(newVal) {\r\n\t\t\tthis.localModelValue = newVal;\r\n\t\t\tconst shouldClearApiError = true;\r\n\t\t\tthis.validateField(shouldClearApiError);\r\n\t\t},\r\n\t\tapiValidationError() {\r\n\t\t\tthis.validateField();\r\n\t\t},\r\n\t},\r\n\tmounted() {\r\n\t\tthis.validateField();\r\n\t},\r\n\tmethods: {\r\n\t\thasErrorType(item, type) {\r\n\t\t\treturn (this.isDirtyBlur || this.submitted) && this.errors[item] ? this.errors[item][type] : false;\r\n\t\t},\r\n\t\thasError(item) {\r\n\t\t\treturn this.isDirtyBlur || this.submitted ? this.errors[item] && !this.errors[item].isValid : false;\r\n\t\t},\r\n\t\tvalidateField(shouldClearApiError) {\r\n\t\t\tconst validationResult = validateFieldState(this.localModelValue, {\r\n\t\t\t\trequired: this.required,\r\n\t\t\t\tmaxLength: this.maxLength,\r\n\t\t\t\tvalidatePattern: this.validatePattern,\r\n\t\t\t\tapiValidationError: shouldClearApiError ? '' : this.apiValidationError,\r\n\t\t\t});\r\n\t\t\tif (this.updateFieldError) {\r\n\t\t\t\tthis.updateFieldError(this.fieldName, validationResult);\r\n\t\t\t}\r\n\t\t\tthis.$emit('validate', {\r\n\t\t\t\tkey: this.fieldName,\r\n\t\t\t\tvalue: validationResult,\r\n\t\t\t});\r\n\t\t},\r\n\t\tonBlur(event) {\r\n\t\t\tthis.hasBlur = true;\r\n\t\t\tthis.$emit('blur', event);\r\n\t\t},\r\n\t\tonFocus(event) {\r\n\t\t\tthis.hasBlur = false;\r\n\t\t\tthis.$emit('focus', event);\r\n\t\t},\r\n\t\tonInput(event) {\r\n\t\t\tthis.isDirty = true;\r\n\t\t\tthis.localModelValue = event.target.value;\r\n\t\t\tthis.$emit('update:modelValue', event.target.value);\r\n\t\t},\r\n\t\tonKeyUp(event) {\r\n\t\t\tthis.$emit('keyup', event);\r\n\t\t},\r\n\t},\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import \"multisite/styles/settings/settings\";\r\n@import \"multisite/styles/tools/tools\";\r\n.c-single-input {\r\n\t&--has-link &__field {\r\n\t\tdisplay: flex;\r\n\t\tgap: ds-space(4);\r\n\r\n\t\tinput[readonly] {\r\n\t\t\twidth: var(--field-size);\r\n\r\n\t\t\t@supports(field-sizing: content) {\r\n\t\t\t\tfield-sizing: content;\r\n\t\t\t\twidth: auto;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&__link {\r\n\t\ttext-decoration: none;\r\n\t\ttransform: translateY(-.2em);\r\n\t}\r\n}\r\n</style>\r\n"],"names":["_sfc_main","store","DsText","trackingFieldName","_a","_b","addressTypes","newVal","item","type","shouldClearApiError","validationResult","validateFieldState","event","$options","_createElementBlock","$props","_hoisted_2","_createElementVNode","$data","args","_createVNode","_component_DsText","_hoisted_6","_toDisplayString","_hoisted_7","_hoisted_8","_hoisted_9"],"mappings":"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"}