@trimble-oss/moduswebcomponents/modus-wc/p-77a173b2.entry.js

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

import{r as t,c as e,h as s,H as a,g as d}from"./p-D_4hbGjA.js";import{i as o}from"./p-BLBSdonk.js";import{c as i}from"./p-BfP9ezJQ.js";class n{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"),d=[];for(let t=e;t<e+7;t++){const e=new Date(a);e.setDate(e.getDate()+t);const o=s.format(e);d.push(o.toUpperCase().startsWith("SA")?o:o.slice(0,2))}return d}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,d=new Date(t);d.setDate(t.getDate()-a);const o={};for(let t=0;t<7;t++){const e=new Date(d);e.setDate(d.getDate()+t);const a=s(e);o[a]=(o[a]||0)+1}let i=0,n=0;for(const[t,e]of Object.entries(o)){const s=Number(t);e>n&&(n=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 d=new Date(e,s,1-a);for(let e=0;e<42;e++){const s=new Date(d);s.setDate(d.getDate()+e),t.push(s)}this.currentMonthDates=t}}const c=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],r={sunday:0,monday:1,tuesday:2,wednesday:3,thursday:4,friday:5,saturday:6},u=class{constructor(s){t(this,s),this.inputBlur=e(this,"inputBlur"),this.inputChange=e(this,"inputChange"),this.inputFocus=e(this,"inputFocus"),this.calendarMonthChange=e(this,"calendarMonthChange"),this.calendarYearChange=e(this,"calendarYearChange"),this.inheritedAttributes={},this.popperInstance=null,this.showCalendar=!1,this.calendar=new n,this.focusedDateIndex=-1,this.hasFocus=!1,this.bordered=!0,this.customClass="",this.disabled=!1,this.readOnly=!1,this.required=!1,this.size="md",this.format="dd-mm-yyyy",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=>{this.inputChange.emit(t)},this.handleInputKeyDown=t=>{"Enter"===t.key&&(t.preventDefault(),this.syncValueFromInput())},this.setupPopper=()=>{this.popperInstance&&this.popperInstance.destroy(),this.popperInstance=i(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.value=this.formatISODate(t),t.getMonth()!==this.calendar.selectedMonth||t.getFullYear()!==this.calendar.selectedYear){const e=new n(r[this.weekStartDay||"sunday"]);e.gotoDate(t.getFullYear(),t.getMonth()),this.calendar=e}this.showCalendar=!1,this.hasFocus=!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),d=this.calendar.selectedYear;Number.isNaN(a)||this.updateCalendarAndEmitEvents(d,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),d=this.calendar.selectedMonth;Number.isNaN(a)||this.updateCalendarAndEmitEvents(a,d)},this.handleDateKeyDown=(t,e)=>{this.isDateDisabled(e)||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleDateSelect(e))}}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=""));const e=this.parseISODate(t);if(!e)return void(this.value&&(this.value=""));const s=this.clampDate(e),a=this.formatISODate(s);if(t===a){if(this.inputRef){this.inputRef.value=a;const t=new Event("input",{bubbles:!0});this.inputRef.dispatchEvent(t)}this.ensureCalendarWithinBounds(s)}else this.value=a}handleWeekStartDayChange(){this.calendar=new n(r[this.weekStartDay]);const t=this.parseISODate(this.value);t&&this.calendar.gotoDate(t.getFullYear(),t.getMonth())}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Date input"),this.inheritedAttributes=o(this.el),this.calendar=new n(r[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 d="";return t&&(d=`${d} modus-wc-input-bordered`),e&&(d=`${d} modus-wc-input--${e.level}`),s&&(d=`${d} modus-wc-date-input--readonly`),a&&(d=`${d} modus-wc-input-${a}`),d.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,d;const o=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+o;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 n=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=n[n.length-1])&&void 0!==a?a:this.calendar.dates.length-1:null!==(d=n[0])&&void 0!==d?d: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 d=this.focusedDateIndex;if(-1===d){if(this.value){const t=this.parseISODate(this.value);t&&(d=this.calendar.dates.findIndex((e=>0===this.compareDate(e,t))))}-1===d&&(d=0)}let o=d,i=!1,n=null;switch(s){case"ArrowLeft":o=d-1;break;case"ArrowRight":o=d+1;break;case"ArrowUp":o=d-7;break;case"ArrowDown":o=d+7}if(o>=0&&o<a){if(n=this.calendar.dates[o],n){let t=o;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;n=this.calendar.dates[t],o=t,n.getMonth()!==this.calendar.selectedMonth&&(i=!0),this.focusedDateIndex=o}}else if(i=!0,"ArrowUp"===s){const t=new Date(this.calendar.selectedYear,this.calendar.selectedMonth-1,1);this.isDateDisabled(t)||(this.navigateToAdjacentMonth(d,!0),i=!1)}else if("ArrowDown"===s){const t=new Date(this.calendar.selectedYear,this.calendar.selectedMonth+1,1);this.isDateDisabled(t)||(this.navigateToAdjacentMonth(d,!1),i=!1)}else if("ArrowLeft"===s){const t=new Date(this.calendar.selectedYear,this.calendar.selectedMonth-1,1);if(n=new Date(t.getFullYear(),t.getMonth()+1,0),this.isDateDisabled(n))return}else if(n=new Date(this.calendar.selectedYear,this.calendar.selectedMonth+1,1),this.isDateDisabled(n))return;if(i&&n){this.updateCalendarAndEmitEvents(n.getFullYear(),n.getMonth());const t=this.calendar.dates.findIndex((t=>t&&0===this.compareDate(t,n)));if(-1!==t)this.focusedDateIndex=t;else if("ArrowLeft"===s||"ArrowUp"===s){const t=this.calendar.dates.map(((t,e)=>t&&t.getMonth()===n.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()===n.getMonth()));this.focusedDateIndex=-1!==t?t:0}}const c=null===(e=this.calendarRef)||void 0===e?void 0:e.querySelectorAll(".calendar-day");c&&c[this.focusedDateIndex]&&c[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 d=c.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:d,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",r[this.weekStartDay]).map((t=>s("div",{class:"day-header"},t)))),s("div",{class:"calendar-dates"+(this.showWeekNumbers?" has-week-numbers":"")},this.calendar.dates.map(((d,o)=>{const i=this.showWeekNumbers&&o%7==0?s("div",{class:"week-number","aria-label":`Week ${this.calendar.getWeekNumber(d,r[this.weekStartDay])}`},this.calendar.getWeekNumber(d,r[this.weekStartDay])):null;if(!d)return i;const n=0===this.compareDate(d,t),c=e&&0===this.compareDate(d,e)||!1,u=d.getMonth()===a,h=this.isDateDisabled(d),l=s("button",{type:"button",class:{"calendar-day":!0,"current-day":n,selected:c,"current-month":u,"other-month":!u,disabled:h},disabled:h,onClick:()=>this.handleDateSelect(d),onKeyDown:t=>this.handleDateKeyDown(t,d),tabIndex:h?-1:0},d.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())}parseISODate(t){var e;if(!t)return;let s,a,d;if("MMM DD, YYYY"===this.format){const e=t.match(/^([A-Za-z]{3})\s+(\d{1,2}),\s+(\d{4})$/);if(!e)return;const[,o,i,n]=e;if(a=c.findIndex((t=>t.toLowerCase()===o.toLowerCase())),-1===a)return;d=i,s=n}else{const o=(null===(e=this.format)||void 0===e?void 0:e.includes("/"))?"/":"-",i=t.split(o);if(3!==i.length)return;"dd-mm-yyyy"===this.format||"dd/mm/yyyy"===this.format?[d,a,s]=i:[s,a,d]=i}if(null==s||null==a||null==d)return;const o=Number(s),i="number"==typeof a?a:Number(a)-1,n=Number(d);if(Number.isNaN(o)||Number.isNaN(i)||Number.isNaN(n))return;const r=new Date(o,i,n);return r.getFullYear()===o&&r.getMonth()===i&&r.getDate()===n?this.cloneDate(r):void 0}formatISODate(t){const e=t.getFullYear(),s=(t.getMonth()+1).toString().padStart(2,"0"),a=t.getDate().toString().padStart(2,"0");switch(this.format){case"dd-mm-yyyy":return`${a}-${s}-${e}`;case"dd/mm/yyyy":return`${a}/${s}/${e}`;case"yyyy/mm/dd":return`${e}/${s}/${a}`;case"MMM DD, YYYY":return`${c[t.getMonth()]} ${a}, ${e}`;default:return`${e}-${s}-${a}`}}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 n(r[this.weekStartDay]);e.gotoDate(t.getFullYear(),t.getMonth()),this.calendar=e}}setCalendarMonth(t,e){const s=new n(r[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.value||"");const s=this.clampDate(e),a=this.formatISODate(s);this.value=a,this.inputRef.value=a}render(){return s(a,{key:"6f000e9dc71d97f911585d99bff1a5a3055761e3"},this.label&&s("modus-wc-input-label",{key:"f687de871654f64a79ae022de727432ff2704f19",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),s("div",{key:"367647149b48874be5a78bd9f73bf36a1a89acf4",class:"date-input-container"},s("input",Object.assign({key:"fa3bf4d35eb4c1c53117af2e12a3269c390b40d4",ref:t=>this.inputRef=t,"aria-disabled":this.disabled,class:this.getClasses(),disabled:this.disabled,id:this.inputId,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,onKeyDown:this.handleInputKeyDown,placeholder:this.format,readonly:this.readOnly,required:this.required,tabIndex:this.inputTabIndex,type:"text",value:this.value},this.inheritedAttributes)),s("modus-wc-button",{key:"dbf3ae7cb1b6b1178f664b973e518be8d948d52d","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:"ebac173bb763508b40fd1c84be9878d9299713e2",name:"calendar_blank",size:"sm"}))),this.showCalendar&&s("div",{key:"31cfd0de7895cba19d32e3babe2a39031a9373ed",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:"c5dcb5f36dd5aa35ed7f93b528287b3fe8421a10",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return d(this)}static get watchers(){return{min:["handleMinChange"],max:["handleMaxChange"],value:["handleValueChange"],weekStartDay:["handleWeekStartDayChange"]}}};u.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:inherit}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 .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-xs)}modus-wc-date .date-input-container .calendar-icon-button :hover{color:var(--modus-wc-color-blue-light)}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-white);border:1px solid var(--modus-wc-color-gray-4);border-radius:var(--modus-wc-border-radius-md);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-white);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-white)}modus-wc-date .calendar-container .calendar-header .nav-btn:hover i{color:var(--modus-wc-color-blue-dark)}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)}modus-wc-date .calendar-container .calendar-header .calendar-selects select option{background-color:var(--modus-wc-color-white);color:var(--modus-wc-color-gray-9)}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-hight-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-hight-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-blue-light);color:var(--modus-wc-color-white)}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day:focus{background-color:var(--modus-wc-color-blue-light);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-blue-light);outline:none}modus-wc-date .calendar-container .calendar-body .calendar-dates .calendar-day.selected{background-color:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-white);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-gray-2);color:var(--modus-wc-color-gray-6)}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-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)}[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=connect-dark] modus-wc-date .calendar-container .calendar-header .nav-btn i,[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-black)}[data-theme=connect-dark] modus-wc-date .calendar-container .calendar-header .calendar-selects select,[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-black);font-weight:600}[data-theme=connect-dark] modus-wc-date .calendar-container .calendar-header .calendar-selects select option,[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{u as modus_wc_date}