v4web-components
Version:
Stencil Component Starter
483 lines (482 loc) • 16.3 kB
JavaScript
import { h } from '@stencil/core';
import { Calendar } from '../../../utils/calendar';
export class LabDsDatePicker {
constructor() {
this.daySelectedHandler = (day) => {
this.selectedDate = {
day,
month: this.date.month,
year: this.date.year,
};
this.dayChangedHandler(this.selectedDate);
};
this.switchToPreviousMonth = () => {
if (this.date.month !== 1) {
this.date.month -= 1;
}
else {
this.date.month = 12;
this.date.year -= 1;
}
if (typeof this.date !== 'undefined') {
delete this.date.day;
}
this.setCalendarDetails();
this.monthChangedHandler(this.date);
};
this.switchToNextMonth = () => {
if (this.date.month !== 12) {
this.date.month += 1;
}
else {
this.date.month = 1;
this.date.year += 1;
}
delete this.date.day;
this.setCalendarDetails();
this.monthChangedHandler(this.date);
};
this.switchToPreviousYear = () => {
this.date.year -= 1;
if (typeof this.date !== 'undefined') {
delete this.date.day;
}
this.setCalendarDetails();
this.yearChangedHandler(this.date);
};
this.switchToNextYear = () => {
this.date.year += 1;
delete this.date.day;
this.setCalendarDetails();
this.monthChangedHandler(this.date);
};
this.getDigitClassNames = (day, month, year, index) => {
let classNameDigit = [];
if (day.toString().length === 1) {
classNameDigit.push('padding-single-digit');
}
if (this.isToday(day, month, year, index)) {
classNameDigit.push('active');
}
if (this.isSelectedDay(day, index)) {
classNameDigit.push('selected');
}
if (this.eventDates.includes(day)) {
classNameDigit.push('has-event');
}
return classNameDigit.join(' ');
};
this.isCalendarVisible = false;
this.isYearVisible = false;
this.isMonthVisible = false;
this.value = undefined;
this.titleInput = undefined;
this.disabled = false;
this.helperText = undefined;
this.state = 'default';
this.size = 'small';
this.dayNames = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
this.monthNames = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
this.monthChecked = undefined;
this.yearChecked = undefined;
this.showFillDays = true;
this.date = Calendar.getToday();
this.daysInMonth = undefined;
this.selectedDate = undefined;
this.eventDates = [];
this.today = Calendar.getToday();
}
watchDate(date) {
if ('month' in date && 'year' in date) {
this.selectedDate = date;
}
}
componentWillLoad() {
this.setCalendarDetails();
}
setCalendarDetails() {
const date = this.getValidDate();
const calendar = new Calendar(date.year, date.month);
this.daysInMonth = calendar.getCalendarDays();
this.fillStartCount = calendar.getFillStartCount();
this.fillEndCount = calendar.daysInCalendar - calendar.getFillEndCount();
}
getValidDate() {
let date = this.date;
if (!('month' in this.date && 'year' in this.date)) {
date = this.today;
}
return date;
}
dayChangedHandler(calendarEntry) {
this.changeDatePicker.emit(`${calendarEntry.year}-${String(calendarEntry.month).padStart(2, '0')}-${String(calendarEntry.day).padStart(2, '0')}`);
this.isCalendarVisible = false;
}
monthChangedHandler(calendarEntry) {
this.monthChanged.emit(calendarEntry);
}
yearChangedHandler(calendarEntry) {
this.yearChanged.emit(calendarEntry);
}
isToday(day, month, year, index) {
return (this.today.day === day && this.today.month === month && this.today.year === year && this.today.year === year && !(index < this.fillStartCount || index >= this.fillEndCount));
}
isSelectedDay(day, index) {
return (typeof this.selectedDate !== 'undefined' &&
this.selectedDate.day === day &&
this.selectedDate.month === this.date.month &&
this.selectedDate.year === this.date.year &&
!(index < this.fillStartCount || index >= this.fillEndCount));
}
handleSelect() {
if (this.disabled)
return;
this.isCalendarVisible = !this.isCalendarVisible;
}
handleConfirm() {
this.isCalendarVisible = false;
this.handleConfirmDatePicker.emit();
}
handleCancel() {
this.isCalendarVisible = false;
this.selectedDate.day = null;
this.selectedDate.month = null;
this.selectedDate.year = null;
this.changeDatePicker.emit('');
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.isCalendarVisible = false;
}
render() {
var _a;
const isMonthVisibleIcon = this.isMonthVisible ? 'expand_less' : 'expand_more';
const isYearVisibleIcon = this.isYearVisible ? 'expand_less' : 'expand_more';
const iconIsHidden = this.isMonthVisible || this.isYearVisible ? 'icon-hidden' : '';
const date = this.getValidDate();
const dateActual = new Date();
let yearsName = [];
for (let i = dateActual.getFullYear() + 3; i >= 1900; i--) {
yearsName.push(i);
}
return (h("div", { class: `v4-input ${this.state} ${this.size} ${this.disabled && 'disabled'}` }, h("div", { class: "input-title-container" }, h("span", { class: "title-text" }, this.titleInput), h("div", { onClick: () => {
this.handleSelect();
}, class: `input-icon` }, h("input", { disabled: this.disabled, class: "input-field", type: "date", value: this.value, readonly: true }), h("lab-ds-icon-not-selectable", { class: `icon right`, size: "small", icon: "calendar_month" }))), this.isCalendarVisible && (h("div", { class: "calendar-container" }, h("div", { class: "hints" }, h("div", { class: "calendar-visible-container" }, h("div", { class: "calendar material" }, h("div", { class: "header" }, h("div", { class: "calendar-select calendar-month-select" }, h("lab-ds-icon-selectable", { class: `${iconIsHidden}`, onClick: this.switchToPreviousMonth, size: "s-medium", icon: "chevron_left" }), h("span", { onClick: () => {
this.isMonthVisible = !this.isMonthVisible;
this.isYearVisible = false;
}, class: "calendar-select-text" }, (_a = this.monthNames[date.month - 1]) === null || _a === void 0 ? void 0 :
_a.slice(0, 3), " ", h("lab-ds-icon-selectable", { size: "small", icon: isMonthVisibleIcon })), h("lab-ds-icon-selectable", { class: `${iconIsHidden}`, onClick: this.switchToNextMonth, size: "s-medium", icon: "chevron_right" })), h("div", { class: "calendar-select calendar-year-select" }, h("lab-ds-icon-selectable", { class: `${iconIsHidden}`, onClick: this.switchToPreviousYear, size: "s-medium", icon: "chevron_left" }), h("span", { onClick: () => {
this.isYearVisible = !this.isYearVisible;
this.isMonthVisible = false;
}, class: "calendar-select-text" }, date.year, h("lab-ds-icon-selectable", { size: "small", icon: isYearVisibleIcon })), h("lab-ds-icon-selectable", { class: `${iconIsHidden}`, onClick: this.switchToNextYear, size: "s-medium", icon: "chevron_right" }))), h("div", { class: "calendar-select-relative" }, this.isMonthVisible && (h("div", { class: "calendar-month-select-container scroll-customized" }, this.monthNames.map((monthName, index) => (h("div", { class: "calendar-select-radio-button", key: index }, h("lab-ds-radio-button", { label: monthName, checked: this.monthChecked === monthName, onHandleRadioButton: () => {
this.date.month = index + 1;
this.monthChecked = monthName;
this.monthChangedHandler(this.date);
this.isMonthVisible = false;
} })))))), this.isYearVisible && (h("div", { class: "calendar-year-select-container scroll-customized" }, yearsName === null || yearsName === void 0 ? void 0 : yearsName.map((yearsName, index) => (h("div", { class: "calendar-select-radio-button", key: index }, h("lab-ds-radio-button", { label: yearsName, checked: this.yearChecked === yearsName, onHandleRadioButton: () => {
this.date.year = yearsName;
this.yearChecked = yearsName;
this.monthChangedHandler(this.date);
this.isYearVisible = false;
} }))))))), h("div", { class: "day-names" }, this.dayNames.map(dayName => (h("span", null, dayName)))), h("div", { class: "days-in-month" }, this.daysInMonth.map((day, index) => {
const classNameDigit = this.getDigitClassNames(day, date.month, date.year, index);
if (index < this.fillStartCount || index >= this.fillEndCount) {
return (h("span", { class: "disabled" }, h("span", null, this.showFillDays ? day : '')));
}
else {
return (h("span", { tabIndex: index, onClick: () => this.daySelectedHandler(day) }, h("i", { class: classNameDigit }, day)));
}
})), h("div", { class: "calendar-actions" }, h("lab-ds-button", { size: "small", onClick: () => this.handleCancel(), leadingIcon: "cancel", label: "Cancelar", variant: "danger-outlined" }), h("lab-ds-button", { size: "small", onClick: () => this.handleConfirm(), label: "Confirmar", variant: "primary" }))))))), this.helperText && h("span", { class: "helper-text" }, this.helperText)));
}
static get is() { return "lab-ds-date-picker"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-date-picker.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-date-picker.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"titleInput": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "title-input",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "helper-text",
"reflect": false
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'error' | 'default'",
"resolved": "\"default\" | \"error\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "state",
"reflect": false,
"defaultValue": "'default'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium'",
"resolved": "\"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'small'"
},
"dayNames": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "['D', 'S', 'T', 'Q', 'Q', 'S', 'S']"
},
"monthNames": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "['Janeiro', 'Fevereiro', 'Mar\u00E7o', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']"
},
"showFillDays": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "show-fill-days",
"reflect": false,
"defaultValue": "true"
}
};
}
static get states() {
return {
"isCalendarVisible": {},
"isYearVisible": {},
"isMonthVisible": {},
"monthChecked": {},
"yearChecked": {},
"date": {},
"daysInMonth": {},
"selectedDate": {},
"eventDates": {}
};
}
static get events() {
return [{
"method": "changeDatePicker",
"name": "changeDatePicker",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "handleConfirmDatePicker",
"name": "handleConfirmDatePicker",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "dayChanged",
"name": "dayChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "monthChanged",
"name": "monthChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "CalendarEntry",
"resolved": "CalendarEntry",
"references": {
"CalendarEntry": {
"location": "import",
"path": "../../../utils/calendar-entry"
}
}
}
}, {
"method": "yearChanged",
"name": "yearChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "CalendarEntry",
"resolved": "CalendarEntry",
"references": {
"CalendarEntry": {
"location": "import",
"path": "../../../utils/calendar-entry"
}
}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "date",
"methodName": "watchDate"
}];
}
static get listeners() {
return [{
"name": "click",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=lab-ds-date-picker.js.map