v4web-components
Version:
Stencil Component Starter
349 lines (343 loc) • 23.1 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$6 } from './lab-ds-avatar2.js';
import { d as defineCustomElement$5 } from './lab-ds-button2.js';
import { d as defineCustomElement$4 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$3 } from './lab-ds-icon-selectable2.js';
import { d as defineCustomElement$2 } from './lab-ds-radio-button2.js';
class Calendar {
constructor(year, month) {
this.daysInCalendarWithFiveRows = 42;
this.daysInCalendarWithFourRows = 35;
this.daysInCalendarWithThreeRows = 28;
this.daysInCalendar = this.daysInCalendarWithFourRows;
this.fillStartCount = 0;
this.fillEndCount = 0;
this.fillCount = [0, 1, 2, 3, 4, 5, 6];
this.year = year;
this.month = month;
}
getCalendarDays() {
const daysOfCurrentMonth = this.getDaysOfCurrentMonth();
const fillStartCount = this.fillCount[this.getFirstDayOfMonth()];
const fillEndCount = this.daysInCalendarWithFourRows - (daysOfCurrentMonth.length + fillStartCount);
this.currentMonthCount = daysOfCurrentMonth.length;
this.fillStartCount = fillStartCount;
this.fillEndCount = fillEndCount;
const fillStart = fillStartCount > 0 ? this.getDaysOfLastMonth(fillStartCount) : [];
const fillEnd = this.getDaysOfNextMonth(fillEndCount);
return fillStart.concat(daysOfCurrentMonth).concat(fillEnd);
}
getDaysOfCurrentMonth() {
return this.getDaysOfMonth(this.month);
}
getDaysOfLastMonth(fillStartCount) {
const daysOfMonth = this.getDaysOfMonth(this.month - 1);
return daysOfMonth.slice(-fillStartCount);
}
getDaysOfNextMonth(endCount) {
const daysOfMonth = this.getDaysOfMonth(this.month + 1);
let slicedDays;
if (endCount <= -1) {
endCount = this.daysInCalendarWithFiveRows - (this.currentMonthCount + this.fillStartCount);
slicedDays = daysOfMonth.slice(0, endCount);
this.daysInCalendar = this.daysInCalendarWithFiveRows;
this.fillEndCount = endCount;
}
else if (endCount === 7 && this.currentMonthCount + this.fillStartCount === 28) {
endCount = this.daysInCalendarWithThreeRows - (this.currentMonthCount + this.fillStartCount);
slicedDays = daysOfMonth.slice(0, endCount);
this.daysInCalendar = this.daysInCalendarWithThreeRows;
this.fillEndCount = endCount;
}
else {
slicedDays = daysOfMonth.slice(0, endCount);
}
return slicedDays;
}
getDaysOfMonth(month) {
const daysOfMonth = new Date(this.year, month, 0).getDate();
return Array.from({ length: daysOfMonth }, (_, i) => i + 1);
}
getFirstDayOfMonth() {
return new Date(this.year, this.month - 1, 1).getDay();
}
getFillStartCount() {
return this.fillStartCount;
}
getFillEndCount() {
return this.fillEndCount;
}
static getToday() {
return {
day: new Date().getDate(),
month: new Date().getMonth() + 1,
year: new Date().getFullYear(),
};
}
}
const labDsDatePickerCss = "input{border:none;outline:none;padding:0;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default)}input[type='date']::-webkit-inner-spin-button,input[type='date']::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default);max-width:100%}.v4-input .input-title-container{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h8)}.v4-input.medium .title-text{font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.clean-visible{display:none}.input-field{width:100%;text-align:left}.input-icon{display:flex;align-items:center;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs);margin-bottom:0;cursor:pointer}.medium .input-icon{padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm)}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.calendar-container{display:flex;font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative;z-index:10}.hints{position:absolute;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);box-shadow:var(--lab-ds-semantic-container-shadow-l);box-sizing:border-box;background-color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:var(--lab-ds-semantic-selectable-color-border-default);color:var(--lab-ds-semantic-color-fg-default)}.calendar-visible-container{padding-right:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-top:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-m)}.error .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-border-dark-error)}.icon.error{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.error .helper-text{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.v4-input:not(.disabled) .input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.v4-input:not(.disabled) .input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.icon{display:flex}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .helper-text{color:var(--lab-ds-semantic-color-fg-disabled)}.calendar{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-m);max-width:22.938rem}.header{display:flex;justify-content:space-between;align-items:center}.header .calendar-select{display:flex;align-items:center;justify-content:center;gap:var(--lab-ds-semantic-selectable-space-gap-s);width:100%;cursor:pointer}.calendar-select-text{display:flex;align-items:center;justify-content:center;font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.calendar-select .icon-hidden{opacity:0}.calendar .day-names span{width:calc(100% / 7);text-align:center}.calendar .days-in-month span{width:calc(100% / 7 - var(--lab-ds-semantic-selectable-space-gap-m));text-align:center}.day-names{display:flex;gap:var(--lab-ds-semantic-selectable-space-gap-m);box-sizing:content-box;font:var(--lab-ds-semantic-typography-heading-h6);justify-content:space-between;text-align:center}.days-in-month{display:flex;flex-wrap:wrap;gap:var(--lab-ds-semantic-selectable-space-gap-m);justify-content:space-between;text-align:center}.days-in-month span{outline:none;display:flex;cursor:pointer;justify-content:center;align-items:center;color:var(--lab-ds-semantic-color-fg-default)}.days-in-month span i{display:flex;width:2.5rem;align-items:center;justify-content:center;aspect-ratio:1;font-style:normal;border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.days-in-month span.disabled span{width:2.5rem;color:var(--lab-ds-semantic-color-fg-disabled);opacity:var(--lab-ds-core-opacity-80);cursor:default}.material .days-in-month span:hover:not(.disabled) i:not(.selected){background:#e6d2f1;color:var(--lab-ds-semantic-color-fg-default);background-color:var(--lab-ds-semantic-selectable-color-bg-hover)}.material .days-in-month span:focus:not(.disabled) i:not(.selected){outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-width:var(--lab-ds-semantic-selectable-border-width-s)}.material .days-in-month i.active{border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-selectable-color-primary-default)}.material .days-in-month span:hover:not(.disabled) i.active{background-color:var(--lab-ds-semantic-selectable-color-primary-hover);color:var(--lab-ds-semantic-color-fg-contrast-primary)}.material .days-in-month span:focus:not(.disabled) i.active:not(.selected){outline-style:solid;border-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-selectable-color-primary-default);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-width:var(--lab-ds-semantic-selectable-border-width-s)}.material .days-in-month i.selected{background-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-color-fg-contrast-primary)}.material .days-in-month span:hover:not(.disabled) i.selected{background-color:var(--lab-ds-semantic-selectable-color-primary-hover);color:var(--lab-ds-semantic-color-fg-contrast-primary)}.calendar-actions{display:flex;justify-content:end;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xl)}.calendar-month-select-container{position:absolute;z-index:10;width:calc(100% - 2 * var(--lab-ds-semantic-selectable-space-padding-sm));overflow-y:auto;max-height:83%;background-color:var(--lab-ds-semantic-selectable-color-bg-pure);gap:var(--lab-ds-semantic-selectable-space-gap-m);transition:all 200ms ease-in-out}.scroll-customized::-webkit-scrollbar{width:0.5rem;height:0}.scroll-customized::-webkit-scrollbar-track{background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.scroll-customized::-webkit-scrollbar-thumb{background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.calendar-year-select-container{position:absolute;z-index:10;width:calc(100% - 2 * var(--lab-ds-semantic-selectable-space-padding-sm));max-height:83%;overflow-y:auto;background-color:var(--lab-ds-semantic-selectable-color-bg-pure);gap:var(--lab-ds-semantic-selectable-space-gap-m);transition:all 200ms ease-in-out}.calendar-select-radio-button{padding:0.5rem 0}";
const LabDsDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class LabDsDatePicker extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.changeDatePicker = createEvent(this, "changeDatePicker", 7);
this.handleConfirmDatePicker = createEvent(this, "handleConfirmDatePicker", 7);
this.dayChanged = createEvent(this, "dayChanged", 7);
this.monthChanged = createEvent(this, "monthChanged", 7);
this.yearChanged = createEvent(this, "yearChanged", 7);
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)));
}
get el() { return this; }
static get watchers() { return {
"date": ["watchDate"]
}; }
static get style() { return labDsDatePickerCss; }
}, [1, "lab-ds-date-picker", {
"value": [1],
"titleInput": [1, "title-input"],
"disabled": [4],
"helperText": [1, "helper-text"],
"state": [1],
"size": [1],
"dayNames": [16],
"monthNames": [16],
"showFillDays": [4, "show-fill-days"],
"isCalendarVisible": [32],
"isYearVisible": [32],
"isMonthVisible": [32],
"monthChecked": [32],
"yearChecked": [32],
"date": [32],
"daysInMonth": [32],
"selectedDate": [32],
"eventDates": [32]
}, [[8, "click", "checkForClickOutside"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-date-picker", "lab-ds-avatar", "lab-ds-button", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable", "lab-ds-radio-button"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-date-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsDatePicker$1);
}
break;
case "lab-ds-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lab-ds-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lab-ds-icon-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lab-ds-radio-button":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const LabDsDatePicker = LabDsDatePicker$1;
const defineCustomElement = defineCustomElement$1;
export { LabDsDatePicker, defineCustomElement };
//# sourceMappingURL=lab-ds-date-picker.js.map