blip-ds 1.145.0 → 1.147.1

package/dist/esm/bds-datepicker-period.entry.js

@@ -32,6 +32,9 @@ const BdsdatepickerPeriod = class {
      * EndDateSelect. Insert a limiter to select the date period.
      */
     this.endDateSelect = null;
+    /**
+     * handler of select months or yaer.
+     */
     this.handler = (event, ref) => {
       const { detail: { value }, } = event;
       if (ref == 'months') {
@@ -45,6 +48,9 @@ const BdsdatepickerPeriod = class {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -65,12 +71,18 @@ const BdsdatepickerPeriod = class {
     this.startDateSelect = null;
     this.endDateSelect = null;
   }
+  /**
+   * startDateSelect. Function to output selected start date.
+   */
   startDateSelectChanged() {
     var _a;
     this.bdsStartDate.emit({ value: this.startDateSelect });
     this.monthActivated = this.startDateSelect ? (_a = this.startDateSelect) === null || _a === void 0 ? void 0 : _a.getMonth() : this.startDate.month;
     this.yearActivated = this.startDateSelect ? this.startDateSelect.getFullYear() : this.startDate.year;
   }
+  /**
+   * endDateSelect. Function to output selected end date.
+   */
   endDateSelectChanged() {
     this.bdsEndDate.emit({ value: this.endDateSelect });
     this.monthActivated = this.endDateSelect
@@ -105,6 +117,9 @@ const BdsdatepickerPeriod = class {
     this.years = getYears(this.yearActivated, this.startDate.year, this.endDate.year);
     this.months = getMonths(this.yearActivated, this.startDate, this.endDate);
   }
+  /**
+   * prevDays. Function to create a gap between the beginning of the grid and the first day of the month.
+   */
   prevDays(value) {
     const lenghtDays = [];
     for (let i = 0; i < value; i++) {
@@ -112,6 +127,9 @@ const BdsdatepickerPeriod = class {
     }
     return lenghtDays.map((item) => h("span", { key: `id${item}`, class: `space ${item}` }));
   }
+  /**
+   * selectDate. Function to select the desired date.
+   */
   selectDate(value) {
     const changeSelected = new Date(value.year, value.month, value.date);
     if (this.startDateSelect) {
@@ -121,6 +139,9 @@ const BdsdatepickerPeriod = class {
       this.startDateSelect = changeSelected;
     }
   }
+  /**
+   * prevMonth. Function to rewind the date on the calendar slide.
+   */
   prevMonth() {
     this.animatePrev = true;
     if (this.loadingSlide != 'pendding') {
@@ -139,6 +160,9 @@ const BdsdatepickerPeriod = class {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -157,6 +181,9 @@ const BdsdatepickerPeriod = class {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const validateDate = fillDayList(value);
     const fullCurrDate = fillDate(THIS_DAY);
@@ -165,6 +192,9 @@ const BdsdatepickerPeriod = class {
     else
       return false;
   }
+  /**
+   * checkDisableDay. Function to check the disable day.
+   */
   checkDisableDay(value) {
     const validateDate = fillDayList(value);
     const startDateLimit = this.startDate ? fillDayList(this.startDate) : `0`;
@@ -182,6 +212,9 @@ const BdsdatepickerPeriod = class {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const validateDate = fillDayList(value);
     const startSelectedDate = this.startDateSelect ? fillDate(this.startDateSelect) : `0`;
@@ -191,6 +224,9 @@ const BdsdatepickerPeriod = class {
     else
       return false;
   }
+  /**
+   * checkPeriodDay. Function to check the period selected day.
+   */
   checkPeriodDay(value) {
     const validateDate = fillDayList(value);
     const startSelectedDate = this.startDateSelect ? fillDate(this.startDateSelect) : `0`;
@@ -201,6 +237,9 @@ const BdsdatepickerPeriod = class {
       }
     }
   }
+  /**
+   * checkPeriodStart. Function to check the period selected start day.
+   */
   checkPeriodStart(value) {
     const validateDate = value.date == 1;
     const validateDay = value.day == 0;
@@ -211,6 +250,9 @@ const BdsdatepickerPeriod = class {
       return true;
     }
   }
+  /**
+   * checkPeriodEnd. Function to check the period selected end day.
+   */
   checkPeriodEnd(value, lastItem) {
     const validateDate = lastItem;
     const validateDay = value.day == 6;

package/dist/esm/bds-datepicker-period_2.entry.js

@@ -32,6 +32,9 @@ const BdsdatepickerPeriod = class {
      * EndDateSelect. Insert a limiter to select the date period.
      */
     this.endDateSelect = null;
+    /**
+     * handler of select months or yaer.
+     */
     this.handler = (event, ref) => {
       const { detail: { value }, } = event;
       if (ref == 'months') {
@@ -45,6 +48,9 @@ const BdsdatepickerPeriod = class {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -65,12 +71,18 @@ const BdsdatepickerPeriod = class {
     this.startDateSelect = null;
     this.endDateSelect = null;
   }
+  /**
+   * startDateSelect. Function to output selected start date.
+   */
   startDateSelectChanged() {
     var _a;
     this.bdsStartDate.emit({ value: this.startDateSelect });
     this.monthActivated = this.startDateSelect ? (_a = this.startDateSelect) === null || _a === void 0 ? void 0 : _a.getMonth() : this.startDate.month;
     this.yearActivated = this.startDateSelect ? this.startDateSelect.getFullYear() : this.startDate.year;
   }
+  /**
+   * endDateSelect. Function to output selected end date.
+   */
   endDateSelectChanged() {
     this.bdsEndDate.emit({ value: this.endDateSelect });
     this.monthActivated = this.endDateSelect
@@ -105,6 +117,9 @@ const BdsdatepickerPeriod = class {
     this.years = getYears(this.yearActivated, this.startDate.year, this.endDate.year);
     this.months = getMonths(this.yearActivated, this.startDate, this.endDate);
   }
+  /**
+   * prevDays. Function to create a gap between the beginning of the grid and the first day of the month.
+   */
   prevDays(value) {
     const lenghtDays = [];
     for (let i = 0; i < value; i++) {
@@ -112,6 +127,9 @@ const BdsdatepickerPeriod = class {
     }
     return lenghtDays.map((item) => h("span", { key: `id${item}`, class: `space ${item}` }));
   }
+  /**
+   * selectDate. Function to select the desired date.
+   */
   selectDate(value) {
     const changeSelected = new Date(value.year, value.month, value.date);
     if (this.startDateSelect) {
@@ -121,6 +139,9 @@ const BdsdatepickerPeriod = class {
       this.startDateSelect = changeSelected;
     }
   }
+  /**
+   * prevMonth. Function to rewind the date on the calendar slide.
+   */
   prevMonth() {
     this.animatePrev = true;
     if (this.loadingSlide != 'pendding') {
@@ -139,6 +160,9 @@ const BdsdatepickerPeriod = class {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -157,6 +181,9 @@ const BdsdatepickerPeriod = class {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const validateDate = fillDayList(value);
     const fullCurrDate = fillDate(THIS_DAY);
@@ -165,6 +192,9 @@ const BdsdatepickerPeriod = class {
     else
       return false;
   }
+  /**
+   * checkDisableDay. Function to check the disable day.
+   */
   checkDisableDay(value) {
     const validateDate = fillDayList(value);
     const startDateLimit = this.startDate ? fillDayList(this.startDate) : `0`;
@@ -182,6 +212,9 @@ const BdsdatepickerPeriod = class {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const validateDate = fillDayList(value);
     const startSelectedDate = this.startDateSelect ? fillDate(this.startDateSelect) : `0`;
@@ -191,6 +224,9 @@ const BdsdatepickerPeriod = class {
     else
       return false;
   }
+  /**
+   * checkPeriodDay. Function to check the period selected day.
+   */
   checkPeriodDay(value) {
     const validateDate = fillDayList(value);
     const startSelectedDate = this.startDateSelect ? fillDate(this.startDateSelect) : `0`;
@@ -201,6 +237,9 @@ const BdsdatepickerPeriod = class {
       }
     }
   }
+  /**
+   * checkPeriodStart. Function to check the period selected start day.
+   */
   checkPeriodStart(value) {
     const validateDate = value.date == 1;
     const validateDay = value.day == 0;
@@ -211,6 +250,9 @@ const BdsdatepickerPeriod = class {
       return true;
     }
   }
+  /**
+   * checkPeriodEnd. Function to check the period selected end day.
+   */
   checkPeriodEnd(value, lastItem) {
     const validateDate = lastItem;
     const validateDay = value.day == 6;
@@ -291,7 +333,6 @@ const BdsdatepickerSingle = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.bdsDateSelected = createEvent(this, "bdsDateSelected", 7);
-    this.bdsClearDate = createEvent(this, "bdsClearDate", 7);
     this.monthActivated = THIS_DAY.getMonth();
     this.yearActivated = THIS_DAY.getFullYear();
     this.animatePrev = false;
@@ -311,6 +352,9 @@ const BdsdatepickerSingle = class {
      * dateSelect. Insert a limiter to select the date period.
      */
     this.dateSelect = null;
+    /**
+     * handler of select months or yaer.
+     */
     this.handler = (event, ref) => {
       const { detail: { value }, } = event;
       if (ref == 'months') {
@@ -324,6 +368,9 @@ const BdsdatepickerSingle = class {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -343,6 +390,9 @@ const BdsdatepickerSingle = class {
   async clear() {
     this.dateSelect = null;
   }
+  /**
+   * dateSelect. Function to output selected date.
+   */
   dateSelectChanged() {
     var _a;
     this.monthActivated = this.dateSelect ? (_a = this.dateSelect) === null || _a === void 0 ? void 0 : _a.getMonth() : this.startDate.month;
@@ -368,6 +418,9 @@ const BdsdatepickerSingle = class {
     this.years = getYears(this.yearActivated, this.startDate.year, this.endDate.year);
     this.months = getMonths(this.yearActivated, this.startDate, this.endDate);
   }
+  /**
+   * prevDays. Function to create a gap between the beginning of the grid and the first day of the month.
+   */
   prevDays(value) {
     const lenghtDays = [];
     for (let i = 0; i < value; i++) {
@@ -375,10 +428,16 @@ const BdsdatepickerSingle = class {
     }
     return lenghtDays.map((item) => h("span", { key: `id${item}`, class: `space ${item}` }));
   }
+  /**
+   * selectDate. Function to select the desired date.
+   */
   selectDate(value) {
     const changeSelected = new Date(value.year, value.month, value.date);
     this.bdsDateSelected.emit({ value: changeSelected });
   }
+  /**
+   * prevMonth. Function to rewind the date on the calendar slide.
+   */
   prevMonth() {
     this.animatePrev = true;
     if (this.loadingSlide != 'pendding') {
@@ -397,6 +456,9 @@ const BdsdatepickerSingle = class {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -415,6 +477,9 @@ const BdsdatepickerSingle = class {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const fullCurrDate = fillDate(THIS_DAY);
     if (fillDayList(value) == fullCurrDate)
@@ -422,6 +487,9 @@ const BdsdatepickerSingle = class {
     else
       return false;
   }
+  /**
+   * checkDisableDay. Function to check the disable day.
+   */
   checkDisableDay(value) {
     const startDateLimit = this.startDate ? fillDayList(this.startDate) : `0`;
     const endDateLimit = this.endDate ? fillDayList(this.endDate) : `9999999`;
@@ -432,6 +500,9 @@ const BdsdatepickerSingle = class {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const selectedDate = this.dateSelect ? fillDate(this.dateSelect) : `0`;
     if (fillDayList(value) == selectedDate)

package/dist/esm/bds-datepicker-single.entry.js

@@ -7,7 +7,6 @@ const BdsdatepickerSingle = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.bdsDateSelected = createEvent(this, "bdsDateSelected", 7);
-    this.bdsClearDate = createEvent(this, "bdsClearDate", 7);
     this.monthActivated = THIS_DAY.getMonth();
     this.yearActivated = THIS_DAY.getFullYear();
     this.animatePrev = false;
@@ -27,6 +26,9 @@ const BdsdatepickerSingle = class {
      * dateSelect. Insert a limiter to select the date period.
      */
     this.dateSelect = null;
+    /**
+     * handler of select months or yaer.
+     */
     this.handler = (event, ref) => {
       const { detail: { value }, } = event;
       if (ref == 'months') {
@@ -40,6 +42,9 @@ const BdsdatepickerSingle = class {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -59,6 +64,9 @@ const BdsdatepickerSingle = class {
   async clear() {
     this.dateSelect = null;
   }
+  /**
+   * dateSelect. Function to output selected date.
+   */
   dateSelectChanged() {
     var _a;
     this.monthActivated = this.dateSelect ? (_a = this.dateSelect) === null || _a === void 0 ? void 0 : _a.getMonth() : this.startDate.month;
@@ -84,6 +92,9 @@ const BdsdatepickerSingle = class {
     this.years = getYears(this.yearActivated, this.startDate.year, this.endDate.year);
     this.months = getMonths(this.yearActivated, this.startDate, this.endDate);
   }
+  /**
+   * prevDays. Function to create a gap between the beginning of the grid and the first day of the month.
+   */
   prevDays(value) {
     const lenghtDays = [];
     for (let i = 0; i < value; i++) {
@@ -91,10 +102,16 @@ const BdsdatepickerSingle = class {
     }
     return lenghtDays.map((item) => h("span", { key: `id${item}`, class: `space ${item}` }));
   }
+  /**
+   * selectDate. Function to select the desired date.
+   */
   selectDate(value) {
     const changeSelected = new Date(value.year, value.month, value.date);
     this.bdsDateSelected.emit({ value: changeSelected });
   }
+  /**
+   * prevMonth. Function to rewind the date on the calendar slide.
+   */
   prevMonth() {
     this.animatePrev = true;
     if (this.loadingSlide != 'pendding') {
@@ -113,6 +130,9 @@ const BdsdatepickerSingle = class {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -131,6 +151,9 @@ const BdsdatepickerSingle = class {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const fullCurrDate = fillDate(THIS_DAY);
     if (fillDayList(value) == fullCurrDate)
@@ -138,6 +161,9 @@ const BdsdatepickerSingle = class {
     else
       return false;
   }
+  /**
+   * checkDisableDay. Function to check the disable day.
+   */
   checkDisableDay(value) {
     const startDateLimit = this.startDate ? fillDayList(this.startDate) : `0`;
     const endDateLimit = this.endDate ? fillDayList(this.endDate) : `9999999`;
@@ -148,6 +174,9 @@ const BdsdatepickerSingle = class {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const selectedDate = this.dateSelect ? fillDate(this.dateSelect) : `0`;
     if (fillDayList(value) == selectedDate)

package/dist/esm/bds-datepicker.entry.js

@@ -32,24 +32,42 @@ const DatePicker = class {
      * Message. Select type of date.
      */
     this.message = null;
+    this.refInputSetDate = (el) => {
+      this.inputSetDate = el;
+    };
+    this.refInputSetEndDate = (el) => {
+      this.inputSetEndDate = el;
+    };
     this.refDatepickerPeriod = (el) => {
       this.datepickerPeriod = el;
     };
     this.refDatepickerSingle = (el) => {
       this.datepickerSingle = el;
     };
+    /**
+     * clearDateSingle. Function to clear datepicker-single
+     */
     this.clearDateSingle = () => {
       this.datepickerSingle.clear();
       this.valueDateSelected = null;
       this.bdsStartDate.emit({ value: null });
     };
+    /**
+     * clearDatePeriod. Function to clear datepicker-period
+     */
     this.clearDatePeriod = () => {
       this.datepickerPeriod.clear();
       this.valueDateSelected = null;
       this.valueEndDateSelected = null;
       this.bdsStartDate.emit({ value: null });
       this.bdsEndDate.emit({ value: null });
+      setTimeout(() => {
+        this.inputSetDate.setFocus();
+      }, 10);
     };
+    /**
+     * maskDateSelected. Function to add mask to date field
+     */
     this.maskDateSelected = (ev) => {
       const input = ev.target;
       this.valueDateSelected = maskDate(input.value);
@@ -69,6 +87,9 @@ const DatePicker = class {
         }
       }
     };
+    /**
+     * maskEndDateSelected. Function to add mask to the end date field
+     */
     this.maskEndDateSelected = (ev) => {
       const input = ev.target;
       this.valueEndDateSelected = maskDate(input.value);
@@ -88,12 +109,31 @@ const DatePicker = class {
         }
       }
     };
+    this.onClickSetDate = () => {
+      this.open = true;
+      setTimeout(() => {
+        this.inputSetDate.setFocus();
+        this.inputSetEndDate.removeFocus();
+      }, 50);
+      this.datepickerPeriod.clear();
+      this.valueEndDateSelected = null;
+    };
+    this.closeDatepicker = () => {
+      this.inputSetEndDate.removeFocus();
+      this.open = false;
+    };
   }
+  /**
+   * startDateLimit validation.
+   */
   startDateLimitChanged() {
     if (!dateValidation(this.startDateLimit)) {
       this.startDateLimit = defaultStartDate;
     }
   }
+  /**
+   * endDateLimit validation.
+   */
   endDateLimitChanged() {
     const dlStartDate = dateToDayList(this.startDateLimit);
     const dlEndDate = dateToDayList(this.endDateLimit);
@@ -106,10 +146,16 @@ const DatePicker = class {
         .padStart(2, '0')}/${dlStartDate.year + 1}`;
     }
   }
+  dateSelectedChanged() {
+    this.inputSetEndDate.setFocus();
+  }
   componentWillLoad() {
     this.endDateLimitChanged();
     this.startDateLimitChanged();
   }
+  /**
+   * selectDate. Function to output selected date.
+   */
   selectDate(event) {
     const { detail: { value }, } = event;
     this.dateSelected = value;
@@ -117,6 +163,9 @@ const DatePicker = class {
     this.valueDateSelected = this.dateSelected && dateToString(this.dateSelected);
     this.errorMsgDate = null;
   }
+  /**
+   * selectEndDate. Function to issue selected end date..
+   */
   selectEndDate(event) {
     const { detail: { value }, } = event;
     this.endDateSelected = value;
@@ -125,11 +174,12 @@ const DatePicker = class {
     this.errorMsgEndDate = null;
   }
   render() {
-    return (h("div", { class: { datepicker: true } }, this.typeOfDate == 'single' ? (h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, h("bds-input", { label: "Definir a data", value: this.valueDateSelected, placeholder: "__/__/____", maxlength: 10, icon: "calendar", onClick: () => (this.open = true), onBdsInput: (ev) => this.maskDateSelected(ev), danger: this.errorMsgDate ? true : false, errorMessage: this.errorMsgDate }))) : (h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, h("bds-input", { label: "De", value: this.valueDateSelected, placeholder: "__/__/____", maxlength: 10, icon: "calendar", onClick: () => (this.open = true), onBdsInput: (ev) => this.maskDateSelected(ev), danger: this.errorMsgDate ? true : false, errorMessage: this.errorMsgDate }), h("bds-input", { label: "At\u00E9", value: this.valueEndDateSelected, disabled: !this.dateSelected, placeholder: "__/__/____", maxlength: 10, icon: "calendar", onClick: () => (this.open = true), onBdsInput: (ev) => this.maskEndDateSelected(ev), danger: this.errorMsgEndDate ? true : false, errorMessage: this.errorMsgEndDate }))), h("div", { class: { datepicker__menu: true, datepicker__menu__open: this.open } }, this.message && (h("div", { class: "datepicker__menu__message" }, h("bds-icon", { name: "warning", theme: "outline", "aria-label": "\u00CDcone de aten\u00E7\u00E3o" }), h("bds-typo", { variant: "fs-16" }, this.message))), this.typeOfDate == 'single' ? (h("bds-datepicker-single", { ref: this.refDatepickerSingle, startDate: this.startDateLimit && dateToDayList(this.startDateLimit), endDate: this.endDateLimit && dateToDayList(this.endDateLimit), dateSelect: this.dateSelected, onBdsDateSelected: (event) => this.selectDate(event) })) : (h("bds-datepicker-period", { ref: this.refDatepickerPeriod, startDate: this.startDateLimit && dateToDayList(this.startDateLimit), endDate: this.endDateLimit && dateToDayList(this.endDateLimit), startDateSelect: this.dateSelected, endDateSelect: this.endDateSelected, onBdsStartDate: (event) => this.selectDate(event), onBdsEndDate: (event) => this.selectEndDate(event) })), h("div", { class: { datepicker__menu__footer: true } }, this.typeOfDate == 'single' ? (h("bds-button", { variant: "secondary", onClick: () => this.clearDateSingle() }, "Redefinir")) : (h("bds-button", { variant: "secondary", onClick: () => this.clearDatePeriod() }, "Redefinir")), h("bds-button", { onClick: () => (this.open = false) }, "Concluir")))));
+    return (h("div", { class: { datepicker: true } }, this.typeOfDate == 'single' ? (h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, h("bds-input", { label: "Definir a data", value: this.valueDateSelected, placeholder: "__/__/____", maxlength: 10, icon: "calendar", onClick: () => (this.open = true), onBdsInput: (ev) => this.maskDateSelected(ev), danger: this.errorMsgDate ? true : false, errorMessage: this.errorMsgDate }))) : (h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, h("bds-input", { ref: this.refInputSetDate, label: "De", value: this.valueDateSelected, placeholder: "__/__/____", maxlength: 10, icon: "calendar", onClick: () => this.onClickSetDate(), onBdsInput: (ev) => this.maskDateSelected(ev), danger: this.errorMsgDate ? true : false, errorMessage: this.errorMsgDate }), h("bds-input", { ref: this.refInputSetEndDate, label: "At\u00E9", value: this.valueEndDateSelected, disabled: !this.dateSelected, placeholder: "__/__/____", maxlength: 10, icon: "calendar", onClick: () => (this.open = true), onBdsInput: (ev) => this.maskEndDateSelected(ev), danger: this.errorMsgEndDate ? true : false, errorMessage: this.errorMsgEndDate }))), h("div", { class: { datepicker__menu: true, datepicker__menu__open: this.open } }, this.message && (h("div", { class: "datepicker__menu__message" }, h("bds-icon", { name: "warning", theme: "outline", "aria-label": "\u00CDcone de aten\u00E7\u00E3o" }), h("bds-typo", { variant: "fs-16" }, this.message))), this.typeOfDate == 'single' ? (h("bds-datepicker-single", { ref: this.refDatepickerSingle, startDate: this.startDateLimit && dateToDayList(this.startDateLimit), endDate: this.endDateLimit && dateToDayList(this.endDateLimit), dateSelect: this.dateSelected, onBdsDateSelected: (event) => this.selectDate(event) })) : (h("bds-datepicker-period", { ref: this.refDatepickerPeriod, startDate: this.startDateLimit && dateToDayList(this.startDateLimit), endDate: this.endDateLimit && dateToDayList(this.endDateLimit), startDateSelect: this.dateSelected, endDateSelect: this.endDateSelected, onBdsStartDate: (event) => this.selectDate(event), onBdsEndDate: (event) => this.selectEndDate(event) })), h("div", { class: { datepicker__menu__footer: true } }, this.typeOfDate == 'single' ? (h("bds-button", { variant: "secondary", onClick: () => this.clearDateSingle() }, "Redefinir")) : (h("bds-button", { variant: "secondary", onClick: () => this.clearDatePeriod() }, "Redefinir")), h("bds-button", { onClick: this.closeDatepicker }, "Concluir")))));
   }
   static get watchers() { return {
     "startDateLimit": ["startDateLimitChanged"],
-    "endDateLimit": ["endDateLimitChanged"]
+    "endDateLimit": ["endDateLimitChanged"],
+    "dateSelected": ["dateSelectedChanged"]
   }; }
 };
 DatePicker.style = datepickerCss;