{"version":3,"file":"selectField-BoLThyTl.js","sources":["../../../../Coloplast.UI/src/multisite/components/formElements/selectField.vue"],"sourcesContent":["<template>\r\n\t<div :id=\"'scrolltarget-' + fieldName\" v-if=\"!isHidden\" class=\"select-field\">\r\n\t\t<FormKit\r\n\t\t\t:id=\"fieldId\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:data-field-name=\"fieldName\"\r\n\t\t\ttype=\"select\"\r\n\t\t\t:label=\"label\"\r\n\t\t\t:aria-invalid=\"hasError(fieldName) || null\"\r\n\t\t\t:aria-errormessage=\"'error_' + fieldId\"\r\n\t\t\t:disabled=\"readOnly\"\r\n\t\t\tv-bind=\"$attrs\"\r\n\t\t\t:wrapper-class=\"'c-global-checkout__form-section  field-' + fieldName\"\r\n\t\t\t:class=\"[\r\n\t\t\t\t{ errorState: 'is-error' },\r\n\t\t\t\t{ 'is-placeholder': !value || value === placeholderText },\r\n\t\t\t\t$attrs.class\r\n\t\t\t]\"\r\n\t\t\t:data-testid=\"'select-' + fieldName\"\r\n\t\t\tv-model=\"value\"\r\n\t\t\t@blur=\"onBlur\"\r\n\t\t>\r\n\t\t\t<option\r\n\t\t\t\tv-for=\"(item, index) in optionsList\"\r\n\t\t\t\t:key=\"item.key\"\r\n\t\t\t\t:value=\"item.key || ''\"\r\n\t\t\t>\r\n\t\t\t\t{{ item.value || item.key }}\r\n\t\t\t</option>\r\n\t\t</FormKit>\r\n\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>\r\n\t\t\t\t{{ requiredErrorText }}\r\n\t\t\t</span>\r\n\t\t\t<span class=\"error show-error api-validation-error\" v-if=\"hasErrorType(fieldName, 'apiValidationError')\">\r\n\t\t\t\t{{ apiValidationError }}\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n<script>\r\nimport store from \"shared/store\";\r\nimport DropdownSingleSelect from \"./dropdownSingleSelect.vue\";\r\nimport { FormKit } from '@formkit/vue';\r\n\r\nimport {\r\n\ttrackingFieldName,\r\n\tvalidateFieldState,\r\n} from \"multisite/services/checkoutHelperService.js\";\r\nimport { addressTypes } from 'shared/settings/constants';\r\n\r\nexport default {\r\n\tname: \"select-field\",\r\n\tcomponents: {\r\n\t\tDropdownSingleSelect,\r\n\t\tFormKit,\r\n\t},\r\n\temits: ['update:modelValue', 'validate'],\r\n\tstore,\r\n\tprops: {\r\n\t\tmodelValue: String,\r\n\t\tsubmitted: Boolean,\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\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\toptions: {\r\n\t\t\ttype: Array,\r\n\t\t\tdefault: [],\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\tplaceholderText: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: \"\",\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\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\tdata() {\r\n\t\treturn {\r\n\t\t\ttrackingName: trackingFieldName(this.fieldName),\r\n\t\t\thasBlur: false,\r\n\t\t\tvalue: this.modelValue,\r\n\t\t};\r\n\t},\r\n\tcomputed: {\r\n\t\toptionsList() {\r\n\t\t\treturn[{ key: null, value: this.placeholderText }, ...this.options];\r\n\t\t},\r\n\t\tisHidden() {\r\n\t\t\treturn this.addressType !== addressTypes.SHIPPING_ADDRESS && !this.availableForAlternativeAddresses;\r\n\t\t},\r\n\t\tapiValidationError() {\r\n\t\t\treturn this.errors[this.fieldName]?.apiValidationError ?? '';\r\n\t\t},\r\n\t},\r\n\twatch: {\r\n\t\tmodelValue() {\r\n\t\t\tthis.validateField();\r\n\t\t},\r\n\t\tvalue(newValue, oldValue) {\r\n\t\t\tif (newValue != oldValue) {\r\n\t\t\t\tthis.$emit('update:modelValue', newValue);\r\n\t\t\t};\r\n\t\t},\r\n\t\toptions(newVal) {\r\n\t\t\tif (newVal.length === 1) {\r\n\t\t\t\tthis.value = newVal[0].key;\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\thasErrorType(item, type) {\r\n\t\t\treturn (this.hasBlur || this.submitted) && this.errors[item]\r\n\t\t\t\t? this.errors[item][type]\r\n\t\t\t\t: false;\r\n\t\t},\r\n\t\thasError(item) {\r\n\t\t\treturn this.hasBlur || this.submitted\r\n\t\t\t\t? this.errors[item] && !this.errors[item].isValid\r\n\t\t\t\t: false;\r\n\t\t},\r\n\t\tvalidateField() {\r\n\t\t\tconst validationResult = validateFieldState(this.modelValue, {\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});\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},\r\n\t},\r\n\tmounted() {\r\n\r\n\t\tthis.validateField();\r\n\t},\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n$mobile-view: 640px;\r\n.mobile-select-field {\r\n\tdisplay: none;\r\n\r\n\t@media (max-width: $mobile-view) {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n\r\n</style>\r\n\r\n<style lang=\"scss\">\r\n@import \"multisite/styles/settings/settings\";\r\n@import \"multisite/styles/tools/tools\";\r\n\r\n$mobile-view: 640px; // borrowed from _c-global-checkout.scss\r\n\r\n.select-field {\r\n\t.formkit-label {\r\n\t\tpadding: 0;\r\n\t}\r\n\t.formkit-wrapper {\r\n\t\tmax-width: none;\r\n\t}\r\n\t.formkit-outer {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.formkit-inner {\r\n\t\tbox-shadow: var(--fk-border-box-shadow);\r\n\t\toutline: none;\r\n\t\t&:has(:focus-visible) {\r\n\t\t\tbox-shadow: 0 0 0 1px var(--fk-color-border-focus);\r\n\t\t\toutline: 4px solid var(--ds-color-focus-default);\r\n\t\t}\r\n\t}\r\n\tselect.formkit-input {\r\n\t\tborder: none;\r\n\t\toutline: none;\r\n\t\tline-height: t-rem(21px); // necessary to make the FormKit fields match the other fields in the checkout\r\n\r\n\t\t&:focus {\r\n\t\t\tborder: none;\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: $mobile-view) {\r\n\t\t.field-title {\r\n\t\t\t.formkit-inner {\r\n\t\t\t\twidth: 50%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n</style>\r\n"],"names":["_sfc_main","DropdownSingleSelect","FormKit","store","trackingFieldName","addressTypes","_a","newValue","oldValue","newVal","item","type","validationResult","validateFieldState","event","$options","_createElementBlock","$props","_createVNode","_component_FormKit","_mergeProps","_ctx","$data","$event","_openBlock","_Fragment","_renderList","index","_toDisplayString","_hoisted_2","_createElementVNode","_hoisted_4","_hoisted_5"],"mappings":"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"}