@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
1 lines • 29.1 kB
JavaScript
import{r as t,d as e,h as s,e as a,g as o}from"./p-C1-Dpkp7.js";import{h as d}from"./p-tWS3Egrk.js";import{c as i,i as r}from"./p-DJ2rBB6r.js";import{c as n}from"./p-BfP9ezJQ.js";class c{constructor(t=0){this.currentDate=new Date,this.currentMonthDates=[],this.firstDayOfWeek=0,this.firstDayOfWeek=t;const e=new Date;this.gotoDate(e.getFullYear(),e.getMonth())}get selectedYear(){return this.currentDate.getFullYear()}get selectedMonth(){return this.currentDate.getMonth()}get dates(){return this.currentMonthDates}addMonthOffset(t){return this.gotoDate(this.currentDate.getFullYear(),this.currentDate.getMonth()+t),this}gotoDate(t,e){this.currentDate=new Date(t,e,1),this.calculateDates()}getDaysOfWeek(t,e=0){const s=new Intl.DateTimeFormat(t,{weekday:"short"}),a=new Date("11/01/2020"),o=[];for(let t=e;t<e+7;t++){const e=new Date(a);e.setDate(e.getDate()+t);const d=s.format(e);o.push(d.toUpperCase().startsWith("SA")?d:d.slice(0,2))}return o}getWeekNumber(t,e=1){function s(t){const e=new Date(Date.UTC(t.getFullYear(),t.getMonth(),t.getDate())),s=e.getUTCDay()||7;e.setUTCDate(e.getUTCDate()+4-s);const a=new Date(Date.UTC(e.getUTCFullYear(),0,1));return Math.ceil(((e.getTime()-a.getTime())/864e5+1)/7)}const a=(t.getDay()-e+7)%7,o=new Date(t);o.setDate(t.getDate()-a);const d={};for(let t=0;t<7;t++){const e=new Date(o);e.setDate(o.getDate()+t);const a=s(e);d[a]=(d[a]||0)+1}let i=0,r=0;for(const[t,e]of Object.entries(d)){const s=Number(t);e>r&&(r=e,i=s)}return i.toString().padStart(2,"0")}calculateDates(){const t=[],e=this.currentDate.getFullYear(),s=this.currentDate.getMonth();let a=new Date(e,s,1).getDay()-this.firstDayOfWeek;a<0&&(a+=7);const o=new Date(e,s,1-a);for(let e=0;e<42;e++){const s=new Date(o);s.setDate(o.getDate()+e),t.push(s)}this.currentMonthDates=t}}const u=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],h={sunday:0,monday:1,tuesday:2,wednesday:3,thursday:4,friday:5,saturday:6},l=class{constructor(s){t(this,s),this.inputBlur=e(this,"inputBlur",7),this.inputChange=e(this,"inputChange",7),this.inputFocus=e(this,"inputFocus",7),this.calendarMonthChange=e(this,"calendarMonthChange",7),this.calendarYearChange=e(this,"calendarYearChange",7),this.inheritedAttributes={},this.popperInstance=null,this.locale="en-US",this.resolveEffectiveId=i(),this.showCalendar=!1,this.calendar=new c,this.focusedDateIndex=-1,this.hasFocus=!1,this.bordered=!0,this.customClass="",this.disabled=!1,this.readOnly=!1,this.required=!1,this.size="md",this.value="",this.weekStartDay="sunday",this.showWeekNumbers=!1,this.handleBlur=t=>{const e=t.relatedTarget;e&&this.el.contains(e)||(this.hasFocus=!1,this.syncValueFromInput(),this.inputBlur.emit(t))},this.handleFocus=t=>{this.hasFocus||(this.hasFocus=!0,this.inputFocus.emit(t))},this.handleInput=t=>{var e,s;const a=null!==(s=null===(e=t.target)||void 0===e?void 0:e.value)&&void 0!==s?s:"",o=this.parseISODate(a),d=o?this.formatISODate(this.clampDate(o)):"";this.inputChange.emit({target:{value:d}})},this.handleInputKeyDown=t=>{"Enter"===t.key&&(t.preventDefault(),this.syncValueFromInput())},this.setupPopper=()=>{this.popperInstance&&this.popperInstance.destroy(),this.popperInstance=n(this.inputRef,this.calendarRef,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"flip",options:{fallbackPlacements:["top-start","bottom-end","top-end"]}}]})},this.toggleCalendar=()=>{if(this.showCalendar=!this.showCalendar,this.showCalendar){const t=this.parseISODate(this.value);if(this.ensureCalendarWithinBounds(t),t){const e=this.calendar.dates.findIndex((e=>e&&0===this.compareDate(e,t)));-1!==e&&(this.focusedDateIndex=e)}else this.ensureCalendarWithinBounds(new Date),this.focusedDateIndex=this.calendar.dates.findIndex((t=>t&&0===this.compareDate(t,new Date)))}else this.focusedDateIndex=-1;this.inputRef&&this.inputRef.focus()},this.handleDateSelect=t=>{if(!this.isDateDisabled(t)){if(this.hasFocus=!1,this.value=this.formatISODate(t),t.getMonth()!==this.calendar.selectedMonth||t.getFullYear()!==this.calendar.selectedYear){const e=new c(h[this.weekStartDay||"sunday"]);e.gotoDate(t.getFullYear(),t.getMonth()),this.calendar=e}this.showCalendar=!1,this.inputBlur.emit(new FocusEvent("blur",{bubbles:!0}))}},this.addMonthOffset=t=>{const e=new Date(this.calendar.selectedYear,this.calendar.selectedMonth+t,1);this.updateCalendarAndEmitEvents(e.getFullYear(),e.getMonth())},this.handleMonthChange=t=>{t.stopPropagation();const e=t.detail,s=null==e?void 0:e.target,a=parseInt((null==s?void 0:s.value)||"0",10),o=this.calendar.selectedYear;Number.isNaN(a)||this.updateCalendarAndEmitEvents(o,a)},this.handleYearChange=t=>{t.stopPropagation();const e=t.detail,s=null==e?void 0:e.target,a=parseInt((null==s?void 0:s.value)||"0",10),o=this.calendar.selectedMonth;Number.isNaN(a)||this.updateCalendarAndEmitEvents(a,o)},this.handleDateKeyDown=(t,e)=>{this.isDateDisabled(e)||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleDateSelect(e))}}handleFormatChange(){if(this.value&&this.inputRef){const t=this.parseISODate(this.value);t&&(this.inputRef.value=this.formatForDisplay(t))}}handleMinChange(t){this.minDate=this.parseISODate(t),this.maxDate&&this.minDate&&this.minDate>this.maxDate&&(this.maxDate=this.cloneDate(this.minDate)),this.ensureValueWithinBounds()}handleMaxChange(t){this.maxDate=this.parseISODate(t),this.minDate&&this.maxDate&&this.maxDate<this.minDate&&(this.minDate=this.cloneDate(this.maxDate)),this.ensureValueWithinBounds()}handleValueChange(t){if(void 0===t)return;if(!t)return void(this.inputRef&&(this.inputRef.value=""));if(this.hasFocus){if(/^\d{4}-\d{2}-\d{2}$/.test(t)){const e=this.parseISODate(t);e?this.inputRef&&(this.inputRef.value=this.formatForDisplay(this.clampDate(e))):this.inputRef&&(this.inputRef.value=t)}else this.inputRef&&(this.inputRef.value=t);return}const e=this.parseISODate(t);if(!e)return void(this.inputRef&&(this.inputRef.value=""));const s=this.clampDate(e);if(this.inputRef){this.inputRef.value=this.formatForDisplay(s);const t=new Event("input",{bubbles:!0});this.inputRef.dispatchEvent(t)}this.ensureCalendarWithinBounds(s)}handleWeekStartDayChange(){this.calendar=new c(h[this.weekStartDay]);const t=this.parseISODate(this.value);t&&this.calendar.gotoDate(t.getFullYear(),t.getMonth())}componentWillLoad(){d(this.el),this.el.ariaLabel||(this.el.ariaLabel="Date input"),this.inheritedAttributes=r(this.el);try{this.locale=document.documentElement.lang||navigator.language||"en-US"}catch(t){this.locale="en-US"}this.calendar=new c(h[this.weekStartDay]),this.handleMinChange(this.min),this.handleMaxChange(this.max),this.handleValueChange(this.value)}componentDidUpdate(){this.showCalendar&&this.inputRef&&this.calendarRef?this.setupPopper():this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null)}disconnectedCallback(){this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null)}getClasses(){const t=["modus-wc-date-input","modus-wc-input","modus-wc-w-full"],e=(({bordered:t,feedback:e,readOnly:s,size:a})=>{let o="";return t&&(o=`${o} modus-wc-input-bordered`),e&&(o=`${o} modus-wc-input--${e.level}`),s&&(o=`${o} modus-wc-date-input--readonly`),a&&(o=`${o} modus-wc-input-${a}`),o.trim()})({bordered:this.bordered,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}handleClickOutside(t){!t.composedPath().includes(this.el)&&this.showCalendar&&(this.showCalendar=!1,this.hasFocus=!1)}handleEscapeKey(t){"Escape"===t.key&&this.showCalendar&&(this.showCalendar=!1,t.preventDefault())}navigateToAdjacentMonth(t,e){var s,a,o;const d=t%7;this.updateCalendarAndEmitEvents(this.calendar.selectedYear,this.calendar.selectedMonth+(e?-1:1));const i=e?[5,4,3,2,1,0]:[0,1,2,3,4,5];for(const t of i){const e=7*t+d;if(e<this.calendar.dates.length&&(null===(s=this.calendar.dates[e])||void 0===s?void 0:s.getMonth())===this.calendar.selectedMonth)return void(this.focusedDateIndex=e)}const r=this.calendar.dates.map(((t,e)=>(null==t?void 0:t.getMonth())===this.calendar.selectedMonth?e:-1)).filter((t=>-1!==t));this.focusedDateIndex=e?null!==(a=r[r.length-1])&&void 0!==a?a:this.calendar.dates.length-1:null!==(o=r[0])&&void 0!==o?o:0}handleArrowKeys(t){var e;if(!this.showCalendar)return;const s=t.key;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(s))return;t.preventDefault();const a=this.calendar.dates.length;let o=this.focusedDateIndex;if(-1===o){if(this.value){const t=this.parseISODate(this.value);t&&(o=this.calendar.dates.findIndex((e=>0===this.compareDate(e,t))))}-1===o&&(o=0)}let d=o,i=!1,r=null;switch(s){case"ArrowLeft":d=o-1;break;case"ArrowRight":d=o+1;break;case"ArrowUp":d=o-7;break;case"ArrowDown":d=o+7}if(d>=0&&d<a){if(r=this.calendar.dates[d],r){let t=d;const e="ArrowLeft"===s?-1:"ArrowRight"===s?1:"ArrowUp"===s?-7:7;for(;t>=0&&t<a&&this.isDateDisabled(this.calendar.dates[t]);)t+=e;if(!(t>=0&&t<a&&this.calendar.dates[t]))return;r=this.calendar.dates[t],d=t,r.getMonth()!==this.calendar.selectedMonth&&(i=!0),this.focusedDateIndex=d}}else if(i=!0,"ArrowUp"===s){const t=new Date(this.calendar.selectedYear,this.calendar.selectedMonth-1,1);this.isDateDisabled(t)||(this.navigateToAdjacentMonth(o,!0),i=!1)}else if("ArrowDown"===s){const t=new Date(this.calendar.selectedYear,this.calendar.selectedMonth+1,1);this.isDateDisabled(t)||(this.navigateToAdjacentMonth(o,!1),i=!1)}else if("ArrowLeft"===s){const t=new Date(this.calendar.selectedYear,this.calendar.selectedMonth-1,1);if(r=new Date(t.getFullYear(),t.getMonth()+1,0),this.isDateDisabled(r))return}else if(r=new Date(this.calendar.selectedYear,this.calendar.selectedMonth+1,1),this.isDateDisabled(r))return;if(i&&r){this.updateCalendarAndEmitEvents(r.getFullYear(),r.getMonth());const t=this.calendar.dates.findIndex((t=>t&&0===this.compareDate(t,r)));if(-1!==t)this.focusedDateIndex=t;else if("ArrowLeft"===s||"ArrowUp"===s){const t=this.calendar.dates.map(((t,e)=>t&&t.getMonth()===r.getMonth()?e:-1)).filter((t=>-1!==t)).pop();this.focusedDateIndex=void 0!==t?t:this.calendar.dates.length-1}else{const t=this.calendar.dates.findIndex((t=>t&&t.getMonth()===r.getMonth()));this.focusedDateIndex=-1!==t?t:0}}const n=null===(e=this.calendarRef)||void 0===e?void 0:e.querySelectorAll(".calendar-day");n&&n[this.focusedDateIndex]&&n[this.focusedDateIndex].focus()}renderCalendarHeader(){const t=this.calendar.selectedYear,e=this.calendar.selectedMonth,a=[];for(let e=t-100;e<=t+100;e++)a.push({value:e.toString(),label:e.toString()});const o=u.map(((t,e)=>({value:e.toString(),label:t})));return s("div",{class:"calendar-header"},s("modus-wc-button",{type:"button","aria-label":"Previous",variant:"borderless",shape:"circle",size:"xs",onButtonClick:()=>this.addMonthOffset(-1),class:"nav-btn"},s("modus-wc-icon",{name:"chevron_left",size:"sm"})),s("div",{class:"calendar-selects"},s("modus-wc-select",{key:`month-${t}-${e}`,class:"month-select",value:e.toString(),options:o,onInputChange:t=>this.handleMonthChange(t),onInputBlur:t=>t.stopPropagation(),bordered:!1,size:"sm"}),s("modus-wc-select",{key:`year-${t}`,class:"year-select",value:t.toString(),options:a,onInputChange:t=>this.handleYearChange(t),onInputBlur:t=>t.stopPropagation(),bordered:!1,size:"sm"})),s("modus-wc-button",{type:"button","aria-label":"Next",variant:"borderless",shape:"circle",size:"xs",onButtonClick:()=>this.addMonthOffset(1),class:"nav-btn"},s("modus-wc-icon",{name:"chevron_right",size:"sm"})))}renderCalendarBody(){const t=new Date,e=this.parseISODate(this.value),a=this.calendar.selectedMonth;return s("div",{class:"calendar-body"},s("div",{class:"calendar-days-week"+(this.showWeekNumbers?" has-week-numbers":"")},this.showWeekNumbers&&s("div",{class:"week-number-header"}),this.calendar.getDaysOfWeek("default",h[this.weekStartDay]).map((t=>s("div",{class:"day-header"},t)))),s("div",{class:"calendar-dates"+(this.showWeekNumbers?" has-week-numbers":"")},this.calendar.dates.map(((o,d)=>{const i=this.showWeekNumbers&&d%7==0?s("div",{class:"week-number","aria-label":`Week ${this.calendar.getWeekNumber(o,h[this.weekStartDay])}`},this.calendar.getWeekNumber(o,h[this.weekStartDay])):null;if(!o)return i;const r=0===this.compareDate(o,t),n=e&&0===this.compareDate(o,e)||!1,c=o.getMonth()===a,u=this.isDateDisabled(o),l=s("button",{type:"button",class:{"calendar-day":!0,"current-day":r,selected:n,"current-month":c,"other-month":!c,disabled:u},disabled:u,onClick:()=>this.handleDateSelect(o),onKeyDown:t=>this.handleDateKeyDown(t,o),tabIndex:u?-1:0},o.getDate());return i?[i,l]:l}))))}compareDate(t,e){if(!t&&!e)return 0;if(!t&&e)return-1;if(t&&!e)return 1;let s;return s=t.getFullYear()-e.getFullYear(),0!==s?s:(s=t.getMonth()-e.getMonth(),0!==s?s:t.getDate()-e.getDate())}get effectiveFormat(){return this.format||this.getLocaleFormatGuide()}getLocaleFormatGuide(){return new Intl.DateTimeFormat(this.locale,{year:"numeric",month:"2-digit",day:"2-digit"}).formatToParts(new Date(2026,11,31)).map((t=>{switch(t.type){case"day":return"dd";case"month":return"mm";case"year":return"yyyy";default:return t.value}})).join("")}parseISODate(t){if(!t)return;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(e){const t=new Date(Number(e[1]),Number(e[2])-1,Number(e[3]));return t.getFullYear()===Number(e[1])&&t.getMonth()===Number(e[2])-1&&t.getDate()===Number(e[3])?this.cloneDate(t):void 0}const s=this.effectiveFormat;if(s.includes("MMM")){const e=t.match(/^([A-Za-z]{3})\s+(\d{1,2}),?\s+(\d{4})$/);if(!e)return;const s=u.findIndex((t=>t.toLowerCase()===e[1].toLowerCase()));if(-1===s)return;const a=Number(e[2]),o=Number(e[3]),d=new Date(o,s,a);return d.getFullYear()===o&&d.getMonth()===s&&d.getDate()===a?this.cloneDate(d):void 0}const a=t.match(/^(\d+)[/\-.](\d+)[/\-.](\d+)$/);if(!a)return;const[o,d,i]=[Number(a[1]),Number(a[2]),Number(a[3])];let r,n,c;const h=s.toLowerCase();h.startsWith("m")?([n,r,c]=[o,d,i],n-=1):h.startsWith("y")?([c,n,r]=[o,d,i],n-=1):([r,n,c]=[o,d,i],n-=1);const l=new Date(c,n,r);return l.getFullYear()===c&&l.getMonth()===n&&l.getDate()===r?this.cloneDate(l):void 0}formatISODate(t){return`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`}get inputDisplayValue(){if(!this.value)return"";const t=this.parseISODate(this.value);return t?this.formatForDisplay(t):""}formatForDisplay(t){const e=this.effectiveFormat,s=String(t.getDate()).padStart(2,"0"),a=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getFullYear()),d={yyyy:o,YYYY:o,mm:a,dd:s,DD:s,MMM:u[t.getMonth()]};return e.replace(/yyyy|YYYY|mm|dd|DD|MMM/g,(t=>d[t]))}cloneDate(t){return new Date(t.getFullYear(),t.getMonth(),t.getDate())}clampDate(t){let e=this.cloneDate(t);return this.minDate&&e<this.minDate&&(e=this.cloneDate(this.minDate)),this.maxDate&&e>this.maxDate&&(e=this.cloneDate(this.maxDate)),e}isDateDisabled(t){return!!(this.minDate&&t<this.minDate)||!!(this.maxDate&&t>this.maxDate)}ensureValueWithinBounds(){if(!this.value)return;const t=this.parseISODate(this.value);if(!t)return void(this.value="");const e=this.clampDate(t),s=this.formatISODate(e);s!==this.value&&(this.value=s)}ensureCalendarWithinBounds(t){if(t){const e=new c(h[this.weekStartDay]);e.gotoDate(t.getFullYear(),t.getMonth()),this.calendar=e}}setCalendarMonth(t,e){const s=new c(h[this.weekStartDay]);s.gotoDate(t,e),this.calendar=s}updateCalendarAndEmitEvents(t,e){const s=this.calendar.selectedYear,a=this.calendar.selectedMonth;this.setCalendarMonth(t,e),e!==a&&this.calendarMonthChange.emit(e),t!==s&&this.calendarYearChange.emit(t)}syncValueFromInput(){if(!this.inputRef)return;const t=this.inputRef.value.trim();if(!t)return void(this.value&&(this.value=""));const e=this.parseISODate(t);if(!e)return void(this.inputRef.value=this.inputDisplayValue);const s=this.clampDate(e);this.value=this.formatISODate(s),this.inputRef.value=this.formatForDisplay(s)}render(){var t,e;const o=this.resolveEffectiveId(this.inputId);return s(a,{key:"dde765e4616cba13feb9dc5131eb6841a099fd36"},this.label&&s("modus-wc-input-label",{key:"3b6db072512680c9bb003c6846daff3eab0b0a02",forId:o,labelText:this.label,required:this.required,size:this.size}),s("div",{key:"ef2a431149fa97bc5961bbba951b0d9460ab5ad0",class:"date-input-container"},s("input",Object.assign({key:"ae619c7cf04f553ec5f294e3346b9dc60da08dcf",ref:t=>this.inputRef=t,"aria-disabled":this.disabled,class:this.getClasses(),disabled:this.disabled,id:o,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,onKeyDown:this.handleInputKeyDown,placeholder:this.effectiveFormat,readonly:this.readOnly,required:this.required,tabIndex:this.inputTabIndex,type:"text",value:this.hasFocus?null!==(e=null===(t=this.inputRef)||void 0===t?void 0:t.value)&&void 0!==e?e:"":this.inputDisplayValue},this.inheritedAttributes)),s("modus-wc-button",{key:"806ac5de956b7237c0c79b524bd284a074fc128b","aria-label":"Open calendar",disabled:this.disabled||this.readOnly,variant:"borderless",shape:"circle",size:"xs",color:"tertiary",class:"calendar-icon-button",onButtonClick:()=>this.toggleCalendar()},s("modus-wc-icon",{key:"ffda8fd5ccf35853f18059bf0e0aec5839d665b4",name:"calendar_blank",size:"sm"}))),this.showCalendar&&s("div",{key:"d5a1bc0fed90e9917ee2b26627ec652808962b84",ref:t=>this.calendarRef=t,class:"calendar-container"+(this.showWeekNumbers?" has-week-numbers":"")},this.renderCalendarHeader(),this.renderCalendarBody()),this.feedback&&s("modus-wc-input-feedback",{key:"5baca295d55ae30180deaaff56fc173873fa7ba4",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return o(this)}static get watchers(){return{format:["handleFormatChange"],min:["handleMinChange"],max:["handleMaxChange"],value:["handleValueChange"],weekStartDay:["handleWeekStartDayChange"]}}};l.style=".modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}.modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}.modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}.modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}.modus-wc-input-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}.modus-wc-input-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}.modus-wc-input-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}.modus-wc-input-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}.modus-wc-input-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-date .modus-wc-date-input{background-color:var(--modus-wc-color-base-page)}modus-wc-date .modus-wc-date-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-date .modus-wc-date-input--readonly{background-color:var(--modus-wc-color-base-200)}modus-wc-date{--calendar-grid-columns:repeat(7, 1fr);--calendar-grid-columns-with-week-numbers:auto repeat(7, 1fr);position:relative}modus-wc-date.modus-wc-date-input{background-color:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-input);color:var(--modus-wc-color-base-content)}modus-wc-date .date-input-container{align-items:center;display:inline-flex;position:relative;width:100%}modus-wc-date .date-input-container .calendar-icon-button{align-items:center;display:flex;justify-content:center;position:absolute;right:var(--modus-wc-spacing-md)}modus-wc-date .date-input-container .calendar-icon-button :hover{color:var(--modus-wc-color-primary)}modus-wc-date .date-input-container .calendar-icon-button :disabled{background-color:transparent;cursor:not-allowed}modus-wc-date .calendar-container{background:var(--modus-wc-color-base-page);border:1px solid var(--modus-wc-color-base-200);border-radius:var(--rounded-box);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);height:327px;overflow:hidden;position:fixed;width:272px;z-index:9999}modus-wc-date .calendar-container.has-week-numbers{width:320px}modus-wc-date .calendar-container .calendar-header{align-items:center;background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-base-page);display:flex;gap:var(--modus-wc-spacing-sm);justify-content:center;padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-xl)}modus-wc-date .calendar-container .calendar-header .nav-btn i{color:var(--modus-wc-color-primary-content)}modus-wc-date .calendar-container .calendar-header .nav-btn:hover i{color:var(--modus-wc-color-primary)}modus-wc-date .calendar-container .calendar-header .calendar-selects{align-items:center;display:flex;gap:var(--modus-wc-spacing-xs)}modus-wc-date .calendar-container .calendar-header .calendar-selects select{box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);color:var(--modus-wc-color-base-content)}modus-wc-date .calendar-container .calendar-header .calendar-selects .month-select{border-radius:var(--modus-wc-border-radius-input)}modus-wc-date .calendar-container .calendar-header .calendar-selects .year-select{border-radius:var(--modus-wc-border-radius-input)}modus-wc-date .calendar-container .calendar-header .calendar-selects select option{background-color:var(--modus-wc-color-base-page);color:var(--modus-wc-color-base-content)}modus-wc-date .calendar-container .calendar-body{background-color:var(--modus-wc-color-base-page);font-size:var(--modus-wc-font-size-md);height:272px;padding:var(--modus-wc-spacing-xl)}modus-wc-date .calendar-container .calendar-body .calendar-days-week{display:grid;gap:var(--modus-wc-spacing-xs);grid-template-columns:var(--calendar-grid-columns);margin-bottom:var(--modus-wc-spacing-sm)}modus-wc-date .calendar-container .calendar-body .calendar-days-week.has-week-numbers{grid-template-columns:var(--calendar-grid-columns-with-week-numbers)}modus-wc-date .calendar-container .calendar-body .calendar-days-week .week-number-header{margin-inline-end:var(--modus-wc-spacing-md);padding:var(--modus-wc-spacing-xs)}modus-wc-date .calendar-container .calendar-body .calendar-days-week .day-header{color:var(--modus-wc-color-base-content-high-contrast);font-weight:var(--modus-wc-font-weight-bold);padding:var(--modus-wc-spacing-xs);text-align:center}modus-wc-date .calendar-container .calendar-body .calendar-dates{display:grid;grid-template-columns:var(--calendar-grid-columns)}modus-wc-date .calendar-container .calendar-body .calendar-dates.has-week-numbers{grid-template-columns:var(--calendar-grid-columns-with-week-numbers)}modus-wc-date .calendar-container .calendar-body .calendar-dates .week-number{align-items:center;border-inline-end:1px solid color-mix(in sRGB, var(--modus-wc-color-base-inverted) 10%, transparent);display:flex;font-size:var(--modus-wc-font-size-sm);font-weight:var(--modus-wc-font-weight-bold);justify-content:center;padding-inline-end:var(--modus-wc-spacing-sm)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day{align-items:center;background:none;border:none;border-radius:50%;color:var(--modus-wc-color-base-content-high-contrast);cursor:pointer;display:flex;height:32px;justify-content:center;width:32px}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day:hover{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-white)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day:focus{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-white);outline:none}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.current-day{border:2px solid var(--modus-wc-color-primary);outline:none}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.selected{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content);font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.other-month{color:var(--modus-wc-color-base-content-high-contrast);opacity:0.5}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.other-month:hover{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.disabled{color:var(--modus-wc-color-gray-4)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.disabled:hover{background-color:transparent;color:var(--modus-wc-color-gray-4)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.disabled:focus{border:none}[data-theme=modus-modern-light] modus-wc-date .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-date .modus-wc-input-label,[data-theme=modus-classic-light] modus-wc-date .modus-wc-input-label,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md);color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input:focus,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input:focus{border-color:var(--modus-wc-color-blue-light);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-date-input--readonly,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-date-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input{color-scheme:dark}[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input:focus{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-date .modus-wc-date-input,[data-theme=connect-dark] modus-wc-date .modus-wc-date-input{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-date .modus-wc-date-input:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-date .modus-wc-date-input:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-date .modus-wc-date-input:hover,[data-theme=connect-dark] modus-wc-date .modus-wc-date-input:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-date .modus-wc-date-input:active,[data-theme=connect-dark] modus-wc-date .modus-wc-date-input:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-date .modus-wc-date-input:focus,[data-theme=connect-dark] modus-wc-date .modus-wc-date-input:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-date .modus-wc-date-input:focus-within,[data-theme=connect-dark] modus-wc-date .modus-wc-date-input:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=modus-modern-dark] modus-wc-date .calendar-container .calendar-header .nav-btn i,[data-theme=modus-classic-dark] modus-wc-date .calendar-container .calendar-header .nav-btn i{color:var(--modus-wc-color-primary-content)}[data-theme=modus-modern-dark] modus-wc-date .calendar-container .calendar-header .calendar-selects select,[data-theme=modus-classic-dark] modus-wc-date .calendar-container .calendar-header .calendar-selects select{background-color:unset;color:var(--modus-wc-color-base-content);font-weight:600}[data-theme=modus-modern-dark] modus-wc-date .calendar-container .calendar-header .calendar-selects select option,[data-theme=modus-classic-dark] modus-wc-date .calendar-container .calendar-header .calendar-selects select option{background-color:var(--modus-wc-color-black);color:var(--modus-wc-color-white)}";export{l as modus_wc_date}