PluginProbe
Bit Form – Contact Form, Payment Forms, Multi Step Forms, Calculator & Custom Form Builder / V3.3.2
Bit Form – Contact Form, Payment Forms, Multi Step Forms, Calculator & Custom Form Builder vV3.3.2
V3.3.2 3.3.1 V-3.3.0 3.2.2 3.2.1 3.2.0 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 V3.0.3 V3.0.2 -3.0.1 V_3.0.0 1.1.1 1.1.8 1.2 1.3 1.4 1.4.18 1.5.2 1.9 2.0 2.10.0 All 139 releases
← All changes | includes/Frontend/Form/View/Theme/Fields/DropdownField.php +379 -280 2.0 → V3.3.2 View file →
@@ -1,17 +1,20 @@
1 1 <?php
2 2
3 3 namespace BitCode\BitForm\Frontend\Form\View\Theme\Fields;
4 4
5 -class DropdownField {
6 - public static function init($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null) {
7 - $inputWrapper = new InputWrapper($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
5 +class DropdownField
6 +{
7 + public static function init($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
8 + {
9 + $inputWrapper = new ClassicInputWrapper($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
8 10 $input = self::field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
9 11 return $inputWrapper->wrapper($input);
10 12 }
11 13
12 - private static function field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null) {
13 - $fh = new FieldHelpers($field, $rowID, $form_atomic_Cls_map);
14 + private static function field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
15 + {
16 + $fh = new ClassicFieldHelpers($field, $rowID, $form_atomic_Cls_map);
14 17 $ph = isset($field->ph) ? $field->ph : '';
15 18 $val = !empty($value) ? $value : $fh->value();
16 19 $val = 'array' === gettype($val) ? ("value='" . implode(',', $val) . "'") : $val;
17 20 $name = $fh->name();
@@ -20,37 +23,15 @@
20 23 $disabledCls = isset($field->valid->disabled) ? 'disabled' : '';
21 24 $selectedOptImage = '';
22 25 $optionsList = '';
23 26 $activeList = isset($field->config->activeList) ? $field->config->activeList : null;
24 - $optionIcon = '';
25 - $allowCustomOption = isset($field->config->allowCustomOption) ? $field->config->allowCustomOption : false;
27 + $allowCustomOption = apply_filters('bitform_dropdown_allow_custom_option', false, $field);
28 + $showSearch = !$fh->property_exists_nested($field, 'config->showSearch', false);
29 + $searchMarkup = '';
26 30 $img = htmlentities("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>");
27 31
28 - if ($fh->property_exists_nested($field, 'config->optionIcon', true)) {
29 - $optionIcon = <<<OPTIONICON
30 - <img
31 - class="opt-icn {$fh->getCustomClasses('opt-icn')}"
32 - {$fh->getCustomAttributes('opt-icn')}
33 - src="{$img}"
34 - alt="BD"
35 - loading="lazy"
36 - />
32 + $selectedOptImage = apply_filters('bitform_dropdown_selected_opt_image', '', $field, $fh);
37 33
38 -OPTIONICON;
39 - }
40 -
41 - if ($fh->property_exists_nested($field, 'config->selectedOptImage', true)) {
42 - $selectedOptImage = <<<SELECTEDoPTIMAGE
43 - <img
44 - class="{$fh->getAtomicCls('selected-opt-img')} placeholder-img {$fh->getCustomClasses('selected-opt-img')}"
45 - aria-hidden="true"
46 - alt="selected option icon"
47 - src="{$img}"
48 - {$fh->getCustomAttributes('selected-opt-img')}
49 - >
50 -SELECTEDoPTIMAGE;
51 - }
52 -
53 34 if (property_exists($field, 'optionsList')) {
54 35 foreach ($field->optionsList as $key => $value) {
55 36 $dataIndex = 0;
56 37 $valueArr = (array) $value;
@@ -56,105 +37,139 @@
56 37 $valueArr = (array) $value;
57 38 $listName = array_keys($valueArr)[0];
58 39 $options = array_values($valueArr)[0];
59 40
60 - $optionsList .= <<<OPTIONSLIST
61 - <ul
62 - class="{$fh->getAtomicCls('option-list')} {$fh->getCustomClasses('option-list')}"
63 - {$fh->getCustomAttributes('option-list')}
64 - aria-hidden="true"
65 - aria-label="Option List"
66 - data-list="{$listName}"
67 - data-list-index="{$key}"
41 + $optionsList .= sprintf(
42 + '<ul
43 + %1$s
44 + class="%2$s %3$s"
45 + aria-hidden="true"
46 + aria-label="Option List"
47 + data-list="%4$s"
48 + data-list-index="%5$s"
49 + tabIndex="-1"
50 + role="listbox"
51 + >',
52 + $fh->getCustomAttributes('option-list'),
53 + $fh->getAtomicCls('option-list'),
54 + $fh->getCustomClasses('option-list'),
55 + $fh->esc_attr($listName),
56 + $key
57 + );
58 + if ($allowCustomOption) {
59 + $optionsList .= sprintf(
60 + '<li
61 + %1$s
62 + data-index=%2$s
63 + data-value="create-opt"
64 + class="option create-opt %3$s"
65 + role="option"
66 + aria-selected="false"
68 67 tabIndex="-1"
69 - role="listbox"
68 + style="display: none !important;"
70 69 >
71 -OPTIONSLIST;
72 - if ($allowCustomOption) {
73 - $optionsList .= <<<CREATEOPT
74 - <li
75 - data-index={$dataIndex}
76 - data-value="create-opt"
77 - class="option create-opt {$fh->getCustomClasses('option')}"
78 - {$fh->getCustomAttributes('option')}
79 - role="option"
80 - aria-selected="false"
81 - tabIndex="-1"
82 - style="display: none !important;"
83 - >
84 - <span
85 - class="opt-lbl-wrp {$fh->getCustomClasses('opt-lbl-wrp')}"
86 - {$fh->getCustomAttributes('opt-lbl-wrp')}
87 - >
88 - <span
89 - class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
90 - {$fh->getCustomAttributes('opt-lbl')}
91 - >
92 - Create:
93 - </span>
94 - </span>
95 - <span class="opt-prefix"></span>
96 - </li>
97 -CREATEOPT;
70 + <span
71 + %4$s
72 + class="opt-lbl-wrp %5$s"
73 + >
74 + <span
75 + %6$s
76 + class="opt-lbl %7$s"
77 + >
78 + Create:
79 + </span>
80 + </span>
81 + <span class="opt-prefix"></span>
82 + </li>',
83 + $fh->getCustomAttributes('option'),
84 + $dataIndex,
85 + $fh->getCustomClasses('option'),
86 + $fh->getCustomAttributes('opt-lbl-wrp'),
87 + $fh->getCustomClasses('opt-lbl-wrp'),
88 + $fh->getCustomAttributes('opt-lbl'),
89 + $fh->getCustomClasses('opt-lbl')
90 + );
98 91 }
99 92
100 93 foreach ($options as $opt) {
101 94 if (isset($opt->type)) {
102 95 $disableOpt = isset($opt->disabled) ? 'disabled-opt' : '';
103 - $optionsList .= <<<OPTIOINS
104 - <li data-index={$dataIndex}
105 - class="option opt-group-title {$fh->getCustomClasses('option')} {$disableOpt}"
106 - {$fh->getCustomAttributes('option')}
107 - >
108 - <span
109 - class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
110 - {$fh->getCustomAttributes('opt-lbl')}
96 + $optionsList .= sprintf(
97 + '<li
98 + data-index=%1$s
99 + %2$s
100 + class="option opt-group-title %3$s %4$s"
111 101 >
112 - {$opt->title}
113 - </span>
114 - </li>
115 -
116 -OPTIOINS;
102 + <span
103 + %5$s
104 + class="opt-lbl %6$s"
105 + >
106 + %7$s
107 + </span>
108 + </li>',
109 + $dataIndex,
110 + $fh->getCustomAttributes('option'),
111 + $fh->getCustomClasses('option'),
112 + $disableOpt,
113 + $fh->getCustomAttributes('opt-lbl'),
114 + $fh->getCustomClasses('opt-lbl'),
115 + $fh->kses_post($opt->title)
116 + );
117 117 foreach ($opt->childs as $child) {
118 118 $optVal = isset($child->val) ? $child->val : $child->lbl;
119 119 $disableOpt = (isset($opt->disabled) || isset($child->disabled)) ? 'disabled-opt' : '';
120 120 $optImage = '';
121 121 if (isset($child->img)) {
122 - $optImage = <<<OPTIMAGE
123 - <img
124 - class="opt-icn {$fh->getCustomClasses('opt-icn')}"
125 - aria-hidden="true"
126 - alt="{$child->lbl}"
127 - src="{$child->img}"
128 - {$fh->getCustomAttributes('opt-icn')}
129 - >
130 -OPTIMAGE;
122 + $optImage = sprintf(
123 + '<img
124 + %1$s
125 + class="opt-icn %2$s"
126 + aria-hidden="true"
127 + alt="%3$s"
128 + src="%4$s"
129 + >',
130 + $fh->getCustomAttributes('opt-icn'),
131 + $fh->getCustomClasses('opt-icn'),
132 + $fh->esc_attr($child->lbl),
133 + $fh->esc_url($child->img)
134 + );
131 135 }
132 - $optionsList .= <<<OPTIONS_CHILDREN
133 - <li
134 - data-index="{$dataIndex}"
135 - data-value="{$optVal}"
136 - class="option opt-group-child {$fh->getCustomClasses('option')} {$disableOpt}"
137 - {$fh->getCustomAttributes('option')}
138 - role="option"
139 - aria-selected="false"
140 - tabIndex="-1"
141 - >
142 - <span
143 - class="opt-lbl-wrp {$fh->getCustomClasses('opt-lbl-wrp')}"
144 - {$fh->getCustomAttributes('opt-lbl-wrp')}
136 + $optionsList .= sprintf(
137 + '<li
138 + %1$s
139 + data-index="%2$s"
140 + data-value="%3$s"
141 + class="option opt-group-child %4$s %5$s"
142 + role="option"
143 + aria-selected="false"
144 + tabIndex="-1"
145 145 >
146 - {$optImage}
147 - <span
148 - class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
149 - {$fh->getCustomAttributes('opt-lbl')}
146 + <span
147 + %6$s
148 + class="opt-lbl-wrp %7$s"
150 149 >
151 - {$child->lbl}
150 + %8$s
151 + <span
152 + %9$s
153 + class="opt-lbl %10$s"
154 + >
155 + %11$s
156 + </span>
152 157 </span>
153 - </span>
154 - <span class="opt-prefix" />
155 - </li>
156 -OPTIONS_CHILDREN;
158 + <span class="opt-prefix" />
159 + </li>',
160 + $fh->getCustomAttributes('option'),
161 + $dataIndex,
162 + $fh->esc_attr($optVal),
163 + $fh->getCustomClasses('option'),
164 + $disableOpt,
165 + $fh->getCustomAttributes('opt-lbl-wrp'),
166 + $fh->getCustomClasses('opt-lbl-wrp'),
167 + $optImage,
168 + $fh->getCustomAttributes('opt-lbl'),
169 + $fh->getCustomClasses('opt-lbl'),
170 + $fh->kses_post($child->lbl)
171 + );
157 172 }
158 173 } else {
159 174 $optVal = isset($opt->val) ? $opt->val : $opt->lbl;
160 175 $disableOpt = isset($opt->disabled) ? 'disabled-opt' : '';
@@ -159,43 +174,58 @@
159 174 $optVal = isset($opt->val) ? $opt->val : $opt->lbl;
160 175 $disableOpt = isset($opt->disabled) ? 'disabled-opt' : '';
161 176 $optImage = '';
162 177 if (isset($opt->img)) {
163 - $optImage = <<<OPTIMAGE
164 - <img
165 - class="opt-icn {$fh->getCustomClasses('opt-icn')}"
178 + $optImage = sprintf(
179 + '<img
180 + %1$s
181 + class="opt-icn %2$s"
166 182 aria-hidden="true"
167 - alt="{$opt->lbl}"
168 - src="{$opt->img}"
169 - {$fh->getCustomAttributes('opt-icn')}
170 - >
171 -OPTIMAGE;
183 + alt="%3$s"
184 + src="%4$s"
185 + >',
186 + $fh->getCustomAttributes('opt-icn'),
187 + $fh->getCustomClasses('opt-icn'),
188 + $fh->esc_attr($opt->lbl),
189 + $fh->esc_url($opt->img)
190 + );
172 191 }
173 - $optionsList .= <<<OPTIONS
174 - <li
175 - data-index="{$dataIndex}"
176 - data-value="{$optVal}"
177 - class="option {$fh->getCustomClasses('option')} {$disableOpt}"
178 - {$fh->getCustomAttributes('option')}
179 - role="option"
180 - aria-selected="false"
181 - tabIndex="-1"
182 - >
183 - <span
184 - class="opt-lbl-wrp {$fh->getCustomClasses('opt-lbl-wrp')}"
185 - {$fh->getCustomAttributes('opt-lbl-wrp')}
192 + $optionsList .= sprintf(
193 + '<li
194 + %1$s
195 + data-index="%2$s"
196 + data-value="%3$s"
197 + class="option %4$s %5$s"
198 + role="option"
199 + aria-selected="false"
200 + tabIndex="-1"
186 201 >
187 - {$optImage}
188 - <span
189 - class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
190 - {$fh->getCustomAttributes('opt-lbl')}
202 + <span
203 + %6$s
204 + class="opt-lbl-wrp %7$s"
191 205 >
192 - {$opt->lbl}
206 + %8$s
207 + <span
208 + %9$s
209 + class="opt-lbl %10$s"
210 + >
211 + %11$s
212 + </span>
193 213 </span>
194 - </span>
195 - <span class="opt-prefix" />
196 - </li>
197 -OPTIONS;
214 + <span class="opt-prefix" />
215 + </li>',
216 + $fh->getCustomAttributes('option'),
217 + $dataIndex,
218 + $fh->esc_attr($optVal),
219 + $fh->getCustomClasses('option'),
220 + $disableOpt,
221 + $fh->getCustomAttributes('opt-lbl-wrp'),
222 + $fh->getCustomClasses('opt-lbl-wrp'),
223 + $optImage,
224 + $fh->getCustomAttributes('opt-lbl'),
225 + $fh->getCustomClasses('opt-lbl'),
226 + $fh->kses_post($opt->lbl)
227 + );
198 228 }
199 229 }
200 230 $optionsList .= '</ul>';
201 231 $dataIndex++;
@@ -200,74 +230,70 @@
200 230 $optionsList .= '</ul>';
201 231 $dataIndex++;
202 232 }
203 233
204 - $optionsList .= <<<OPTIONSLIST
205 - <ul
206 - class="{$fh->getAtomicCls('option-list')} {$fh->getCustomClasses('option-list')} active-list"
207 - {$fh->getCustomAttributes('option-list')}
208 - aria-hidden="true"
209 - aria-label="Option List"
210 - tabIndex="-1"
211 - role="listbox"
212 - >
213 - </ul>
214 -OPTIONSLIST;
234 + $optionsList .= sprintf(
235 + '<ul
236 + %1$s
237 + class="%2$s %3$s active-list"
238 + aria-hidden="true"
239 + aria-label="Option List"
240 + tabIndex="-1"
241 + role="listbox"
242 + >
243 + </ul>',
244 + $fh->getCustomAttributes('option-list'),
245 + $fh->getAtomicCls('option-list'),
246 + $fh->getCustomClasses('option-list')
247 + );
215 248
216 249 $multiChipClass = ($fh->property_exists_nested($field, 'config->multipleSelect', true) && $fh->property_exists_nested($field, 'config->showChip', true)) ? 'multi-chip' : '';
217 250
218 - return <<<DROPDOWNFIELD
219 - <div class="{$fh->getAtomicCls('dpd-fld-container')} {$fh->getCustomClasses('dpd-fld-container')}">
220 - <div
221 - class="{$fh->getAtomicCls('dpd-fld-wrp')} {$fh->getCustomClasses('dpd-fld-wrp')} {$readonlyCls} {$disabledCls}"
222 - {$fh->getCustomAttributes('dpd-fld-wrp')}
223 - >
224 - <input
225 - {$name}
226 - {$req}
227 - type="hidden"
228 - class={$fh->getAtomicCls('dpd-hidden-input')}
229 - {$fh->disabled()}
230 - {$fh->readonly()}
231 - {$val}
232 - />
233 - <div class="{$fh->getAtomicCls('dpd-wrp')} {$fh->getCustomClasses('dpd-wrp')}"
234 - role="combobox"
235 - aria-controls=""
236 - aria-live="assertive"
237 - aria-expanded="false"
238 - tabIndex="0"
239 - aria-label="Dropdown"
240 - {$fh->getCustomAttributes('dpd-wrp')}
241 - >
242 - <div
243 - class="{$fh->getAtomicCls('selected-opt-wrp')} {$fh->getCustomClasses('selected-opt-wrp')}"
244 - {$fh->getCustomAttributes('selected-opt-wrp')}
251 + if ($showSearch) {
252 + $searchMarkup = sprintf(
253 + '<div
254 + %1$s
255 + class="%2$s %3$s"
245 256 >
246 - {$selectedOptImage}
247 - <span
248 - aria-label="Selected Option Label"
249 - class="{$fh->getAtomicCls('selected-opt-lbl')} {$multiChipClass} {$fh->getCustomClasses('selected-opt-lbl')}"
250 - {$fh->getCustomAttributes('selected-opt-lbl')}
251 - >
252 - {$ph}
253 - </span>
254 - </div>
255 - <div
256 - class="{$fh->getAtomicCls('dpd-btn-wrp')} {$fh->getCustomClasses('dpd-btn-wrp')}"
257 - {$fh->getCustomAttributes('dpd-btn-wrp')}
258 - >
257 + <input
258 + %4$s
259 + type="search"
260 + class="%5$s %6$s"
261 + placeholder="Search Country"
262 + aria-label="Search Options"
263 + aria-hidden="true"
264 + tabIndex="-1"
265 + inert
266 + />
267 + <svg
268 + %7$s
269 + class="%8$s %9$s %10$s"
270 + aria-hidden="true"
271 + width="22"
272 + height="22"
273 + role="img"
274 + title="Search icon"
275 + viewBox="0 0 24 24"
276 + fill="none"
277 + stroke="currentColor"
278 + stroke-width="2"
279 + stroke-linecap="round"
280 + stroke-linejoin="round"
281 + >
282 + <circle cx="11" cy="11" r="8" />
283 + <line x1="21" y1="21" x2="16.65" y2="16.65" />
284 + </svg>
259 285 <button
286 + %11$s
260 287 type="button"
261 - aria-label="Clear selected option value"
262 - class="{$fh->getAtomicCls('selected-opt-clear-btn')} {$fh->getCustomClasses('selected-opt-clear-btn')}"
263 - {$fh->getCustomAttributes('selected-opt-clear-btn')}
288 + aria-label="Clear search"
289 + class="%12$s %13$s %14$s"
290 + tabIndex="-1"
264 291 >
265 292 <svg
266 - width="15"
267 - height="15"
293 + width="13"
294 + height="13"
268 295 role="img"
269 - title="Cross icon"
270 296 viewBox="0 0 24 24"
271 297 fill="none"
272 298 stroke="currentColor"
273 299 stroke-width="2"
@@ -277,96 +303,169 @@
277 303 <line x1="18" y1="6" x2="6" y2="18" />
278 304 <line x1="6" y1="6" x2="18" y2="18" />
279 305 </svg>
280 306 </button>
281 - <div
282 - class="{$fh->getAtomicCls('dpd-down-btn')} {$fh->getCustomClasses('dpd-down-btn')}"
283 - {$fh->getCustomAttributes('dpd-down-btn')}
307 + </div>',
308 + $fh->getCustomAttributes('option-search-wrp'),
309 + $fh->getAtomicCls('option-search-wrp'),
310 + $fh->getCustomClasses('option-search-wrp'),
311 + $fh->getCustomAttributes('opt-search-input'),
312 + $fh->getAtomicCls('opt-search-input'),
313 + $fh->getCustomClasses('opt-search-input'),
314 + $fh->getCustomAttributes('opt-search-icn'),
315 + $fh->getAtomicCls('icn'),
316 + $fh->getAtomicCls('opt-search-icn'),
317 + $fh->getCustomClasses('opt-search-icn'),
318 + $fh->getCustomAttributes('search-clear-btn'),
319 + $fh->getAtomicCls('icn'),
320 + $fh->getAtomicCls('search-clear-btn'),
321 + $fh->getCustomClasses('search-clear-btn')
322 + );
323 + }
324 +
325 + return sprintf(
326 + '<div class="%1$s %2$s">
327 + <div
328 + %3$s
329 + class="%4$s %5$s %6$s %7$s"
330 + >
331 + <input
332 + %8$s
333 + %9$s
334 + type="text"
335 + title="Dropdown Hidden Input"
336 + class="%10$s d-none"
337 + %11$s
338 + %12$s
339 + %13$s
340 + />
341 + <div
342 + %14$s
343 + class="%15$s %16$s"
344 + role="combobox"
345 + aria-controls=""
346 + aria-haspopup="listbox"
347 + aria-live="assertive"
348 + aria-expanded="false"
349 + tabIndex="0"
350 + aria-label="Dropdown"
284 351 >
285 - <svg
286 - width="15"
287 - height="15"
288 - viewBox="0 0 24 24"
289 - title="Down icon"
290 - role="img"
291 - fill="none"
292 - stroke="currentColor"
293 - stroke-width="2"
294 - stroke-linecap="round"
295 - stroke-linejoin="round"
352 + <div
353 + %17$s
354 + class="%18$s %19$s"
296 355 >
297 - <polyline points="6 9 12 15 18 9" />
298 - </svg>
356 + %20$s
357 + <span
358 + %21$s
359 + aria-label="Selected Option Label"
360 + class="%22$s %23$s %24$s"
361 + >
362 + %25$s
363 + </span>
364 + </div>
365 + <div
366 + %26$s
367 + class="%27$s %28$s"
368 + >
369 + <button
370 + %29$s
371 + type="button"
372 + aria-label="Clear selected option value"
373 + class="%30$s %31$s"
374 + >
375 + <svg
376 + width="15"
377 + height="15"
378 + role="img"
379 + title="Cross icon"
380 + viewBox="0 0 24 24"
381 + fill="none"
382 + stroke="currentColor"
383 + stroke-width="2"
384 + stroke-linecap="round"
385 + stroke-linejoin="round"
386 + >
387 + <line x1="18" y1="6" x2="6" y2="18" />
388 + <line x1="6" y1="6" x2="18" y2="18" />
389 + </svg>
390 + </button>
391 + <div
392 + %32$s
393 + class="%33$s %34$s"
394 + >
395 + <svg
396 + width="15"
397 + height="15"
398 + viewBox="0 0 24 24"
399 + title="Down icon"
400 + role="img"
401 + fill="none"
402 + stroke="currentColor"
403 + stroke-width="2"
404 + stroke-linecap="round"
405 + stroke-linejoin="round"
406 + >
407 + <polyline points="6 9 12 15 18 9" />
408 + </svg>
409 + </div>
410 + </div>
299 411 </div>
300 - </div>
301 - </div>
302 - <div
303 - class="{$fh->getAtomicCls('option-wrp')} {$fh->getCustomClasses('option-wrp')}"
304 - {$fh->getCustomAttributes('option-wrp')}
305 - >
306 - <div
307 - class="{$fh->getAtomicCls('option-inner-wrp')} {$fh->getCustomClasses('option-inner-wrp')}"
308 - {$fh->getCustomAttributes('option-inner-wrp')}
309 - >
310 - <div
311 - class="{$fh->getAtomicCls('option-search-wrp')} {$fh->getCustomClasses('option-search-wrp')}"
312 - {$fh->getCustomAttributes('option-search-wrp')}
412 + <div
413 + %35$s
414 + class="%36$s %37$s"
313 415 >
314 - <input
315 - type="search"
316 - class="{$fh->getAtomicCls('opt-search-input')} {$fh->getCustomClasses('opt-search-input')}"
317 - {$fh->getCustomAttributes('opt-search-input')}
318 - placeholder="Search Country"
319 - aria-label="Search Options"
320 - aria-hidden="true"
321 - tabIndex="-1"
322 - />
323 - <svg
324 - class="{$fh->getAtomicCls('icn')} {$fh->getAtomicCls('opt-search-icn')} {$fh->getCustomClasses('opt-search-icn')}"
325 - {$fh->getCustomAttributes('opt-search-icn')}
326 - aria-hidden="true"
327 - width="22"
328 - height="22"
329 - role="img"
330 - title="Search icon"
331 - viewBox="0 0 24 24"
332 - fill="none"
333 - stroke="currentColor"
334 - stroke-width="2"
335 - stroke-linecap="round"
336 - stroke-linejoin="round"
416 + <div
417 + %38$s
418 + class="%39$s %40$s"
337 419 >
338 - <circle cx="11" cy="11" r="8" />
339 - <line x1="21" y1="21" x2="16.65" y2="16.65" />
340 - </svg>
341 - <button
342 - type="button"
343 - aria-label="Clear search"
344 - class="{$fh->getAtomicCls('icn')} {$fh->getAtomicCls('search-clear-btn')} {$fh->getCustomClasses('search-clear-btn')}"
345 - {$fh->getCustomAttributes('search-clear-btn')}
346 - tabIndex="-1"
347 - >
348 - <svg
349 - width="13"
350 - height="13"
351 - role="img"
352 - viewBox="0 0 24 24"
353 - fill="none"
354 - stroke="currentColor"
355 - stroke-width="2"
356 - stroke-linecap="round"
357 - stroke-linejoin="round"
358 - >
359 - <line x1="18" y1="6" x2="6" y2="18" />
360 - <line x1="6" y1="6" x2="18" y2="18" />
361 - </svg>
362 - </button>
420 + %41$s
421 + %42$s
422 + </div>
363 423 </div>
364 - {$optionsList}
365 424 </div>
366 - </div>
367 - </div>
368 - </div>
369 -DROPDOWNFIELD;
425 + </div>',
426 + $fh->getAtomicCls('dpd-fld-container'), // 1
427 + $fh->getCustomClasses('dpd-fld-container'), // 2
428 + $fh->getCustomAttributes('dpd-fld-wrp'), // 3
429 + $fh->getAtomicCls('dpd-fld-wrp'), // 4
430 + $fh->getCustomClasses('dpd-fld-wrp'), // 5
431 + $readonlyCls, // 6
432 + $disabledCls, // 7
433 + $name, // 8
434 + $req, // 9
435 + $fh->getAtomicCls('dpd-hidden-input'), // 10
436 + $fh->disabled(), // 11
437 + $fh->readonly(), // 12
438 + $val, // 13
439 + $fh->getCustomAttributes('dpd-wrp'), // 14
440 + $fh->getAtomicCls('dpd-wrp'), // 15
441 + $fh->getCustomClasses('dpd-wrp'), // 16
442 + $fh->getCustomAttributes('selected-opt-wrp'), // 17
443 + $fh->getAtomicCls('selected-opt-wrp'), // 18
444 + $fh->getCustomClasses('selected-opt-wrp'), // 19
445 + $selectedOptImage, // 20
446 + $fh->getCustomAttributes('selected-opt-lbl'), // 21
447 + $fh->getAtomicCls('selected-opt-lbl'), // 22
448 + $multiChipClass, // 23
449 + $fh->getCustomClasses('selected-opt-lbl'), // 24
450 + $fh->esc_html($ph), // 25
451 + $fh->getCustomAttributes('dpd-btn-wrp'), // 26
452 + $fh->getAtomicCls('dpd-btn-wrp'), // 27
453 + $fh->getCustomClasses('dpd-btn-wrp'), // 28
454 + $fh->getCustomAttributes('selected-opt-clear-btn'), // 29
455 + $fh->getAtomicCls('selected-opt-clear-btn'), // 30
456 + $fh->getCustomClasses('selected-opt-clear-btn'), // 31
457 + $fh->getCustomAttributes('dpd-down-btn'), // 32
458 + $fh->getAtomicCls('dpd-down-btn'), // 33
459 + $fh->getCustomClasses('dpd-down-btn'), // 34
460 + $fh->getCustomAttributes('option-wrp'), // 35
461 + $fh->getAtomicCls('option-wrp'), // 36
462 + $fh->getCustomClasses('option-wrp'), // 37
463 + $fh->getCustomAttributes('option-inner-wrp'), // 38
464 + $fh->getAtomicCls('option-inner-wrp'), // 39
465 + $fh->getCustomClasses('option-inner-wrp'), // 40
466 + $searchMarkup, // 41
467 + $optionsList // 42
468 + );
370 469 }
371 470 }
372 471 }