blip-ds 1.145.0 → 1.147.1

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

@@ -11,7 +11,6 @@ const BdsdatepickerSingle = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.bdsDateSelected = index.createEvent(this, "bdsDateSelected", 7);
-    this.bdsClearDate = index.createEvent(this, "bdsClearDate", 7);
     this.monthActivated = calendar.THIS_DAY.getMonth();
     this.yearActivated = calendar.THIS_DAY.getFullYear();
     this.animatePrev = false;
@@ -31,6 +30,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') {
@@ -44,6 +46,9 @@ const BdsdatepickerSingle = class {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -63,6 +68,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;
@@ -88,6 +96,9 @@ const BdsdatepickerSingle = class {
     this.years = calendar.getYears(this.yearActivated, this.startDate.year, this.endDate.year);
     this.months = calendar.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++) {
@@ -95,10 +106,16 @@ const BdsdatepickerSingle = class {
     }
     return lenghtDays.map((item) => index.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') {
@@ -117,6 +134,9 @@ const BdsdatepickerSingle = class {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -135,6 +155,9 @@ const BdsdatepickerSingle = class {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const fullCurrDate = calendar.fillDate(calendar.THIS_DAY);
     if (calendar.fillDayList(value) == fullCurrDate)
@@ -142,6 +165,9 @@ const BdsdatepickerSingle = class {
     else
       return false;
   }
+  /**
+   * checkDisableDay. Function to check the disable day.
+   */
   checkDisableDay(value) {
     const startDateLimit = this.startDate ? calendar.fillDayList(this.startDate) : `0`;
     const endDateLimit = this.endDate ? calendar.fillDayList(this.endDate) : `9999999`;
@@ -152,6 +178,9 @@ const BdsdatepickerSingle = class {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const selectedDate = this.dateSelect ? calendar.fillDate(this.dateSelect) : `0`;
     if (calendar.fillDayList(value) == selectedDate)

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

@@ -36,24 +36,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 = validations.maskDate(input.value);
@@ -73,6 +91,9 @@ const DatePicker = class {
         }
       }
     };
+    /**
+     * maskEndDateSelected. Function to add mask to the end date field
+     */
     this.maskEndDateSelected = (ev) => {
       const input = ev.target;
       this.valueEndDateSelected = validations.maskDate(input.value);
@@ -92,12 +113,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 (!validations.dateValidation(this.startDateLimit)) {
       this.startDateLimit = calendar.defaultStartDate;
     }
   }
+  /**
+   * endDateLimit validation.
+   */
   endDateLimitChanged() {
     const dlStartDate = calendar.dateToDayList(this.startDateLimit);
     const dlEndDate = calendar.dateToDayList(this.endDateLimit);
@@ -110,10 +150,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;
@@ -121,6 +167,9 @@ const DatePicker = class {
     this.valueDateSelected = this.dateSelected && calendar.dateToString(this.dateSelected);
     this.errorMsgDate = null;
   }
+  /**
+   * selectEndDate. Function to issue selected end date..
+   */
   selectEndDate(event) {
     const { detail: { value }, } = event;
     this.endDateSelected = value;
@@ -129,11 +178,12 @@ const DatePicker = class {
     this.errorMsgEndDate = null;
   }
   render() {
-    return (index.h("div", { class: { datepicker: true } }, this.typeOfDate == 'single' ? (index.h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, index.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 }))) : (index.h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, index.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 }), index.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 }))), index.h("div", { class: { datepicker__menu: true, datepicker__menu__open: this.open } }, this.message && (index.h("div", { class: "datepicker__menu__message" }, index.h("bds-icon", { name: "warning", theme: "outline", "aria-label": "\u00CDcone de aten\u00E7\u00E3o" }), index.h("bds-typo", { variant: "fs-16" }, this.message))), this.typeOfDate == 'single' ? (index.h("bds-datepicker-single", { ref: this.refDatepickerSingle, startDate: this.startDateLimit && calendar.dateToDayList(this.startDateLimit), endDate: this.endDateLimit && calendar.dateToDayList(this.endDateLimit), dateSelect: this.dateSelected, onBdsDateSelected: (event) => this.selectDate(event) })) : (index.h("bds-datepicker-period", { ref: this.refDatepickerPeriod, startDate: this.startDateLimit && calendar.dateToDayList(this.startDateLimit), endDate: this.endDateLimit && calendar.dateToDayList(this.endDateLimit), startDateSelect: this.dateSelected, endDateSelect: this.endDateSelected, onBdsStartDate: (event) => this.selectDate(event), onBdsEndDate: (event) => this.selectEndDate(event) })), index.h("div", { class: { datepicker__menu__footer: true } }, this.typeOfDate == 'single' ? (index.h("bds-button", { variant: "secondary", onClick: () => this.clearDateSingle() }, "Redefinir")) : (index.h("bds-button", { variant: "secondary", onClick: () => this.clearDatePeriod() }, "Redefinir")), index.h("bds-button", { onClick: () => (this.open = false) }, "Concluir")))));
+    return (index.h("div", { class: { datepicker: true } }, this.typeOfDate == 'single' ? (index.h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, index.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 }))) : (index.h("div", { class: { datepicker__inputs: true, [`datepicker__inputs__${this.typeOfDate}`]: true } }, index.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 }), index.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 }))), index.h("div", { class: { datepicker__menu: true, datepicker__menu__open: this.open } }, this.message && (index.h("div", { class: "datepicker__menu__message" }, index.h("bds-icon", { name: "warning", theme: "outline", "aria-label": "\u00CDcone de aten\u00E7\u00E3o" }), index.h("bds-typo", { variant: "fs-16" }, this.message))), this.typeOfDate == 'single' ? (index.h("bds-datepicker-single", { ref: this.refDatepickerSingle, startDate: this.startDateLimit && calendar.dateToDayList(this.startDateLimit), endDate: this.endDateLimit && calendar.dateToDayList(this.endDateLimit), dateSelect: this.dateSelected, onBdsDateSelected: (event) => this.selectDate(event) })) : (index.h("bds-datepicker-period", { ref: this.refDatepickerPeriod, startDate: this.startDateLimit && calendar.dateToDayList(this.startDateLimit), endDate: this.endDateLimit && calendar.dateToDayList(this.endDateLimit), startDateSelect: this.dateSelected, endDateSelect: this.endDateSelected, onBdsStartDate: (event) => this.selectDate(event), onBdsEndDate: (event) => this.selectEndDate(event) })), index.h("div", { class: { datepicker__menu__footer: true } }, this.typeOfDate == 'single' ? (index.h("bds-button", { variant: "secondary", onClick: () => this.clearDateSingle() }, "Redefinir")) : (index.h("bds-button", { variant: "secondary", onClick: () => this.clearDatePeriod() }, "Redefinir")), index.h("bds-button", { onClick: this.closeDatepicker }, "Concluir")))));
   }
   static get watchers() { return {
     "startDateLimit": ["startDateLimitChanged"],
-    "endDateLimit": ["endDateLimitChanged"]
+    "endDateLimit": ["endDateLimitChanged"],
+    "dateSelected": ["dateSelectedChanged"]
   }; }
 };
 DatePicker.style = datepickerCss;

package/dist/collection/components/datepicker/datepicker-period/datepicker-period.js

@@ -26,6 +26,9 @@ export class BdsdatepickerPeriod {
      * 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') {
@@ -39,6 +42,9 @@ export class BdsdatepickerPeriod {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -59,12 +65,18 @@ export class BdsdatepickerPeriod {
     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
@@ -99,6 +111,9 @@ export class BdsdatepickerPeriod {
     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++) {
@@ -106,6 +121,9 @@ export class BdsdatepickerPeriod {
     }
     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) {
@@ -115,6 +133,9 @@ export class BdsdatepickerPeriod {
       this.startDateSelect = changeSelected;
     }
   }
+  /**
+   * prevMonth. Function to rewind the date on the calendar slide.
+   */
   prevMonth() {
     this.animatePrev = true;
     if (this.loadingSlide != 'pendding') {
@@ -133,6 +154,9 @@ export class BdsdatepickerPeriod {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -151,6 +175,9 @@ export class BdsdatepickerPeriod {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const validateDate = fillDayList(value);
     const fullCurrDate = fillDate(THIS_DAY);
@@ -159,6 +186,9 @@ export class BdsdatepickerPeriod {
     else
       return false;
   }
+  /**
+   * checkDisableDay. Function to check the disable day.
+   */
   checkDisableDay(value) {
     const validateDate = fillDayList(value);
     const startDateLimit = this.startDate ? fillDayList(this.startDate) : `0`;
@@ -176,6 +206,9 @@ export class BdsdatepickerPeriod {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const validateDate = fillDayList(value);
     const startSelectedDate = this.startDateSelect ? fillDate(this.startDateSelect) : `0`;
@@ -185,6 +218,9 @@ export class BdsdatepickerPeriod {
     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`;
@@ -195,6 +231,9 @@ export class BdsdatepickerPeriod {
       }
     }
   }
+  /**
+   * checkPeriodStart. Function to check the period selected start day.
+   */
   checkPeriodStart(value) {
     const validateDate = value.date == 1;
     const validateDay = value.day == 0;
@@ -205,6 +244,9 @@ export class BdsdatepickerPeriod {
       return true;
     }
   }
+  /**
+   * checkPeriodEnd. Function to check the period selected end day.
+   */
   checkPeriodEnd(value, lastItem) {
     const validateDate = lastItem;
     const validateDay = value.day == 6;
@@ -403,7 +445,7 @@ export class BdsdatepickerPeriod {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "bdsStartDate. Event to return selected date value."
       },
       "complexType": {
         "original": "any",
@@ -418,7 +460,7 @@ export class BdsdatepickerPeriod {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "bdsEndDate. Event to return selected end date value."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/datepicker/datepicker-single/datepicker-single.js

@@ -21,6 +21,9 @@ export class BdsdatepickerSingle {
      * 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') {
@@ -34,6 +37,9 @@ export class BdsdatepickerSingle {
         this.yearActivated = value;
       }
     };
+    /**
+     * openDateSelect. Function to open the year or month selector.
+     */
     this.openDateSelect = (value, ref) => {
       if (ref == 'months') {
         setTimeout(() => {
@@ -53,6 +59,9 @@ export class BdsdatepickerSingle {
   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;
@@ -78,6 +87,9 @@ export class BdsdatepickerSingle {
     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++) {
@@ -85,10 +97,16 @@ export class BdsdatepickerSingle {
     }
     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') {
@@ -107,6 +125,9 @@ export class BdsdatepickerSingle {
       return;
     }
   }
+  /**
+   * nextMonth. Function to advance the date on the calendar slide.
+   */
   nextMonth() {
     this.animateNext = true;
     if (this.loadingSlide != 'pendding') {
@@ -125,6 +146,9 @@ export class BdsdatepickerSingle {
       return;
     }
   }
+  /**
+   * checkCurrentDay. Function to check the current day.
+   */
   checkCurrentDay(value) {
     const fullCurrDate = fillDate(THIS_DAY);
     if (fillDayList(value) == fullCurrDate)
@@ -132,6 +156,9 @@ export class BdsdatepickerSingle {
     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`;
@@ -142,6 +169,9 @@ export class BdsdatepickerSingle {
       return true;
     }
   }
+  /**
+   * checkSelectedDay. Function to check the selected day.
+   */
   checkSelectedDay(value) {
     const selectedDate = this.dateSelect ? fillDate(this.dateSelect) : `0`;
     if (fillDayList(value) == selectedDate)
@@ -308,28 +338,13 @@ export class BdsdatepickerSingle {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "bdsDateSelected. Event to return selected date value."
       },
       "complexType": {
         "original": "any",
         "resolved": "any",
         "references": {}
       }
-    }, {
-      "method": "bdsClearDate",
-      "name": "bdsClearDate",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
     }]; }
   static get methods() { return {
     "clear": {

package/dist/collection/components/datepicker/datepicker.js

@@ -26,24 +26,42 @@ export class DatePicker {
      * 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);
@@ -63,6 +81,9 @@ export class DatePicker {
         }
       }
     };
+    /**
+     * maskEndDateSelected. Function to add mask to the end date field
+     */
     this.maskEndDateSelected = (ev) => {
       const input = ev.target;
       this.valueEndDateSelected = maskDate(input.value);
@@ -82,12 +103,31 @@ export class DatePicker {
         }
       }
     };
+    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);
@@ -100,10 +140,16 @@ export class DatePicker {
         .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;
@@ -111,6 +157,9 @@ export class DatePicker {
     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;
@@ -122,8 +171,8 @@ export class DatePicker {
     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("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" }),
@@ -131,7 +180,7 @@ export class DatePicker {
         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")))));
+          h("bds-button", { onClick: this.closeDatepicker }, "Concluir")))));
   }
   static get is() { return "bds-datepicker"; }
   static get originalStyleUrls() { return {
@@ -236,7 +285,7 @@ export class DatePicker {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "bdsStartDate. Event to return selected date value."
       },
       "complexType": {
         "original": "any",
@@ -251,7 +300,7 @@ export class DatePicker {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "bdsStartDate. Event to return selected end date value."
       },
       "complexType": {
         "original": "any",
@@ -265,5 +314,8 @@ export class DatePicker {
     }, {
       "propName": "endDateLimit",
       "methodName": "endDateLimitChanged"
+    }, {
+      "propName": "dateSelected",
+      "methodName": "dateSelectedChanged"
     }]; }
 }