@bizhermit/react-sdk/elements/inputs/date-picker.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,c){void 0===c&&(c=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,c,a)}:function(e,t,n,c){void 0===c&&(c=n),e[c]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useDatePicker=void 0;const datetime_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/datetime-utils")),react_1=__importStar(require("react")),value_1=__importDefault(require("../../hooks/value")),core_style_1=require("../../styles/core-style"),css_var_1=__importStar(require("../../styles/css-var")),input_style_1=__importStar(require("../../styles/input-style")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),input_1=require("../../utils/input"),icon_1=__importDefault(require("../icon")),cn="bh-dtp",monthTextsNum=["1","2","3","4","5","6","7","8","9","10","11","12"],monthTextsJa=["１月","２月","３月","４月","５月","６月","７月","８月","９月","１０月","１１月","１２月"],monthTextsEn=["January","Feburary","March","April","May","Jun","July","August","September","October","November","December"],monthTextsEnS=["Jan.","Feb.","Mar.","Apr.","May","Jun","Jul.","Aug.","Sep.","Oct.","Nov.","Dec."],weekTextsJa=["日","月","火","水","木","金","土"],weekTextsEn=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],DatePicker=react_1.default.forwardRef(((e,t)=>{const n=(0,react_1.useRef)(),c=(0,react_1.useRef)(),a=(0,react_1.useRef)(),r=(0,react_1.useRef)(),[l,s]=(0,react_1.useState)(0),[u,d]=(0,react_1.useState)(0),i=(0,react_1.useRef)(new Date),o=e.$mode??"ymd",$=e.$disabled||e.$readOnly,_=(0,react_1.useRef)(e.$rangeFrom?datetime_utils_1.default.convert(e.$rangeFrom).getTime():new Date(1900,0,1).getTime()),m=(0,react_1.useRef)(e.$rangeTo?datetime_utils_1.default.convert(e.$rangeTo).getTime():new Date(2100,11,31).getTime()),[f,g]=(0,react_1.useState)((()=>"y"===o||"ym"===o?"list":e.$uiType??"calendar")),{val:y,set:b,buf:p}=(0,value_1.default)(e,{effect:e=>{const t=datetime_utils_1.default.removeTime(datetime_utils_1.default.convert(e),!0)??datetime_utils_1.default.getDate();v.current=datetime_utils_1.default.copy(t),P(),N(!0),"list"===f&&s((e=>e+1))}}),h=(0,react_1.useRef)((()=>{const e=datetime_utils_1.default.convert(y),t=datetime_utils_1.default.removeTime(e??new Date);return"ymd"!==o&&t.setDate(1),"y"===o&&t.setMonth(0),t})()),v=(0,react_1.useRef)(datetime_utils_1.default.copy(h.current)),[w,k]=(0,react_1.useState)(v.current.getFullYear()),[T,D]=(0,react_1.useState)(v.current.getMonth()),[x,C]=(0,react_1.useState)(v.current.getDate()),E=(0,react_1.useMemo)((()=>null==e.$monthTexts||"num"===e.$monthTexts?monthTextsNum:"en"===e.$monthTexts?monthTextsEn:"en-s"===e.$monthTexts?monthTextsEnS:"ja"===e.$monthTexts?monthTextsJa:12!==e.$monthTexts.length?monthTextsNum:e.$monthTexts),[e.$monthTexts]),M=(0,react_1.useMemo)((()=>null==e.$weekTexts||"ja"===e.$weekTexts?weekTextsJa:"en"===e.$weekTexts?weekTextsEn:7!==e.$weekTexts.length?weekTextsJa:e.$weekTexts),[e.$weekTexts]),F=()=>{let t;if(!(h.current.getTime()<_.current||h.current.getTime()>m.current)){switch(e.$dataType){case"date":b.current(t=new Date(h.current));break;case"number":b.current(t=h.current?.getMilliseconds());break;default:b.current(t=datetime_utils_1.default.format(h.current,"yyyy-MM-dd"))}e.$clickPositive&&setTimeout((()=>{e.$clickPositive(t)}),0),s((e=>e+1))}},P=(0,react_1.useCallback)((()=>{h.current=datetime_utils_1.default.copy(v.current)}),[]),N=(0,react_1.useCallback)((t=>{k(v.current.getFullYear()),D(v.current.getMonth()),C(v.current.getDate()),t||e.$changing?.(v.current)}),[]),S=(0,react_1.useCallback)(((e,t,n)=>{if($)return;let c=e.m??v.current.getMonth();c<0?c=(12+c)%12:c>11&&(c%=12),v.current.setFullYear(e.y),v.current.getMonth()!==c&&v.current.setDate(0),(!0!==n||t)&&P(),N(),t&&F()}),[$]),j=(0,react_1.useMemo)((()=>{if("calendar"===f)return[react_1.default.createElement(DatePickerCell,{key:w,click:S,data:{y:w},selected:!0},w)];const e=[];for(let t=new Date(_.current).getFullYear(),n=new Date(m.current).getFullYear()+1;t<n;t++)e.push(react_1.default.createElement(DatePickerCell,{key:t,click:S,data:{y:t},selected:t===w,today:t===i.current.getFullYear()},t));return e}),[w,S,f,u]),V=(0,react_1.useCallback)(((e,t,n)=>{if($)return;v.current.setFullYear(e.y),v.current.setMonth(e.m);let c=e.m;c<0?c=(12+c)%12:c>11&&(c%=12),v.current.getMonth()!==c&&v.current.setDate(0),(!0!==n||t)&&P(),N(),t&&F()}),[$]),O=(0,react_1.useMemo)((()=>{if("calendar"===f)return[react_1.default.createElement(DatePickerCell,{key:T,click:V,data:{y:w,m:T},selected:!0},E[T])];const e=[];for(let t=0,n=12;t<n;t++){const n=new Date(w,t,1).getTime(),c=new Date(w,t+1,0).getTime();n<_.current||m.current,e.push(react_1.default.createElement(DatePickerCell,{key:t,click:V,data:{y:w,m:t},selected:t===T,today:t===i.current.getMonth(),disabled:n>m.current||c<_.current},E[t]))}return e}),[w,T,V,f,u]),Y=(0,react_1.useCallback)(((e,t)=>{$||(v.current=new Date(e.y,e.m,e.d),P(),N(),t&&F())}),[$]),z=(0,react_1.useMemo)((()=>{const t=[];let n=new Date(w,T+1,0);const c=n.getDate();n.setDate(1),n.setMonth(T),n.setFullYear(w);const a=n.getDay();if("calendar"===f){const c=e.$startWeek??0;n.setDate(0);const r=n.getDate(),l=n.getFullYear(),s=n.getMonth();let u=(a-c+7)%7||7;u<2&&(u+=7);for(let e=0,a=u;e<a;e++)n.setDate(r-u+e+1),t.push(react_1.default.createElement(DatePickerCell,{key:`-${e}`,click:Y,data:{y:l,m:s,d:n.getDate()},selected:!1,weekNum:(c+e)%7,ym:"before",disabled:n.getTime()<_.current||n.getTime()>m.current},n.getDate()))}const r=w===h.current.getFullYear()&&T===h.current.getMonth(),l=h.current.getDate(),s=T===i.current.getMonth()&&w===i.current.getFullYear(),u=e=>"list"===f?e===i.current.getDate():e===i.current.getDate()&&s;n.setDate(1),n.setFullYear(w),n.setMonth(T);for(let e=0,s=c;e<s;e++){const c=l===e+1&&r;n.setDate(e+1),t.push(react_1.default.createElement(DatePickerCell,{key:e,click:Y,data:{y:w,m:T,d:e+1},selected:c,weekNum:(a+e)%7,today:u(e+1),disabled:n.getTime()<_.current||n.getTime()>m.current},e+1))}if("calendar"===f){n=new Date(w,T+1,1);const e=n.getDay(),c=n.getFullYear(),a=n.getMonth();let r=7-t.length%7;r<5&&(r+=7);for(let l=0,s=r;l<s&&!(t.length>=42);l++)n.setDate(l+1),t.push(react_1.default.createElement(DatePickerCell,{key:`+${l}`,click:Y,data:{y:c,m:a,d:l+1},selected:!1,weekNum:(e+l)%7,ym:"after",disabled:n.getTime()<_.current||n.getTime()>m.current},l+1))}return t}),[w,T,x,f,e.$startWeek,Y,u]),q=(0,react_1.useMemo)((()=>{const t=[];for(let n=0;n<7;n++){const c=(n+(e.$startWeek??0))%7;t.push(react_1.default.createElement(DatePickerCell,{key:c,click:()=>{},data:{},selected:!1,weekNum:c},M[c]))}return t}),[M,e.$startWeek]);return(0,react_1.useEffect)((()=>{"ymd"!==o&&"calendar"===f&&g("list")}),[o]),(0,react_1.useEffect)((()=>{e.$rangeFrom?_.current=datetime_utils_1.default.convert(e.$rangeFrom).getTime():_.current=new Date(1900,0,1).getTime(),e.$rangeTo?m.current=datetime_utils_1.default.convert(e.$rangeTo).getTime():m.current=new Date(2100,11,31).getTime(),v.current.getTime()<_.current&&(v.current=datetime_utils_1.default.removeTime(new Date(_.current)),P()),v.current.getTime()>m.current&&(v.current=datetime_utils_1.default.removeTime(new Date(m.current)),P()),N(),d((e=>e+1))}),[e.$rangeFrom,e.$rangeTo]),(0,react_1.useEffect)((()=>{"list"===f&&setTimeout((()=>{const e=`.${cn}-cell[data-selected="true"]`;let t=c.current?.querySelector(e);t&&(c.current.scrollTop=t.offsetTop-(c.current.clientHeight-t.offsetHeight)/2),"y"!==o&&(t=a.current?.querySelector(e),t&&(a.current.scrollTop=t.offsetTop-(a.current.clientHeight-t.offsetHeight)/2)),"ymd"===o&&(t=r.current?.querySelector(e),t&&(r.current.scrollTop=t.offsetTop-(r.current.clientHeight-t.offsetHeight)/2))}),0)}),[l,o,f,$]),(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>n.current?.focus(),getValue:()=>p.current,setValue:e=>b.current?.(e),scrollToCurrent:()=>d((e=>e+1))})}),[e.$hook?._set]),react_1.default.createElement("div",{...(0,input_1.inputAttributes)(e,cn),ref:t,"data-mode":o},react_1.default.createElement("div",{className:`${cn}-body`,ref:n,"data-ui":f,"data-lang":e.$monthTexts,tabIndex:e.tabIndex??0},react_1.default.createElement("div",{ref:c,className:`${core_style_1.sbCn} ${cn}-y`},"list"===f||$?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,onClick:()=>{new Date(w-1,11,31).getTime()<_.current||S({y:w-1,m:T},!1,!0)},"data-disabled":new Date(w-1,11,31).getTime()<_.current},react_1.default.createElement(icon_1.default,{$image:"pull-left"})),j,"list"===f||$?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,onClick:()=>{new Date(w+1,0,1).getTime()>m.current||S({y:w+1,m:T},!1,!0)},"data-disabled":new Date(w+1,0,1).getTime()>m.current},react_1.default.createElement(icon_1.default,{$image:"pull-right"}))),"y"===o?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement(react_1.default.Fragment,null,"list"===f?react_1.default.createElement("div",{className:`${cn}-sep`},"/"):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("div",{ref:a,className:`${core_style_1.sbCn} ${cn}-m`},"list"===f||$?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,onClick:()=>{new Date(w,T,0).getTime()<_.current||V({y:w,m:T-1},!1,!0)},"data-disabled":new Date(w,T,0).getTime()<_.current},react_1.default.createElement(icon_1.default,{$image:"pull-left"})),O,"list"===f||$?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,onClick:()=>{new Date(w,T+1,1).getTime()>m.current||V({y:w,m:T+1},!1,!0)},"data-disabled":new Date(w,T+1,1).getTime()>m.current},react_1.default.createElement(icon_1.default,{$image:"pull-right"})))),"ymd"===o?react_1.default.createElement(react_1.default.Fragment,null,"list"===f?react_1.default.createElement("div",{className:`${cn}-sep`},"/"):react_1.default.createElement("div",{className:`${cn}-w`},q),react_1.default.createElement("div",{ref:r,className:`${core_style_1.sbCn} ${cn}-d`},z)):react_1.default.createElement(react_1.default.Fragment,null)),$?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${cn}-btns`},react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn ${cn}-btn_lbl`,onClick:()=>{const t=datetime_utils_1.default.convert(y)??datetime_utils_1.default.getDate();v.current=datetime_utils_1.default.copy(t),P(),k(v.current.getFullYear()),D(v.current.getMonth()),C(v.current.getDate()),e.$clickNegative?.(),s((e=>e+1))},tabIndex:0,"data-border":!0},e.$negativeButtonLabel??"キャンセル"),react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn ${cn}-btn_lbl`,onClick:F,tabIndex:0,"data-border":!0,"data-disabled":h.current.getTime()<_.current||h.current.getTime()>m.current},e.$positiveButtonLabel??"OK"),"ymd"===o?react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,onClick:()=>g((e=>"list"===e?"calendar":"list")),tabIndex:0,"data-border":!0},react_1.default.createElement(icon_1.default,{$image:"list"===f?"calendar":"list"})):react_1.default.createElement(react_1.default.Fragment,null)),input_style_1.default,Style)})),DatePickerCell=e=>react_1.default.createElement("div",{className:`${cn}-cell`,onClick:()=>{e.disabled||e.click(e.data)},onDoubleClick:()=>{e.disabled||e.click(e.data,!0)},"data-selected":e.selected,"data-disabled":e.disabled,"data-week":e.weekNum??"","data-ym":e.ym??"current","data-today":!0===e.today},e.children),useDatePicker=()=>{const e=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{e.current.focus?.()}),[]),getValue:(0,react_1.useCallback)((()=>e.current.getValue?.()),[]),setValue:(0,react_1.useCallback)((t=>{e.current.setValue?.(t)}),[]),scrollToCurrent:(0,react_1.useCallback)((()=>{e.current.scrollToCurrent?.()}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useDatePicker=useDatePicker;const lcn=`.${cn}-body[data-ui="list"]`,ccn=`.${cn}-body[data-ui="calendar"]`,Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${input_style_1.inputCn}.${cn} {\n  flex-direction: column;\n  height: calc(${css_var_1.default.size} * 9);\n  user-select: none;\n}\n.${cn}[data-mode="ymd"] {\n  width: calc(${css_var_1.default.size} * 9);\n}\n.${cn}[data-mode="ym"] {\n  width: calc(${css_var_1.default.size} * 7);\n}\n.${cn}[data-mode="y"] {\n  width: calc(${css_var_1.default.size} * 6);\n}\n.${cn}-body {\n  ${css_var_1.CssPV.flex}\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n  min-height: 0px;\n  width: 100%;\n  overflow: visible;\n  outline: none;\n}\n.${cn}[data-m="e"] > .${cn}-body {\n  border-radius: ${css_var_1.default.bdr} ${css_var_1.default.bdr} 0 0;\n}\n.${cn}[data-m="r"] > .${cn}-body,\n.${cn}[data-m="d"] > .${cn}-body {\n  border-radius: ${css_var_1.default.bdr};\n}\n.${cn}-btns {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  width: 100%;\n}\n.${cn}-btn_lbl {\n  flex: 1;\n}\n.${cn}-btn_lbl:first-child {\n  border-radius: ${css_var_1.default.bdr} 0 0 ${css_var_1.default.bdr};\n}\n.${cn}-sep {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  flex: none;\n  height: ${css_var_1.default.size};\n  padding-bottom: 4px;\n}\n.${cn}-y > .${input_style_1.inputCn}_btn,\n.${cn}-m > .${input_style_1.inputCn}_btn {\n  z-index: 10;\n}\n.${cn}-y > .${input_style_1.inputCn}_btn,\n.${cn}-m > .${input_style_1.inputCn}_btn {\n  border-radius: ${css_var_1.default.bdr};\n}\n.${cn}-cell {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  padding-top: 2px;\n  white-space: nowrap;\n  border-radius: ${css_var_1.default.bdr};\n${(0,css_var_1.switchDesign)(e,{fm:"transition: background 0.1s, color 0.1s;",neumorphism:"transition: background 0.1s, color 0.1s, box-shadow 0.1s;"})}\n}\n.${cn}-cell[data-disabled="true"] {\n  cursor: not-allowed !important;\n  opacity: 0.1 !important;\n}\n${ccn} {\n  flex-direction: column;\n}\n${ccn} > .${cn}-y,\n${ccn} > .${cn}-m,\n${ccn} > .${cn}-w {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  height: ${css_var_1.default.size};\n  width: 100%;\n  overflow: visible;\n}\n${ccn} > .${cn}-w {\n  height: calc(${css_var_1.default.size} * 0.6);\n  margin-top: ${css_var_1.default.pdy};\n}\n${ccn} > .${cn}-d {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row wrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: 1;\n  min-height: 0px;\n  width: 100%;\n  overflow: hidden;\n}\n${ccn} > .${cn}-y > .${cn}-cell,\n${ccn} > .${cn}-m > .${cn}-cell {\n  flex: 1;\n}\n.${cn}-w > .${cn}-cell {\n  flex: 1;\n  font-size: 70%;\n  width: 14.285%;\n  height: 100%;\n}\n.${cn}-w > .${cn}-cell[data-week="0"] {\n  background: ${css_var_1.default.week.sun.bgc};\n  color: ${css_var_1.default.week.sun.fc};\n}\n.${cn}-w > .${cn}-cell[data-week="6"] {\n  background: ${css_var_1.default.week.sat.bgc};\n  color: ${css_var_1.default.week.sat.fc};\n}\n${ccn} > .${cn}-y > .${cn}-cell[data-selected="false"],\n${ccn} > .${cn}-m > .${cn}-cell[data-selected="false"] {\n  display: none;\n}\n${ccn} > .${cn}-d > .${cn}-cell {\n  height: 16.666%;\n  width: 14.285%;\n}\n${ccn} > .${cn}-d > .${cn}-cell[data-ym="before"],\n${ccn} > .${cn}-d > .${cn}-cell[data-ym="after"] {\n  ${css_var_1.CssPV.inactOpacity}\n}\n.${cn}[data-m="e"] > ${ccn} > .${cn}-d > .${cn}-cell,\n.${cn}[data-m="e"] > ${lcn} > .${cn}-y > .${cn}-cell,\n.${cn}[data-m="e"] > ${lcn} > .${cn}-m > .${cn}-cell,\n.${cn}[data-m="e"] > ${lcn} > .${cn}-d > .${cn}-cell {\n  cursor: pointer;\n}\n.${cn}[data-m="e"] > ${ccn} > .${cn}-d > .${cn}-cell:hover:not([data-selected="true"]),\n.${cn}[data-m="e"] > ${lcn} > .${cn}-y >.${cn}-cell:hover:not([data-selected="true"]),\n.${cn}[data-m="e"] > ${lcn} > .${cn}-m >.${cn}-cell:hover:not([data-selected="true"]),\n.${cn}[data-m="e"] > ${lcn} > .${cn}-d >.${cn}-cell:hover:not([data-selected="true"]) {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}[data-m="e"] > ${ccn} > .${cn}-d > .${cn}-cell:hover:active:not([data-selected="true"]),\n.${cn}[data-m="e"] > ${lcn} > .${cn}-y > .${cn}-cell:hover:active:not([data-selected="true"]),\n.${cn}[data-m="e"] > ${lcn} > .${cn}-m > .${cn}-cell:hover:active:not([data-selected="true"]),\n.${cn}[data-m="e"] > ${lcn} > .${cn}-d > .${cn}-cell:hover:active:not([data-selected="true"]) {\n  background: ${css_var_1.default.actBgc};\n}\n${lcn} {\n  padding-top: ${css_var_1.default.pdy};\n  padding-bottom: ${css_var_1.default.pdy};\n}\n${lcn} > .${cn}-y,\n${lcn} > .${cn}-m,\n${lcn} > .${cn}-d {\n  flex: 1;\n  min-width: 0px;\n  height: 100%;\n${(0,css_var_1.switchDesign)(e,{neumorphism:`padding: 0 ${css_var_1.default.pdx};`})}\n}\n${lcn} > .${cn}-y > .${cn}-cell,\n${lcn} > .${cn}-m > .${cn}-cell,\n${lcn} > .${cn}-d > .${cn}-cell {\n  height: ${css_var_1.default.size};\n  width: 100%;\n}\n${lcn} > .${cn}-y > .${cn}-cell:first-child,\n${lcn} > .${cn}-m > .${cn}-cell:first-child,\n${lcn} > .${cn}-d > .${cn}-cell:first-child {\n  margin-top: calc(${css_var_1.default.size} * 3.5);\n}\n${lcn} > .${cn}-y > .${cn}-cell:last-child,\n${lcn} > .${cn}-m > .${cn}-cell:last-child,\n${lcn} > .${cn}-d > .${cn}-cell:last-child {\n  margin-bottom: calc(${css_var_1.default.size} * 3.5);\n}\n.${cn}-cell[data-today="true"] {\n  text-decoration: underline;\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}${n} > .${cn}-body {\n  color: ${t.ipt.fc};\n}\n.${cn}${n}[data-m="e"] > .${cn}-body {\n  background: ${t.ipt.bgc};\n}\n.${cn}${n} > ${ccn} > .${cn}-d > .${cn}-cell[data-selected="true"],\n.${cn}${n} > ${lcn} > .${cn}-y > .${cn}-cell[data-selected="true"],\n.${cn}${n} > ${lcn} > .${cn}-m > .${cn}-cell[data-selected="true"],\n.${cn}${n} > ${lcn} > .${cn}-d > .${cn}-cell[data-selected="true"] {\n  background: ${t.ipt.on};\n  color: ${t.ipt.fc};\n}\n`)).join("")}`,neumorphism:`\n${ccn} > .${cn}-d > .${cn}-cell[data-selected="true"],\n${lcn} > .${cn}-y > .${cn}-cell[data-selected="true"],\n${lcn} > .${cn}-m > .${cn}-cell[data-selected="true"],\n${lcn} > .${cn}-d > .${cn}-cell[data-selected="true"] {\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n}\n.${cn}[data-m="r"] > ${ccn} > .${cn}-d > .${cn}-cell[data-selected="true"],\n.${cn}[data-m="d"] > ${ccn} > .${cn}-d > .${cn}-cell[data-selected="true"],\n.${cn}[data-m="r"] > ${lcn} > * > .${cn}-cell[data-selected="true"],\n.${cn}[data-m="d"] > ${lcn} > * > .${cn}-cell[data-selected="true"] {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}${n} > .${cn}-body {\n  color: ${t.ipt.fc};\n}\n.${cn}${n}[data-m="e"] > .${cn}-body {\n  background: ${t.ipt.bgc};\n}\n.${cn}${n} > ${ccn} > .${cn}-d > .${cn}-cell[data-selected="true"],\n.${cn}${n} > ${lcn} > .${cn}-y > .${cn}-cell[data-selected="true"],\n.${cn}${n} > ${lcn} > .${cn}-m > .${cn}-cell[data-selected="true"],\n.${cn}${n} > ${lcn} > .${cn}-d > .${cn}-cell[data-selected="true"] {\n  background: ${t.ipt.on};\n  color: ${t.ipt.fc};\n}\n`)).join("")}`})}\n`));exports.default=DatePicker;