https://www.freightos.com/wp-content/themes/freightos/inc/vue/vue-…/clearit-calc-input.js?ver=1791547399

1Vue.component('clearit-calc-input', {
2	data() {
3		return {
4			input_value: null,
5			localize: freightos_localize
6		}
7	},
8	props: {
9		settings: {
10			type: Object,
11			default: {}
12		},
13		input_name: {
14			type: String,
15			default: ''
16		},
17		form_data: {
18			type: Object,
19			default: {}
20		},
21	},
22	created() {
23		if( this.form_data.hasOwnProperty( this.input_name ) ){
24			this.input_value = this.form_data[this.input_name];
25		}
26	},
27	watch: {
28		input_value() {
29			this._input_change();
30		},
31	},
32	computed: {
33		field_title(){
34			let title = '';
35			switch( this.input_name ){
36				case 'shipping_from':
37					// title = 'Where are you shipping from?';
38					title = this.settings.hasOwnProperty('shipping_from_title') ? this.settings.shipping_from_title : '';
39					title += ' <span class="req">*</span>';
40					break;
41
42				case 'shipping_method':
43					// title = 'How are you shipping?';
44					title = this.settings.hasOwnProperty('shipping_method_title') ? this.settings.shipping_method_title : '';
45					title += ' <span class="req">*</span>';
46					break;
47
48				case 'freight_charge':
49					// title = 'Freight Charges (optional)';
50					title = this.settings.hasOwnProperty('freight_charge_title') ? this.settings.freight_charge_title : '';
51					// title += '<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="isdisii" class="feather feather-help-circle" style="margin-left: 5px; color: rgb(15, 166, 139);"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line> </svg>';
52
53					break;
54			}
55
56			return title;
57		},
58	},
59	methods: {
60		_input_change(){
61			this.$emit( 'change', this.input_name, this.input_value );
62		},
63	},
64	template: `<div class="clearit-calc-input" :data-type="input_name">
65		<div class="clearit-calc-input-inner">
66			<div 
67				v-if="field_title" 
68				class="clearit-calc-input-field-title"
69				v-html="field_title"
70			></div>
71
72			<div class="clearit-calc-input-field">
73				<div class="clearit-calc-input-field-inner">
74					<template v-if="input_name == 'hts_search_string'">
75						<input type="text" placeholder="Enter an HTS number or product description" v-model="input_value" />
76					</template>
77					<template v-else-if="input_name == 'bond_type'">
78						<label>
79							<input type="radio" :value="1" v-model="input_value">
80							<strong v-if="settings.single_entry_bond_title" v-html="settings.single_entry_bond_title"></strong> 
81							<i v-if="settings.single_entry_bond_subtitle" v-html="settings.single_entry_bond_subtitle"></i>
82						</label>
83						<label>
84							<input type="radio" :value="2" v-model="input_value">
85							<strong v-if="settings.annual_bond_title" v-html="settings.annual_bond_title"></strong> 
86							<i v-if="settings.annual_bond_subtitle" v-html="settings.annual_bond_subtitle"></i>
87						</label>
88						<label>
89							<input type="radio" :value="3" v-model="input_value">
90							<strong v-if="settings.own_bond_title" v-html="settings.own_bond_title"></strong> 
91							<i v-if="settings.own_bond_subtitle" v-html="settings.own_bond_subtitle"></i>
92						</label>
93					</template>
94					<template v-else-if="input_name == 'shipping_from'">
95						<select v-model="input_value">
96							<optgroup 
97								v-for="(group_countries, label) in localize.countries"
98								:label="typeof label === 'string' ? label : ''"
99							>
100								<option 
101									v-for="(name, code) in group_countries"
102									:value="code"
103									:key="code"
104									v-html="name"
105								></option>
106							</optgroup>
107						</select>
108					</template>
109					<template v-else-if="input_name == 'shipping_method'">
110						<div class="clearit-calc-buttons-switcher">
111							<label title="Truck" data-icon="truck">
112								<input type="radio" :value="1" v-model="input_value">
113								<span></span>
114							</label>
115							<label title="Ocean" data-icon="ocean">
116								<input type="radio" :value="2" v-model="input_value">
117								<span></span>
118							</label>
119							<label title="Air" data-icon="air">
120								<input type="radio" :value="3" v-model="input_value">
121								<span></span>
122							</label>
123						</div>
124					</template>
125					<template v-else-if="input_name == 'freight_charge'">
126						<input type="number" min="0" v-model="input_value" />
127					</template>
128					<template v-else>
129						<input type="text" v-model="input_value" />
130					</template>

131				</div>
132			</div>
133		</div>
134	</div>`
135});