primevue 4.3.9 → 4.4.0

package/datepicker/BaseDatePicker.vue

@@ -14,6 +14,10 @@ export default {
             type: String,
             default: null
         },
+        updateModelType: {
+            type: String,
+            default: 'date'
+        },
         inline: {
             type: Boolean,
             default: false
@@ -155,6 +159,10 @@ export default {
             type: Boolean,
             default: true
         },
+        showClear: {
+            type: Boolean,
+            default: false
+        },
         appendTo: {
             type: [String, Object],
             default: 'body'

package/datepicker/DatePicker.vue

@@ -36,6 +36,9 @@
             :data-p-has-e-icon="showIcon && iconDisplay === 'input' && !inline"
             :pt="ptm('pcInputText')"
         />
+        <slot v-if="showClear && !inline" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
+            <TimesIcon ref="clearIcon" :class="[cx('clearIcon')]" @click="onClearClick" v-bind="ptm('clearIcon')" />
+        </slot>
         <slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton" :toggleCallback="onButtonClick">
             <button
                 :class="cx('dropdown')"
@@ -563,7 +566,7 @@
 <script>
 import { cn } from '@primeuix/utils';
 import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
-import { localeComparator } from '@primeuix/utils/object';
+import { isDate, isEmpty, isNotEmpty, localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
@@ -571,6 +574,7 @@ import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import ChevronUpIcon from '@primevue/icons/chevronup';
+import TimesIcon from '@primevue/icons/times';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -614,18 +618,27 @@ export default {
             query: null,
             queryMatches: false,
             queryOrientation: null,
-            focusedDateIndex: 0
+            focusedDateIndex: 0,
+            rawValue: null
         };
     },
     watch: {
-        modelValue(newValue) {
-            this.updateCurrentMetaData();
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.updateCurrentMetaData();
+                this.rawValue = typeof newValue === 'string' ? this.parseValue(newValue) : newValue;
 
-            if (!this.typeUpdate && !this.inline && this.input) {
-                this.input.value = this.inputFieldValue;
-            }
+                if (!this.typeUpdate && !this.inline && this.input) {
+                    this.input.value = this.formatValue(this.rawValue);
+                }
+
+                this.typeUpdate = false;
 
-            this.typeUpdate = false;
+                if (this.$refs.clearIcon?.$el?.style) {
+                    this.$refs.clearIcon.$el.style.display = isEmpty(newValue) ? 'none' : 'block';
+                }
+            }
         },
         showTime() {
             this.updateCurrentMetaData();
@@ -677,6 +690,10 @@ export default {
             }
         } else {
             this.input.value = this.inputFieldValue;
+
+            if (this.$refs.clearIcon?.$el?.style) {
+                this.$refs.clearIcon.$el.style.display = !this.$filled ? 'none' : 'block';
+            }
         }
     },
     updated() {
@@ -716,22 +733,15 @@ export default {
         this.overlay = null;
     },
     methods: {
-        isComparable() {
-            return this.d_value != null && typeof this.d_value !== 'string';
-        },
         isSelected(dateMeta) {
-            if (!this.isComparable()) {
-                return false;
-            }
-
-            if (this.d_value) {
+            if (this.rawValue) {
                 if (this.isSingleSelection()) {
-                    return this.isDateEquals(this.d_value, dateMeta);
+                    return this.isDateEquals(this.parseValueForComparison(this.rawValue), dateMeta);
                 } else if (this.isMultipleSelection()) {
                     let selected = false;
 
-                    for (let date of this.d_value) {
-                        selected = this.isDateEquals(date, dateMeta);
+                    for (let date of this.rawValue) {
+                        selected = this.isDateEquals(this.parseValueForComparison(date), dateMeta);
 
                         if (selected) {
                             break;
@@ -740,9 +750,14 @@ export default {
 
                     return selected;
                 } else if (this.isRangeSelection()) {
-                    if (this.d_value[1]) return this.isDateEquals(this.d_value[0], dateMeta) || this.isDateEquals(this.d_value[1], dateMeta) || this.isDateBetween(this.d_value[0], this.d_value[1], dateMeta);
-                    else {
-                        return this.isDateEquals(this.d_value[0], dateMeta);
+                    const start = this.parseValueForComparison(this.rawValue[0]);
+
+                    if (this.rawValue[1]) {
+                        const end = this.parseValueForComparison(this.rawValue[1]);
+
+                        return this.isDateEquals(start, dateMeta) || this.isDateEquals(end, dateMeta) || this.isDateBetween(start, end, dateMeta);
+                    } else {
+                        return this.isDateEquals(start, dateMeta);
                     }
                 }
             }
@@ -750,36 +765,45 @@ export default {
             return false;
         },
         isMonthSelected(month) {
-            if (!this.isComparable()) return false;
-
             if (this.isMultipleSelection()) {
-                return this.d_value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+                return this.rawValue?.some((currentValue) => {
+                    const parsedDate = this.parseValueForComparison(currentValue);
+
+                    return parsedDate.getMonth() === month && parsedDate.getFullYear() === this.currentYear;
+                });
             } else if (this.isRangeSelection()) {
-                if (!this.d_value[1]) {
-                    return this.d_value[0]?.getFullYear() === this.currentYear && this.d_value[0]?.getMonth() === month;
+                const parsedStart = this.rawValue?.[0] ? this.parseValueForComparison(this.rawValue[0]) : null;
+                const parsedEnd = this.rawValue?.[1] ? this.parseValueForComparison(this.rawValue[1]) : null;
+
+                if (!parsedEnd) {
+                    return parsedStart?.getFullYear() === this.currentYear && parsedStart?.getMonth() === month;
                 } else {
                     const currentDate = new Date(this.currentYear, month, 1);
-                    const startDate = new Date(this.d_value[0].getFullYear(), this.d_value[0].getMonth(), 1);
-                    const endDate = new Date(this.d_value[1].getFullYear(), this.d_value[1].getMonth(), 1);
-
+                    const startDate = new Date(parsedStart.getFullYear(), parsedStart.getMonth(), 1);
+                    const endDate = new Date(parsedEnd.getFullYear(), parsedEnd.getMonth(), 1);
                     return currentDate >= startDate && currentDate <= endDate;
                 }
             } else {
-                return this.d_value.getMonth() === month && this.d_value.getFullYear() === this.currentYear;
+                return this.rawValue?.getMonth() === month && this.rawValue?.getFullYear() === this.currentYear;
             }
         },
         isYearSelected(year) {
-            if (!this.isComparable()) return false;
-
             if (this.isMultipleSelection()) {
-                return this.d_value.some((currentValue) => currentValue.getFullYear() === year);
+                return this.rawValue?.some((currentValue) => {
+                    const parsedDate = this.parseValueForComparison(currentValue);
+
+                    return parsedDate.getFullYear() === year;
+                });
             } else if (this.isRangeSelection()) {
-                const start = this.d_value[0] ? this.d_value[0].getFullYear() : null;
-                const end = this.d_value[1] ? this.d_value[1].getFullYear() : null;
+                const parsedStart = this.rawValue?.[0] ? this.parseValueForComparison(this.rawValue[0]) : null;
+                const parsedEnd = this.rawValue?.[1] ? this.parseValueForComparison(this.rawValue[1]) : null;
+
+                const start = parsedStart ? parsedStart.getFullYear() : null;
+                const end = parsedEnd ? parsedEnd.getFullYear() : null;
 
                 return start === year || end === year || (start < year && end > year);
             } else {
-                return this.d_value.getFullYear() === year;
+                return this.rawValue?.getFullYear() === year;
             }
         },
         isDateEquals(value, dateMeta) {
@@ -788,11 +812,13 @@ export default {
         },
         isDateBetween(start, end, dateMeta) {
             let between = false;
+            let parsedStart = this.parseValueForComparison(start);
+            let parsedEnd = this.parseValueForComparison(end);
 
-            if (start && end) {
+            if (parsedStart && parsedEnd) {
                 let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
 
-                return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+                return parsedStart.getTime() <= date.getTime() && parsedEnd.getTime() >= date.getTime();
             }
 
             return between;
@@ -1201,7 +1227,7 @@ export default {
             }
 
             if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
-                let newValue = this.d_value.filter((date) => !this.isDateEquals(date, dateMeta));
+                let newValue = this.rawValue.filter((date) => !this.isDateEquals(this.parseValueForComparison(date), dateMeta));
 
                 this.updateModel(newValue);
             } else {
@@ -1255,12 +1281,11 @@ export default {
             if (this.isSingleSelection()) {
                 modelVal = date;
             } else if (this.isMultipleSelection()) {
-                modelVal = this.d_value ? [...this.d_value, date] : [date];
+                modelVal = this.rawValue ? [...this.rawValue, date] : [date];
             } else if (this.isRangeSelection()) {
-                if (this.d_value && this.d_value.length) {
-                    let startDate = this.d_value[0];
-                    let endDate = this.d_value[1];
-
+                if (this.rawValue && this.rawValue.length) {
+                    let startDate = this.parseValueForComparison(this.rawValue[0]);
+                    let endDate = this.rawValue[1];
                     if (!endDate && date.getTime() >= startDate.getTime()) {
                         endDate = date;
                         this.focusedDateIndex = 1;
@@ -1269,7 +1294,6 @@ export default {
                         endDate = null;
                         this.focusedDateIndex = 0;
                     }
-
                     modelVal = [startDate, endDate];
                 } else {
                     modelVal = [date, null];
@@ -1290,10 +1314,49 @@ export default {
             this.$emit('date-select', date);
         },
         updateModel(value) {
-            this.writeValue(value);
+            this.rawValue = value;
+
+            if (this.updateModelType === 'date') {
+                if (this.isSingleSelection()) {
+                    this.writeValue(value);
+                } else {
+                    let stringArrValue = null;
+
+                    if (Array.isArray(value)) {
+                        stringArrValue = value.map((date) => this.parseValueForComparison(date));
+                    }
+
+                    this.writeValue(stringArrValue);
+                }
+            } else if (this.updateModelType == 'string') {
+                if (this.isSingleSelection()) {
+                    this.writeValue(this.formatDateTime(value));
+                } else if (this.isMultipleSelection()) {
+                    let stringArrValue = null;
+
+                    if (Array.isArray(value)) {
+                        stringArrValue = value.map((date) => this.formatDateTime(date));
+                    }
+
+                    this.writeValue(stringArrValue);
+                } else if (this.isRangeSelection()) {
+                    let stringArrValue = null;
+
+                    if (Array.isArray(value)) {
+                        stringArrValue = value.map((date) => {
+                            if (date === null || date === undefined) {
+                                return null;
+                            }
+                            return typeof date === 'string' ? date : this.formatDateTime(date);
+                        });
+                    }
+
+                    this.writeValue(stringArrValue);
+                }
+            }
         },
         shouldSelectDate() {
-            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.d_value ? this.d_value.length : 0) : true;
+            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.rawValue ? this.rawValue.length : 0) : true;
             else return true;
         },
         isSingleSelection() {
@@ -1318,7 +1381,7 @@ export default {
                         formattedValue = this.formatDateTime(value);
                     } else if (this.isMultipleSelection()) {
                         for (let i = 0; i < value.length; i++) {
-                            let dateAsString = this.formatDateTime(value[i]);
+                            let dateAsString = typeof value[i] === 'string' ? this.formatDateTime(this.parseValueForComparison(value[i])) : this.formatDateTime(value[i]);
 
                             formattedValue += dateAsString;
 
@@ -1328,8 +1391,8 @@ export default {
                         }
                     } else if (this.isRangeSelection()) {
                         if (value && value.length) {
-                            let startDate = value[0];
-                            let endDate = value[1];
+                            let startDate = this.parseValueForComparison(value[0]);
+                            let endDate = this.parseValueForComparison(value[1]);
 
                             formattedValue = this.formatDateTime(startDate);
 
@@ -1348,7 +1411,7 @@ export default {
         formatDateTime(date) {
             let formattedValue = null;
 
-            if (date) {
+            if (isDate(date) && isNotEmpty(date)) {
                 if (this.timeOnly) {
                     formattedValue = this.formatTime(date);
                 } else {
@@ -1358,6 +1421,8 @@ export default {
                         formattedValue += ' ' + this.formatTime(date);
                     }
                 }
+            } else if (this.updateModelType === 'string') {
+                formattedValue = date;
             }
 
             return formattedValue;
@@ -1497,7 +1562,7 @@ export default {
             event.preventDefault();
         },
         onClearButtonClick(event) {
-            this.updateModel(this.$formDefaultValue || null);
+            this.updateModel(null);
             this.overlayVisible = false;
             this.$emit('clear-click', event);
             event.preventDefault();
@@ -1580,15 +1645,15 @@ export default {
             return hours;
         },
         validateTime(hour, minute, second, pm) {
-            let value = this.isComparable() ? this.d_value : this.viewDate;
+            let value = this.viewDate;
             const convertedHour = this.convertTo24Hour(hour, pm);
 
             if (this.isRangeSelection()) {
-                value = this.d_value[1] || this.d_value[0];
+                value = this.rawValue[1] || this.rawValue[0];
             }
 
             if (this.isMultipleSelection()) {
-                value = this.d_value[this.d_value.length - 1];
+                value = this.rawValue[this.rawValue.length - 1];
             }
 
             const valueDateString = value ? value.toDateString() : null;
@@ -1716,14 +1781,14 @@ export default {
         },
         updateModelTime() {
             this.timePickerChange = true;
-            let value = this.isComparable() ? this.d_value : this.viewDate;
+            let value = this.viewDate;
 
             if (this.isRangeSelection()) {
-                value = this.d_value[this.focusedDateIndex] || this.d_value[0];
+                value = this.rawValue[this.focusedDateIndex] || this.rawValue[0];
             }
 
             if (this.isMultipleSelection()) {
-                value = this.d_value[this.d_value.length - 1];
+                value = this.rawValue[this.rawValue.length - 1];
             }
 
             value = value ? new Date(value.getTime()) : new Date();
@@ -1739,17 +1804,17 @@ export default {
             value.setSeconds(this.currentSecond);
 
             if (this.isRangeSelection()) {
-                if (this.focusedDateIndex === 1 && this.d_value[1]) {
-                    value = [this.d_value[0], value];
+                if (this.focusedDateIndex === 1 && this.rawValue[1]) {
+                    value = [this.rawValue[0], value];
                 } else if (this.focusedDateIndex === 0) {
-                    value = [value, this.d_value[1]];
+                    value = [value, this.rawValue[1]];
                 } else {
                     value = [value, null];
                 }
             }
 
             if (this.isMultipleSelection()) {
-                value = [...this.d_value.slice(0, -1), value];
+                value = [...this.rawValue.slice(0, -1), value];
             }
 
             this.updateModel(value);
@@ -1801,8 +1866,8 @@ export default {
             if (this.showTime || this.timeOnly) {
                 let timeDate = viewDate;
 
-                if (this.isRangeSelection() && this.d_value && this.d_value[this.focusedDateIndex]) {
-                    timeDate = this.d_value[this.focusedDateIndex];
+                if (this.isRangeSelection() && this.rawValue && this.rawValue[this.focusedDateIndex]) {
+                    timeDate = this.rawValue[this.focusedDateIndex];
                 }
 
                 this.updateCurrentTimeMeta(timeDate);
@@ -1856,19 +1921,28 @@ export default {
 
             return value;
         },
+        parseValueForComparison(value) {
+            if (typeof value === 'string') {
+                const parsedValue = this.parseValue(value);
+
+                return this.isSingleSelection() ? parsedValue : parsedValue[0];
+            }
+
+            return value;
+        },
         parseDateTime(text) {
             let date;
-            let parts = text.split(' ');
+            let parts = text.match(/(?:(.+?) )?(\d{2}:\d{2})(?: (am|pm))?/);
 
             if (this.timeOnly) {
                 date = new Date();
-                this.populateTime(date, parts[0], parts[1]);
+                this.populateTime(date, parts[2], parts[3]);
             } else {
                 const dateFormat = this.datePattern;
 
                 if (this.showTime) {
-                    date = this.parseDate(parts[0], dateFormat);
-                    this.populateTime(date, parts[1], parts[2]);
+                    date = this.parseDate(parts[1], dateFormat);
+                    this.populateTime(date, parts[2], parts[3]);
                 } else {
                     date = this.parseDate(text, dateFormat);
                 }
@@ -2686,11 +2760,15 @@ export default {
                 this.selectionStart = this.input.selectionStart;
                 this.selectionEnd = this.input.selectionEnd;
 
+                if (this.$refs.clearIcon?.$el?.style) {
+                    this.$refs.clearIcon.$el.style.display = isEmpty(event.target.value) ? 'none' : 'block';
+                }
+
                 let value = this.parseValue(event.target.value);
 
                 if (this.isValidSelection(value)) {
                     this.typeUpdate = true;
-                    this.updateModel(value);
+                    this.updateModel(this.updateModelType === 'string' ? this.formatValue(value) : value);
                     this.updateCurrentMetaData();
                 }
             } catch (err) {
@@ -2717,7 +2795,11 @@ export default {
             this.formField.onBlur?.();
 
             this.focused = false;
-            event.target.value = this.formatValue(this.d_value);
+            event.target.value = this.formatValue(this.rawValue);
+
+            if (this.$refs.clearIcon?.$el?.style) {
+                this.$refs.clearIcon.$el.style.display = isEmpty(event.target.value) ? 'none' : 'block';
+            }
         },
         onKeyDown(event) {
             if (event.code === 'ArrowDown' && this.overlay) {
@@ -2772,6 +2854,10 @@ export default {
         getYear(month) {
             return this.currentView === 'month' ? this.currentYear : month.year;
         },
+        onClearClick() {
+            this.updateModel(null);
+            this.overlayVisible = false;
+        },
         onOverlayClick(event) {
             event.stopPropagation();
 
@@ -2859,18 +2945,24 @@ export default {
     },
     computed: {
         viewDate() {
-            let propValue = this.d_value;
+            let propValue = this.rawValue;
 
             if (propValue && Array.isArray(propValue)) {
                 if (this.isRangeSelection()) {
-                    if (propValue.length === 1) {
+                    if (propValue.length === 0) {
+                        propValue = null;
+                    } else if (propValue.length === 1) {
                         propValue = propValue[0];
                     } else {
-                        let lastVisibleMonth = new Date(propValue[0].getFullYear(), propValue[0].getMonth() + this.numberOfMonths, 1);
+                        const start = this.parseValueForComparison(propValue[0]);
+                        let lastVisibleMonth = new Date(start.getFullYear(), start.getMonth() + this.numberOfMonths, 1);
+
                         if (propValue[1] < lastVisibleMonth) {
                             propValue = propValue[0];
                         } else {
-                            propValue = new Date(propValue[1].getFullYear(), propValue[1].getMonth() - this.numberOfMonths + 1, 1);
+                            const end = this.parseValueForComparison(propValue[1]);
+
+                            propValue = new Date(end.getFullYear(), end.getMonth() - this.numberOfMonths + 1, 1);
                         }
                     }
                 } else if (this.isMultipleSelection()) {
@@ -2895,7 +2987,7 @@ export default {
             }
         },
         inputFieldValue() {
-            return this.formatValue(this.d_value);
+            return this.formatValue(this.rawValue);
         },
         months() {
             let months = [];
@@ -2925,13 +3017,26 @@ export default {
                         for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
                             let prev = this.getPreviousMonthAndYear(month, year);
 
-                            week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
+                            week.push({
+                                day: j,
+                                month: prev.month,
+                                year: prev.year,
+                                otherMonth: true,
+                                today: this.isToday(today, j, prev.month, prev.year),
+                                selectable: this.isSelectable(j, prev.month, prev.year, true)
+                            });
                         }
 
                         let remainingDaysLength = 7 - week.length;
 
                         for (let j = 0; j < remainingDaysLength; j++) {
-                            week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
+                            week.push({
+                                day: dayNo,
+                                month: month,
+                                year: year,
+                                today: this.isToday(today, dayNo, month, year),
+                                selectable: this.isSelectable(dayNo, month, year, false)
+                            });
                             dayNo++;
                         }
                     } else {
@@ -2948,7 +3053,13 @@ export default {
                                     selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
                                 });
                             } else {
-                                week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
+                                week.push({
+                                    day: dayNo,
+                                    month: month,
+                                    year: year,
+                                    today: this.isToday(today, dayNo, month, year),
+                                    selectable: this.isSelectable(dayNo, month, year, false)
+                                });
                             }
 
                             dayNo++;
@@ -3018,7 +3129,10 @@ export default {
             };
 
             for (let i = 0; i <= 11; i++) {
-                monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
+                monthPickerValues.push({
+                    value: this.$primevue.config.locale.monthNamesShort[i],
+                    selectable: isSelectableMonth(i)
+                });
             }
 
             return monthPickerValues;
@@ -3073,6 +3187,9 @@ export default {
         switchViewButtonDisabled() {
             return this.numberOfMonths > 1 || this.disabled;
         },
+        isClearIconVisible() {
+            return this.showClear && this.rawValue != null && !this.disabled;
+        },
         panelId() {
             return this.$id + '_panel';
         },
@@ -3160,7 +3277,8 @@ export default {
         ChevronLeftIcon,
         ChevronRightIcon,
         ChevronUpIcon,
-        ChevronDownIcon
+        ChevronDownIcon,
+        TimesIcon
     },
     directives: {
         ripple: Ripple

package/datepicker/index.d.ts

@@ -155,6 +155,10 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the input icon's DOM element.
      */
     inputIcon?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    clearIcon?: DatePickerPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -534,6 +538,11 @@ export interface DatePickerProps {
      * Format of the date. Defaults to PrimeVue Locale configuration.
      */
     dateFormat?: string | undefined;
+    /**
+     * Type of the value to write back to modelValue.
+     * @defaultValue date
+     */
+    updateModelType: HintedString<'date' | 'string'> | undefined;
     /**
      * When enabled, displays the datepicker as inline instead of an overlay.
      * @defaultValue false
@@ -703,6 +712,11 @@ export interface DatePickerProps {
      * @defaultValue true
      */
     manualInput?: boolean | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
     /**
      * Defines the size of the component.
      */
@@ -1122,6 +1136,17 @@ export interface DatePickerSlots {
          */
         toggleCallback: (event: Event) => void;
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**