v4web-components
Version:
Stencil Component Starter
2 lines • 17.2 kB
JavaScript
import{r as e,c as a,h as t,g as s}from"./p-c2aeec95.js";class i{constructor(e,a){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=e;this.month=a}getCalendarDays(){const e=this.getDaysOfCurrentMonth();const a=this.fillCount[this.getFirstDayOfMonth()];const t=this.daysInCalendarWithFourRows-(e.length+a);this.currentMonthCount=e.length;this.fillStartCount=a;this.fillEndCount=t;const s=a>0?this.getDaysOfLastMonth(a):[];const i=this.getDaysOfNextMonth(t);return s.concat(e).concat(i)}getDaysOfCurrentMonth(){return this.getDaysOfMonth(this.month)}getDaysOfLastMonth(e){const a=this.getDaysOfMonth(this.month-1);return a.slice(-e)}getDaysOfNextMonth(e){const a=this.getDaysOfMonth(this.month+1);let t;if(e<=-1){e=this.daysInCalendarWithFiveRows-(this.currentMonthCount+this.fillStartCount);t=a.slice(0,e);this.daysInCalendar=this.daysInCalendarWithFiveRows;this.fillEndCount=e}else if(e===7&&this.currentMonthCount+this.fillStartCount===28){e=this.daysInCalendarWithThreeRows-(this.currentMonthCount+this.fillStartCount);t=a.slice(0,e);this.daysInCalendar=this.daysInCalendarWithThreeRows;this.fillEndCount=e}else{t=a.slice(0,e)}return t}getDaysOfMonth(e){const a=new Date(this.year,e,0).getDate();return Array.from({length:a},((e,a)=>a+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 l="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 n=class{constructor(t){e(this,t);this.changeDatePicker=a(this,"changeDatePicker",7);this.handleConfirmDatePicker=a(this,"handleConfirmDatePicker",7);this.dayChanged=a(this,"dayChanged",7);this.monthChanged=a(this,"monthChanged",7);this.yearChanged=a(this,"yearChanged",7);this.daySelectedHandler=e=>{this.selectedDate={day:e,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=(e,a,t,s)=>{let i=[];if(e.toString().length===1){i.push("padding-single-digit")}if(this.isToday(e,a,t,s)){i.push("active")}if(this.isSelectedDay(e,s)){i.push("selected")}if(this.eventDates.includes(e)){i.push("has-event")}return i.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=i.getToday();this.daysInMonth=undefined;this.selectedDate=undefined;this.eventDates=[];this.today=i.getToday()}watchDate(e){if("month"in e&&"year"in e){this.selectedDate=e}}componentWillLoad(){this.setCalendarDetails()}setCalendarDetails(){const e=this.getValidDate();const a=new i(e.year,e.month);this.daysInMonth=a.getCalendarDays();this.fillStartCount=a.getFillStartCount();this.fillEndCount=a.daysInCalendar-a.getFillEndCount()}getValidDate(){let e=this.date;if(!("month"in this.date&&"year"in this.date)){e=this.today}return e}dayChangedHandler(e){this.changeDatePicker.emit(`${e.year}-${String(e.month).padStart(2,"0")}-${String(e.day).padStart(2,"0")}`);this.isCalendarVisible=false}monthChangedHandler(e){this.monthChanged.emit(e)}yearChangedHandler(e){this.yearChanged.emit(e)}isToday(e,a,t,s){return this.today.day===e&&this.today.month===a&&this.today.year===t&&this.today.year===t&&!(s<this.fillStartCount||s>=this.fillEndCount)}isSelectedDay(e,a){return typeof this.selectedDate!=="undefined"&&this.selectedDate.day===e&&this.selectedDate.month===this.date.month&&this.selectedDate.year===this.date.year&&!(a<this.fillStartCount||a>=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(e){if(this.el.contains(e.target)){return}this.isCalendarVisible=false}render(){var e;const a=this.isMonthVisible?"expand_less":"expand_more";const s=this.isYearVisible?"expand_less":"expand_more";const i=this.isMonthVisible||this.isYearVisible?"icon-hidden":"";const l=this.getValidDate();const n=new Date;let r=[];for(let e=n.getFullYear()+3;e>=1900;e--){r.push(e)}return t("div",{class:`v4-input ${this.state} ${this.size} ${this.disabled&&"disabled"}`},t("div",{class:"input-title-container"},t("span",{class:"title-text"},this.titleInput),t("div",{onClick:()=>{this.handleSelect()},class:`input-icon`},t("input",{disabled:this.disabled,class:"input-field",type:"date",value:this.value,readonly:true}),t("lab-ds-icon-not-selectable",{class:`icon right`,size:"small",icon:"calendar_month"}))),this.isCalendarVisible&&t("div",{class:"calendar-container"},t("div",{class:"hints"},t("div",{class:"calendar-visible-container"},t("div",{class:"calendar material"},t("div",{class:"header"},t("div",{class:"calendar-select calendar-month-select"},t("lab-ds-icon-selectable",{class:`${i}`,onClick:this.switchToPreviousMonth,size:"s-medium",icon:"chevron_left"}),t("span",{onClick:()=>{this.isMonthVisible=!this.isMonthVisible;this.isYearVisible=false},class:"calendar-select-text"},(e=this.monthNames[l.month-1])===null||e===void 0?void 0:e.slice(0,3)," ",t("lab-ds-icon-selectable",{size:"small",icon:a})),t("lab-ds-icon-selectable",{class:`${i}`,onClick:this.switchToNextMonth,size:"s-medium",icon:"chevron_right"})),t("div",{class:"calendar-select calendar-year-select"},t("lab-ds-icon-selectable",{class:`${i}`,onClick:this.switchToPreviousYear,size:"s-medium",icon:"chevron_left"}),t("span",{onClick:()=>{this.isYearVisible=!this.isYearVisible;this.isMonthVisible=false},class:"calendar-select-text"},l.year,t("lab-ds-icon-selectable",{size:"small",icon:s})),t("lab-ds-icon-selectable",{class:`${i}`,onClick:this.switchToNextYear,size:"s-medium",icon:"chevron_right"}))),t("div",{class:"calendar-select-relative"},this.isMonthVisible&&t("div",{class:"calendar-month-select-container scroll-customized"},this.monthNames.map(((e,a)=>t("div",{class:"calendar-select-radio-button",key:a},t("lab-ds-radio-button",{label:e,checked:this.monthChecked===e,onHandleRadioButton:()=>{this.date.month=a+1;this.monthChecked=e;this.monthChangedHandler(this.date);this.isMonthVisible=false}}))))),this.isYearVisible&&t("div",{class:"calendar-year-select-container scroll-customized"},r===null||r===void 0?void 0:r.map(((e,a)=>t("div",{class:"calendar-select-radio-button",key:a},t("lab-ds-radio-button",{label:e,checked:this.yearChecked===e,onHandleRadioButton:()=>{this.date.year=e;this.yearChecked=e;this.monthChangedHandler(this.date);this.isYearVisible=false}})))))),t("div",{class:"day-names"},this.dayNames.map((e=>t("span",null,e)))),t("div",{class:"days-in-month"},this.daysInMonth.map(((e,a)=>{const s=this.getDigitClassNames(e,l.month,l.year,a);if(a<this.fillStartCount||a>=this.fillEndCount){return t("span",{class:"disabled"},t("span",null,this.showFillDays?e:""))}else{return t("span",{tabIndex:a,onClick:()=>this.daySelectedHandler(e)},t("i",{class:s},e))}}))),t("div",{class:"calendar-actions"},t("lab-ds-button",{size:"small",onClick:()=>this.handleCancel(),leadingIcon:"cancel",label:"Cancelar",variant:"danger-outlined"}),t("lab-ds-button",{size:"small",onClick:()=>this.handleConfirm(),label:"Confirmar",variant:"primary"})))))),this.helperText&&t("span",{class:"helper-text"},this.helperText))}get el(){return s(this)}static get watchers(){return{date:["watchDate"]}}};n.style=l;export{n as lab_ds_date_picker};
//# sourceMappingURL=p-98f37b76.entry.js.map