npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.10 - Mend

@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4015) hide show

package/cjs/shared/standalone-date-input/standalone-date-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var a=require("../../util/date-input-helper.js"),u=require("../../util/string-helper.js"),l=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.style.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(r);t.default.extend(n.default);const c=({disabled:n,readOnly:i,names:s,value:c,focused:d,hoverValue:f,placeholder:p,label:v,onChange:h,onFocus:m,onBlur:g,hideInputKeyboard:y,inputLabels:x=["Date","Month","Year"]},j)=>{const b=y?"none":"numeric",[Y,D,I]=l.useStateRef(""),[M,$,S]=l.useStateRef(""),[C,q,R]=l.useStateRef(""),[k,w]=r.useState("none"),[B,F]=r.useState(!1),V=r.useRef(null),E=r.useRef(null),H=r.useRef(null),L=r.useRef(null),[O,K,P]=N(f);r.useEffect((()=>{var e;const[t="",n="",r=""]=N(c);D(t),$(n),q(r),t||n||r||!V.current||!V.current.contains(document.activeElement)||null===(e=E.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;d||w("none"),d&&(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))}),[d]),r.useImperativeHandle(j,(()=>({ref:V,resetPlaceholder(){F(!1)},resetInput(){const[e="",t="",n=""]=N(c);D(e),$(t),q(n)},focusYearRef(){var e;null===(e=L.current)||void 0===e||e.focus()}})),[D,$,q,c]);const z=e=>{var t;e.preventDefault(),null===(t=E.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;w(t)},A=e=>{const[n,r,a]=s,l={[n]:I.current,[r]:S.current,[a]:R.current},o=e.target.name,i=l[o],c=o!==a?u.StringHelper.padValue(i,!0):i;switch(o){case n:l[n]=c,D(c);break;case r:l[r]=c,$(c)}const d=`${l[a]}-${l[r]}-${l[n]}`,f=t.default(d,"YYYY-MM-DD",!0).isValid(),p=!l[n]&&!l[r]&&!l[a];f&&i!==c&&h(d),V.current&&!V.current.contains(e.relatedTarget)&&(w("none"),null==g||g(p||f))},G=e=>{var n,r;if(f)return;const a=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:Y,month:M,year:C};switch(a){case s[0]:l.day=u,D(u),2===u.length&&(null===(n=H.current)||void 0===n||n.focus());break;case s[1]:l.month=u,$(u),2===u.length&&(null===(r=L.current)||void 0===r||r.focus());break;case s[2]:l.year=u,q(u)}if(!l.day&&!l.month&&!l.year)return void h("");const o=`${l.year}-${l.month}-${l.day}`;t.default(o,"YYYY-MM-DD",!0).isValid()&&h(o)},J=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(k===s[1]&&0===M.length&&(null===(t=E.current)||void 0===t||t.focus()),k===s[2]&&0===C.length&&(null===(n=H.current)||void 0===n||n.focus()))};function N(e){if(e){const n=a.DateInputHelper.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const r=t.default(n,"YYYY-MM-DD",!0);return[u.StringHelper.padValue(r.date().toString()),u.StringHelper.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs(o.InputSection,{role:"group","aria-label":v,onClick:()=>{var e;n||i||(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))},onFocus:e=>{n||(F(!0),d||null==m||m(e))},children:[e.jsxs(o.InputContainer,{ref:V,$hover:!!f,children:[e.jsx(o.DayInput,{ref:E,name:s[0],maxLength:2,value:null!=O?O:Y,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[0]}-input`,"aria-label":x[0],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[0]||i?"DD":""}),e.jsx(o.Divider,{$inactive:0===Y.length,children:"/"}),e.jsx(o.MonthInput,{ref:H,name:s[1],maxLength:2,value:null!=K?K:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[1]}-input`,"aria-label":x[1],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[1]||i?"MM":""}),e.jsx(o.Divider,{$inactive:0===M.length,children:"/"}),e.jsx(o.YearInput,{ref:L,name:s[2],maxLength:4,value:null!=P?P:C,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{4}","data-testid":`${s[2]}-input`,"aria-label":x[2],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[2]||i?"YYYY":""})]}),(()=>{if(!c&&!i&&p)return e.jsx(o.Placeholder,{$hide:B,$disabled:n,onMouseDown:z,children:p})})()]})},d=s.default.forwardRef(c);exports.Component=c,exports.StandaloneDateInput=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var u=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var l=require("../../util/string-helper.js");require("@react-aria/live-announcer");var s=require("../../util/use-state-ref.js"),i=require("./standalone-date-input.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t),c=o(r);a.default.extend(n.default);const p=({disabled:t,readOnly:n,names:o,value:c,focused:p,hoverValue:f,placeholder:v,label:m,onChange:h,onFocus:g,onBlur:b,hideInputKeyboard:x,inputLabels:y=["Date","Month","Year"]},j)=>{const I=x?"none":"numeric",[S,D,Y]=s.useStateRef(""),[M,q,H]=s.useStateRef(""),[N,C,B]=s.useStateRef(""),[R,$]=r.useState("none"),[k,z]=r.useState(!1),w=r.useRef(null),F=r.useRef(null),V=r.useRef(null),E=r.useRef(null),[L,O,K]=Q(f);r.useEffect((()=>{var e;const[t="",a="",n=""]=Q(c);D(t),q(a),C(n),t||a||n||!w.current||!w.current.contains(document.activeElement)||null===(e=F.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;p||$("none"),p&&(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))}),[p]),r.useImperativeHandle(j,(()=>({ref:w,resetPlaceholder(){z(!1)},resetInput(){const[e="",t="",a=""]=Q(c);D(e),q(t),C(a)},focusYearRef(){var e;null===(e=E.current)||void 0===e||e.focus()}})),[D,q,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=F.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;$(t)},A=e=>{const[t,n,r]=o,u={[t]:Y.current,[n]:H.current,[r]:B.current},s=e.target.name,i=u[s],d=s!==r?l.StringHelper.padValue(i,!0):i;switch(s){case t:u[t]=d,D(d);break;case n:u[n]=d,q(d)}const c=`${u[r]}-${u[n]}-${u[t]}`,p=a.default(c,"YYYY-MM-DD",!0).isValid(),f=!u[t]&&!u[n]&&!u[r];p&&i!==d&&h(c),w.current&&!w.current.contains(e.relatedTarget)&&($("none"),null==b||b(f||p))},G=e=>{var t,n;if(f)return;const r=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:S,month:M,year:N};switch(r){case o[0]:l.day=u,D(u),2===u.length&&(null===(t=V.current)||void 0===t||t.focus());break;case o[1]:l.month=u,q(u),2===u.length&&(null===(n=E.current)||void 0===n||n.focus());break;case o[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void h("");const s=`${l.year}-${l.month}-${l.day}`;a.default(s,"YYYY-MM-DD",!0).isValid()&&h(s)},J=e=>{var t,a;"Backspace"!==e.code&&"Backspace"!==e.key||(R===o[1]&&0===M.length&&(null===(t=F.current)||void 0===t||t.focus()),R===o[2]&&0===N.length&&(null===(a=V.current)||void 0===a||a.focus()))};function Q(e){if(e){const t=u.DateInputHelper.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const n=a.default(t,"YYYY-MM-DD",!0);return[l.StringHelper.padValue(n.date().toString()),l.StringHelper.padValue((n.month()+1).toString()),n.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs("div",{role:"group","aria-label":m,className:i.inputSection,onClick:()=>{var e;t||n||(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))},onFocus:e=>{t||(z(!0),p||null==g||g(e))},children:[e.jsxs("div",{ref:w,className:i.inputContainer,children:[e.jsx("span",{className:d.default(i.inputSizerBase,i.dayInputSizer),children:e.jsx("input",{ref:F,name:o[0],maxLength:2,value:null!=L?L:S,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${o[0]}-input`,"aria-label":y[0],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[0]||n?"DD":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})}),e.jsx("span",{className:d.default(i.divider,!!f&&i.dividerHover,t&&i.dividerDisabled,!t&&0===S.length&&i.dividerInactive),children:"/"}),e.jsx("span",{className:d.default(i.inputSizerBase,i.monthInputSizer),children:e.jsx("input",{ref:V,name:o[1],maxLength:2,value:null!=O?O:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${o[1]}-input`,"aria-label":y[1],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[1]||n?"MM":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})}),e.jsx("span",{className:d.default(i.divider,!!f&&i.dividerHover,t&&i.dividerDisabled,!t&&0===M.length&&i.dividerInactive),children:"/"}),e.jsx("span",{className:d.default(i.inputSizerBase,i.yearInputSizer),children:e.jsx("input",{ref:E,name:o[2],maxLength:4,value:null!=K?K:N,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:I,pattern:"[0-9]{4}","data-testid":`${o[2]}-input`,"aria-label":y[2],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[2]||n?"YYYY":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})})]}),(()=>{if(!c&&!n&&v)return e.jsx("div",{className:d.default(i.placeholder,t&&i.placeholderDisabled,k&&i.placeholderHide),onMouseDown:P,children:v})})()]})},f=c.default.forwardRef(p);exports.Component=p,exports.StandaloneDateInput=f;
 //# sourceMappingURL=standalone-date-input.js.map

package/cjs/shared/standalone-date-input/standalone-date-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"standalone-date-input.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n DayInput,\n Divider,\n InputContainer,\n InputSection,\n MonthInput,\n Placeholder,\n YearInput,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n \| StartInputNames[number]\n \| EndInputNames[number]\n \| \"none\";\n\ninterface Props {\n disabled?: boolean \| undefined;\n readOnly?: boolean \| undefined;\n hideInputKeyboard?: boolean \| undefined;\n names: StartInputNames \| EndInputNames;\n value: string \| undefined;\n hoverValue?: string \| undefined;\n focused: boolean;\n placeholder?: string \| undefined;\n label?: string \| undefined;\n inputLabels?: string[] \| undefined;\n onChange: (value: string) => void;\n onFocus?: ((event: React.FocusEvent) => void) \| undefined;\n onBlur?: ((valid: boolean) => void) \| undefined;\n}\n\nexport interface StandaloneDateInputRef {\n ref: React.RefObject<HTMLDivElement>;\n resetPlaceholder: () => void;\n resetInput: () => void;\n focusYearRef: () => void;\n}\n\nexport const Component = (\n {\n disabled,\n readOnly,\n names,\n value,\n focused,\n hoverValue,\n placeholder,\n label,\n onChange,\n onFocus,\n onBlur,\n hideInputKeyboard,\n inputLabels = [\"Date\", \"Month\", \"Year\"],\n }: Props,\n ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const dayInputRef = useRef<HTMLInputElement>(null);\n const monthInputRef = useRef<HTMLInputElement>(null);\n const yearInputRef = useRef<HTMLInputElement>(null);\n\n const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n parseToInputValues(hoverValue);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n\n // re-focus on day input if all 3 inputs get cleared while typing\n if (\n !day &&\n !month &&\n !year &&\n nodeRef.current &&\n nodeRef.current.contains(document.activeElement)\n )\n dayInputRef.current?.focus();\n }, [value]);\n\n useEffect(() => {\n // clear internal focus state\n if (!focused) {\n setCurrentFocus(\"none\");\n }\n\n // ensure at least one input is focused\n if (focused) {\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n }\n }, [focused]);\n\n useImperativeHandle(\n ref,\n () => ({\n ref: nodeRef,\n resetPlaceholder() {\n setHidePlaceholder(false);\n },\n resetInput() {\n const [day = \"\", month = \"\", year = \"\"] =\n parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n },\n focusYearRef() {\n yearInputRef.current?.focus();\n },\n }),\n [setDayValue, setMonthValue, setYearValue, value]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSectionClick = () => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n };\n\n const handleSectionFocus = (event: React.FocusEvent) => {\n if (disabled) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (!focused) {\n onFocus?.(event);\n }\n };\n\n const handlePlaceholderClick = (event: React.MouseEvent) => {\n event.preventDefault();\n dayInputRef.current?.focus();\n };\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n const targetName = event.target.name as FieldType;\n setCurrentFocus(targetName);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const [dayName, monthName, yearName] = names;\n const date = {\n [dayName]: dayValueRef.current,\n [monthName]: monthValueRef.current,\n [yearName]: yearValueRef.current,\n };\n\n const targetName = event.target.name as FieldType;\n const targetValue = date[targetName];\n\n // pad single digits for day and month inputs\n\n const paddedValue =\n targetName !== yearName\n ? StringHelper.padValue(targetValue, true)\n : targetValue;\n\n switch (targetName) {\n case dayName:\n date[dayName] = paddedValue;\n setDayValue(paddedValue);\n break;\n case monthName:\n date[monthName] = paddedValue;\n setMonthValue(paddedValue);\n break;\n case yearName:\n default:\n break;\n }\n\n const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n const isPadded = targetValue !== paddedValue;\n\n if (isValid && isPadded) {\n onChange(value);\n }\n\n if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n // entire field was blurred\n setCurrentFocus(\"none\");\n onBlur?.(isEmpty \|\| isValid);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (hoverValue) {\n // do not modify inputs when selecting date from another source\n return;\n }\n\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n const date = {\n day: dayValue,\n month: monthValue,\n year: yearValue,\n };\n\n switch (targetName) {\n case names[0]:\n date.day = targetValue;\n setDayValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n monthInputRef.current?.focus();\n }\n break;\n case names[1]:\n date.month = targetValue;\n setMonthValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n yearInputRef.current?.focus();\n }\n break;\n case names[2]:\n date.year = targetValue;\n setYearValue(targetValue);\n break;\n default:\n break;\n }\n\n if (!date.day && !date.month && !date.year) {\n onChange(\"\");\n return;\n }\n\n const value = `${date.year}-${date.month}-${date.day}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n if (isValid) {\n onChange(value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /*\n Allow going to the field before if user presses Backspace\n * on an empty field\n */\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === names[1] && monthValue.length === 0) {\n dayInputRef.current?.focus();\n }\n\n if (currentFocus === names[2] && yearValue.length === 0) {\n monthInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n function parseToInputValues(stringVal: string \| undefined) {\n if (!stringVal) {\n return [undefined, undefined, undefined];\n } else {\n const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n if (!sanitized) {\n return [undefined, undefined, undefined];\n }\n\n const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n return [\n StringHelper.padValue(day.date().toString()),\n StringHelper.padValue((day.month() + 1).toString()),\n day.year().toString(),\n ];\n }\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderPlaceholder = () => {\n if (value \|\| readOnly \|\| !placeholder) {\n return;\n }\n\n return (\n <Placeholder\n $hide={hidePlaceholder}\n $disabled={disabled}\n onMouseDown={handlePlaceholderClick}\n >\n {placeholder}\n </Placeholder>\n );\n };\n\n return (\n <InputSection\n role=\"group\"\n aria-label={label}\n onClick={handleSectionClick}\n onFocus={handleSectionFocus}\n >\n <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n <DayInput\n ref={dayInputRef}\n name={names[0]}\n maxLength={2}\n value={hoverDayValue ?? dayValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[0]}-input`}\n aria-label={inputLabels[0]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n }\n />\n <Divider $inactive={dayValue.length === 0}>/</Divider>\n <MonthInput\n ref={monthInputRef}\n name={names[1]}\n maxLength={2}\n value={hoverMonthValue ?? monthValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[1]}-input`}\n aria-label={inputLabels[1]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n }\n />\n <Divider $inactive={monthValue.length === 0}>/</Divider>\n <YearInput\n ref={yearInputRef}\n name={names[2]}\n maxLength={4}\n value={hoverYearValue ?? yearValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{4}\"\n data-testid={`${names[2]}-input`}\n aria-label={inputLabels[2]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n }\n />\n </InputContainer>\n {renderPlaceholder()}\n </InputSection>\n );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$inactive","MonthInput","onKeyDown","YearInput","Placeholder","$hide","$disabled","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"standalone-date-input.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n \| StartInputNames[number]\n \| EndInputNames[number]\n \| \"none\";\n\ninterface Props {\n disabled?: boolean \| undefined;\n readOnly?: boolean \| undefined;\n hideInputKeyboard?: boolean \| undefined;\n names: StartInputNames \| EndInputNames;\n value: string \| undefined;\n hoverValue?: string \| undefined;\n focused: boolean;\n placeholder?: string \| undefined;\n label?: string \| undefined;\n inputLabels?: string[] \| undefined;\n onChange: (value: string) => void;\n onFocus?: ((event: React.FocusEvent) => void) \| undefined;\n onBlur?: ((valid: boolean) => void) \| undefined;\n}\n\nexport interface StandaloneDateInputRef {\n ref: React.RefObject<HTMLDivElement>;\n resetPlaceholder: () => void;\n resetInput: () => void;\n focusYearRef: () => void;\n}\n\nexport const Component = (\n {\n disabled,\n readOnly,\n names,\n value,\n focused,\n hoverValue,\n placeholder,\n label,\n onChange,\n onFocus,\n onBlur,\n hideInputKeyboard,\n inputLabels = [\"Date\", \"Month\", \"Year\"],\n }: Props,\n ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const dayInputRef = useRef<HTMLInputElement>(null);\n const monthInputRef = useRef<HTMLInputElement>(null);\n const yearInputRef = useRef<HTMLInputElement>(null);\n\n const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n parseToInputValues(hoverValue);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n\n // re-focus on day input if all 3 inputs get cleared while typing\n if (\n !day &&\n !month &&\n !year &&\n nodeRef.current &&\n nodeRef.current.contains(document.activeElement)\n )\n dayInputRef.current?.focus();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n useEffect(() => {\n // clear internal focus state\n if (!focused) {\n setCurrentFocus(\"none\");\n }\n\n // ensure at least one input is focused\n if (focused) {\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n }\n }, [focused]);\n\n useImperativeHandle(\n ref,\n () => ({\n ref: nodeRef,\n resetPlaceholder() {\n setHidePlaceholder(false);\n },\n resetInput() {\n const [day = \"\", month = \"\", year = \"\"] =\n parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n },\n focusYearRef() {\n yearInputRef.current?.focus();\n },\n }),\n [setDayValue, setMonthValue, setYearValue, value]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSectionClick = () => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n };\n\n const handleSectionFocus = (event: React.FocusEvent) => {\n if (disabled) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (!focused) {\n onFocus?.(event);\n }\n };\n\n const handlePlaceholderClick = (event: React.MouseEvent) => {\n event.preventDefault();\n dayInputRef.current?.focus();\n };\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n const targetName = event.target.name as FieldType;\n setCurrentFocus(targetName);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const [dayName, monthName, yearName] = names;\n const date = {\n [dayName]: dayValueRef.current,\n [monthName]: monthValueRef.current,\n [yearName]: yearValueRef.current,\n };\n\n const targetName = event.target.name as FieldType;\n const targetValue = date[targetName];\n\n // pad single digits for day and month inputs\n\n const paddedValue =\n targetName !== yearName\n ? StringHelper.padValue(targetValue, true)\n : targetValue;\n\n switch (targetName) {\n case dayName:\n date[dayName] = paddedValue;\n setDayValue(paddedValue);\n break;\n case monthName:\n date[monthName] = paddedValue;\n setMonthValue(paddedValue);\n break;\n case yearName:\n default:\n break;\n }\n\n const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n const isPadded = targetValue !== paddedValue;\n\n if (isValid && isPadded) {\n onChange(value);\n }\n\n if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n // entire field was blurred\n setCurrentFocus(\"none\");\n onBlur?.(isEmpty \|\| isValid);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (hoverValue) {\n // do not modify inputs when selecting date from another source\n return;\n }\n\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n const date = {\n day: dayValue,\n month: monthValue,\n year: yearValue,\n };\n\n switch (targetName) {\n case names[0]:\n date.day = targetValue;\n setDayValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n monthInputRef.current?.focus();\n }\n break;\n case names[1]:\n date.month = targetValue;\n setMonthValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n yearInputRef.current?.focus();\n }\n break;\n case names[2]:\n date.year = targetValue;\n setYearValue(targetValue);\n break;\n default:\n break;\n }\n\n if (!date.day && !date.month && !date.year) {\n onChange(\"\");\n return;\n }\n\n const value = `${date.year}-${date.month}-${date.day}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n if (isValid) {\n onChange(value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /*\n Allow going to the field before if user presses Backspace\n * on an empty field\n */\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === names[1] && monthValue.length === 0) {\n dayInputRef.current?.focus();\n }\n\n if (currentFocus === names[2] && yearValue.length === 0) {\n monthInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n function parseToInputValues(stringVal: string \| undefined) {\n if (!stringVal) {\n return [undefined, undefined, undefined];\n } else {\n const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n if (!sanitized) {\n return [undefined, undefined, undefined];\n }\n\n const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n return [\n StringHelper.padValue(day.date().toString()),\n StringHelper.padValue((day.month() + 1).toString()),\n day.year().toString(),\n ];\n }\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderPlaceholder = () => {\n if (value \|\| readOnly \|\| !placeholder) {\n return;\n }\n\n return (\n <div\n className={clsx(\n styles.placeholder,\n disabled && styles.placeholderDisabled,\n hidePlaceholder && styles.placeholderHide\n )}\n onMouseDown={handlePlaceholderClick}\n >\n {placeholder}\n </div>\n );\n };\n\n return (\n <div\n role=\"group\"\n aria-label={label}\n className={styles.inputSection}\n onClick={handleSectionClick}\n onFocus={handleSectionFocus}\n >\n <div ref={nodeRef} className={styles.inputContainer}>\n <span\n className={clsx(\n styles.inputSizerBase,\n styles.dayInputSizer\n )}\n >\n <input\n ref={dayInputRef}\n name={names[0]}\n maxLength={2}\n value={hoverDayValue ?? dayValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[0]}-input`}\n aria-label={inputLabels[0]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n }\n className={clsx(\n styles.baseInput,\n !!hoverValue && styles.baseInputHover\n )}\n />\n </span>\n <span\n className={clsx(\n styles.divider,\n !!hoverValue && styles.dividerHover,\n disabled && styles.dividerDisabled,\n !disabled &&\n dayValue.length === 0 &&\n styles.dividerInactive\n )}\n >\n /\n </span>\n <span\n className={clsx(\n styles.inputSizerBase,\n styles.monthInputSizer\n )}\n >\n <input\n ref={monthInputRef}\n name={names[1]}\n maxLength={2}\n value={hoverMonthValue ?? monthValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[1]}-input`}\n aria-label={inputLabels[1]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n }\n className={clsx(\n styles.baseInput,\n !!hoverValue && styles.baseInputHover\n )}\n />\n </span>\n <span\n className={clsx(\n styles.divider,\n !!hoverValue && styles.dividerHover,\n disabled && styles.dividerDisabled,\n !disabled &&\n monthValue.length === 0 &&\n styles.dividerInactive\n )}\n >\n /\n </span>\n <span\n className={clsx(\n styles.inputSizerBase,\n styles.yearInputSizer\n )}\n >\n <input\n ref={yearInputRef}\n name={names[2]}\n maxLength={4}\n value={hoverYearValue ?? yearValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{4}\"\n data-testid={`${names[2]}-input`}\n aria-label={inputLabels[2]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n }\n className={clsx(\n styles.baseInput,\n !!hoverValue && styles.baseInputHover\n )}\n />\n </span>\n </div>\n {renderPlaceholder()}\n </div>\n );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerHover","styles.dividerDisabled","styles.dividerInactive","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/cjs/shared/standalone-date-input/standalone-date-input.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./standalone-date-input.styles_157qo89.css");exports.baseInput="b11lxf0g",exports.baseInputHover="b1owk99f",exports.dayInputSizer="d1nfq8ts",exports.divider="d1hrb2q6",exports.dividerDisabled="day8f6w",exports.dividerHover="d1ednuur",exports.dividerInactive="d12gn07d",exports.inputContainer="i1tizbfo",exports.inputSection="i48x656",exports.inputSizerBase="i8v7mt3",exports.monthInputSizer="m1kizbwh",exports.placeholder="p1jcopfd",exports.placeholderDisabled="p10ypbkc",exports.placeholderHide="p1yc7tqu",exports.yearInputSizer="yzrktuq";
2	+ //# sourceMappingURL=standalone-date-input.styles.js.map

package/cjs/shared/standalone-date-input/standalone-date-input.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"standalone-date-input.styles.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n display: flex;\n align-items: center;\n position: relative;\n\n flex: 1;\n`;\n\nexport const baseInput = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n display: block;\n background: transparent;\n border: none;\n outline: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n text-align: center;\n position: absolute;\n inset: 0;\n\n &:disabled {\n color: ${Colour[\"text-subtler\"]};\n\n &:hover {\n cursor: not-allowed;\n }\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n // Chrome, Safari, Edge, Opera\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n // Safari (remove top shadow)\n --webkit-appearance: none;\n\n // Firefox\n --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dividerInactive = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dividerDisabled = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const inputContainer = css`\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n display: inline-block;\n position: relative;\n\n &::after {\n ${Font[\"body-baseline-regular\"]}\n visibility: hidden;\n pointer-events: none;\n white-space: pre;\n }\n`;\n\nexport const dayInputSizer = css`\n &::after {\n content: \"DD\";\n }\n`;\n\nexport const monthInputSizer = css`\n &::after {\n content: \"MM\";\n }\n`;\n\nexport const yearInputSizer = css`\n &::after {\n content: \"YYYY\";\n }\n`;\n\nexport const placeholder = css`\n ${Font[\"body-baseline-regular\"]}\n background-color: ${Colour[\"bg\"]};\n color: ${Colour[\"text-subtler\"]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n display: none;\n`;\n"],"names":[],"mappings":"iIAesB,kCAyCK,iCAuCD,2BAnCN,mCAaQ,+BARH,mCAIG,kCAQD,gCAtEF,iCA4EE,kCAkBC,+BAYJ,uCAWQ,mCAKJ,kCAtBD"}

package/cjs/shared/standalone-date-input/standalone-date-input.styles_157qo89.css ADDED Viewed

@@ -0,0 +1,15 @@
+@layer fds{.i48x656{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;}
+.b11lxf0g{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;text-align:center;position:absolute;inset:0;--webkit-appearance:none;--moz-appearance:textfield;}.b11lxf0g:disabled{color:var(--fds-colour-text-subtler);}.b11lxf0g:disabled:hover{cursor:not-allowed;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-webkit-outer-spin-button,.b11lxf0g::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::placeholder{color:var(--fds-colour-text-subtler);}
+.b1owk99f{color:var(--fds-colour-text-subtler);}
+.d1hrb2q6{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.d1ednuur{color:var(--fds-colour-text-subtler);}
+.d12gn07d{color:var(--fds-colour-text-subtler);}
+.day8f6w{color:var(--fds-colour-text-disabled);}
+.i1tizbfo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-4);}
+.i8v7mt3{display:inline-block;position:relative;}.i8v7mt3::after{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
+.d1nfq8ts::after{content:"DD";}
+.m1kizbwh::after{content:"MM";}
+.yzrktuq::after{content:"YYYY";}
+.p1jcopfd{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;}
+.p10ypbkc{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p1yc7tqu{display:none;}}

package/cjs/shared/time-slot/time-slot.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var o=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var l=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./time-slot.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r);const u=t.forwardRef((({className:r,"data-testid":i,bgColor:u,bgColor2:n,children:d,clickable:m,fill:c="default",hoverBgColor:q,hoverBgColor2:h,nonClickableCursor:j,onClick:f,styleType:p,tabIndex:k},v)=>{const y=t.useRef(null);o.useApplyStyle(y,{[s.tokens.slot.bgColor]:u,[s.tokens.slot.bgColor2]:n,[s.tokens.slot.hoverBgColor]:q,[s.tokens.slot.hoverBgColor2]:h,[s.tokens.slot.cursor]:j});return e.jsx("div",{ref:l.mergeRefs(y,v),className:a.default(s.timeSlot,{[s.timeSlotHalfFillTop]:"top"===c,[s.timeSlotHalfFillBottom]:"bottom"===c},r),"data-style-type":p,"data-clickable":!!m,"data-hoverable":!!(m&&("stripes"===p?q\|\|h:q)),onClick:f,"data-testid":i,tabIndex:k,children:d})}));exports.TimeSlot=u;
2	+ //# sourceMappingURL=time-slot.js.map

package/cjs/shared/time-slot/time-slot.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"time-slot.js","sources":["../../../../src/shared/time-slot/time-slot.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport * as styles from \"./time-slot.styles\";\nimport type { SlotStyle } from \"./types\";\n\nexport interface TimeSlotProps {\n \"data-testid\"?: string | undefined;\n bgColor: string;\n bgColor2?: string | undefined;\n children?: ReactNode;\n className?: string | undefined;\n clickable?: boolean | undefined;\n fill?: \"default\" | \"top\" | \"bottom\" | undefined;\n hoverBgColor?: string | undefined;\n hoverBgColor2?: string | undefined;\n nonClickableCursor?: \"default\" | \"not-allowed\" | undefined;\n onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n styleType: SlotStyle;\n tabIndex?: number | undefined;\n}\n\nconst Component = (\n {\n className,\n \"data-testid\": dataTestId,\n bgColor,\n bgColor2,\n children,\n clickable,\n fill = \"default\",\n hoverBgColor,\n hoverBgColor2,\n nonClickableCursor,\n onClick,\n styleType,\n tabIndex,\n }: TimeSlotProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const slotRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(slotRef, {\n [styles.tokens.slot.bgColor]: bgColor,\n [styles.tokens.slot.bgColor2]: bgColor2,\n [styles.tokens.slot.hoverBgColor]: hoverBgColor,\n [styles.tokens.slot.hoverBgColor2]: hoverBgColor2,\n [styles.tokens.slot.cursor]: nonClickableCursor,\n });\n\n const isHoverable = () => {\n if (!clickable) {\n return false;\n }\n\n if (styleType === \"stripes\") {\n return !!(hoverBgColor || hoverBgColor2);\n }\n\n return !!hoverBgColor;\n };\n\n return (\n <div\n ref={mergeRefs(slotRef, ref)}\n className={clsx(\n styles.timeSlot,\n {\n [styles.timeSlotHalfFillTop]: fill === \"top\",\n [styles.timeSlotHalfFillBottom]: fill === \"bottom\",\n },\n className\n )}\n data-style-type={styleType}\n data-clickable={!!clickable}\n data-hoverable={isHoverable()}\n onClick={onClick}\n data-testid={dataTestId}\n tabIndex={tabIndex}\n >\n {children}\n </div>\n );\n};\n\nexport const TimeSlot = forwardRef(Component);\n"],"names":["TimeSlot","forwardRef","className","dataTestId","bgColor","bgColor2","children","clickable","fill","hoverBgColor","hoverBgColor2","nonClickableCursor","onClick","styleType","tabIndex","ref","slotRef","useRef","useApplyStyle","styles.tokens","slot","cursor","_jsx","mergeRefs","clsx","styles.timeSlot","styles.timeSlotHalfFillTop","styles.timeSlotHalfFillBottom"],"mappings":"mzBAyBA,MA+DaA,EAAWC,EAAAA,YA/DN,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,OAAO,UACPC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAAA,OAAuB,MAEvCC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,KAAKhB,SAAUA,EAC9B,CAACe,EAAAA,OAAcC,KAAKf,UAAWA,EAC/B,CAACc,EAAAA,OAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAAA,OAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAAA,OAAcC,KAAKC,QAASV,IAejC,OACIW,MAAA,MAAA,CACIP,IAAKQ,EAAAA,UAAUP,EAASD,GACxBb,UAAWsB,EAAAA,QACPC,WACA,CACI,CAACC,EAAAA,qBAAsC,QAATlB,EAC9B,CAACmB,EAAAA,wBAAyC,WAATnB,GAErCN,GACH,kBACgBW,EAAS,mBACRN,EAAS,oBAvB1BA,IAIa,YAAdM,EACUJ,GAAgBC,EAGrBD,IAiBLG,QAASA,EAAO,cACHT,EACbW,SAAUA,EAAQR,SAEjBA,GACC"}

package/cjs/shared/time-slot/time-slot.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./time-slot.styles_18s0to7.css");exports.timeSlot="tsti7hb",exports.timeSlotHalfFillBottom="t31kbad",exports.timeSlotHalfFillTop="tmgdrss",exports.tokens={slot:{bgColor:"--fds-internal-timeSlot-slot-bgColor",bgColor2:"--fds-internal-timeSlot-slot-bgColor2",hoverBgColor:"--fds-internal-timeSlot-slot-hoverBgColor",hoverBgColor2:"--fds-internal-timeSlot-slot-hoverBgColor2",cursor:"--fds-internal-timeSlot-slot-cursor"}};
2	+ //# sourceMappingURL=time-slot.styles.js.map

package/cjs/shared/time-slot/time-slot.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"time-slot.styles.js","sources":["../../../../src/shared/time-slot/time-slot.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const tokens = {\n slot: {\n bgColor: \"--fds-internal-timeSlot-slot-bgColor\",\n bgColor2: \"--fds-internal-timeSlot-slot-bgColor2\",\n hoverBgColor: \"--fds-internal-timeSlot-slot-hoverBgColor\",\n hoverBgColor2: \"--fds-internal-timeSlot-slot-hoverBgColor2\",\n cursor: \"--fds-internal-timeSlot-slot-cursor\",\n },\n};\n\nconst stripesGradient = `repeating-linear-gradient(\n 135deg,\n var(${tokens.slot.bgColor2}) 0px,\n var(${tokens.slot.bgColor2}) 6px,\n var(${tokens.slot.bgColor}) 6px,\n var(${tokens.slot.bgColor}) 12px\n)`;\n\nexport const timeSlot = css`\n ${tokens.slot.bgColor}: ${Colour[\"bg-stronger\"]};\n ${tokens.slot.bgColor2}: ${Colour[\"bg-strongest\"]};\n ${tokens.slot.hoverBgColor}: ${Colour[\"bg-stronger\"]};\n ${tokens.slot.hoverBgColor2}: ${Colour[\"bg-strongest\"]};\n\n cursor: var(${tokens.slot.cursor}, default);\n\n &[data-clickable=\"true\"] {\n cursor: pointer;\n }\n\n &[data-style-type=\"default\"] {\n background-color: var(${tokens.slot.bgColor});\n }\n\n &[data-style-type=\"default\"][data-hoverable=\"true\"] {\n &:hover {\n background-color: var(${tokens.slot.hoverBgColor});\n }\n }\n\n &[data-style-type=\"stripes\"] {\n background: ${stripesGradient};\n }\n\n &[data-style-type=\"stripes\"][data-hoverable=\"true\"] {\n &:hover {\n background: repeating-linear-gradient(\n 135deg,\n var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n 0px,\n var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n 6px,\n var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n 6px,\n var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n 12px\n );\n }\n }\n`;\n\nexport const timeSlotHalfFillTop = css`\n &[data-style-type=\"default\"] {\n background: linear-gradient(\n to top,\n var(${tokens.slot.bgColor}) 50%,\n ${Colour[\"bg-strongest\"]} 50%\n );\n }\n\n &[data-style-type=\"stripes\"] {\n background: linear-gradient(\n to top,\n transparent 50%,\n ${Colour[\"bg-strongest\"]} 50%\n ),\n ${stripesGradient};\n }\n`;\n\nexport const timeSlotHalfFillBottom = css`\n &[data-style-type=\"default\"] {\n background: linear-gradient(\n to bottom,\n var(${tokens.slot.bgColor}) 50%,\n ${Colour[\"bg-strongest\"]} 50%\n );\n }\n\n &[data-style-type=\"stripes\"] {\n background: linear-gradient(\n to bottom,\n transparent 50%,\n ${Colour[\"bg-strongest\"]} 50%\n ),\n ${stripesGradient};\n }\n`;\n"],"names":["slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor"],"mappings":"wGAsBqB,yCA8Dc,sCAnBH,yBA7DV,CAClBA,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ"}

package/cjs/shared/time-slot/time-slot.styles_18s0to7.css ADDED Viewed

@@ -0,0 +1,29 @@
+@layer fds{.tsti7hb{--fds-internal-timeSlot-slot-bgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-bgColor2:var(--fds-colour-bg-strongest);--fds-internal-timeSlot-slot-hoverBgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-hoverBgColor2:var(--fds-colour-bg-strongest);cursor:var(--fds-internal-timeSlot-slot-cursor, default);}.tsti7hb[data-clickable="true"]{cursor:pointer;}.tsti7hb[data-style-type="default"]{background-color:var(--fds-internal-timeSlot-slot-bgColor);}.tsti7hb[data-style-type="default"][data-hoverable="true"]:hover{background-color:var(--fds-internal-timeSlot-slot-hoverBgColor);}.tsti7hb[data-style-type="stripes"]{background:repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}.tsti7hb[data-style-type="stripes"][data-hoverable="true"]:hover{background:repeating-linear-gradient(
+                135deg,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    0px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    12px
+            );}
+.tmgdrss[data-style-type="default"]{background:linear-gradient(
+            to top,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.tmgdrss[data-style-type="stripes"]{background:linear-gradient(
+                to top,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}
+.t31kbad[data-style-type="default"]{background:linear-gradient(
+            to bottom,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.t31kbad[data-style-type="stripes"]{background:linear-gradient(
+                to bottom,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}}

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e,t,n,r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),a=require("@lifesg/react-icons/chevron-up"),o=require("react"),s=require("../../util/string-helper.js"),c=require("../../util/time-helper.js"),u=require("../accessibility/index.js"),l=require("./timepicker-dropdown.styles.js");!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(e||(e={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(t||(t={})),function(e){e.AM="am",e.PM="pm"}(n||(n={}));exports.TimepickerDropdown=({id:d,value:m,show:h,format:p,onChange:g,onCancel:x})=>{const b=c.TimeHelper.getTimeValues(p,m),[T,j]=o.useState(b.hour),[M,U]=o.useState(b.minute),[H,k]=o.useState(b.period),v=o.useRef(null),w=o.useRef(null);o.useEffect((()=>{if(h&&v.current&&v.current.focus({preventScroll:!0}),h){const{hour:e,minute:t,period:n}=c.TimeHelper.getTimeValues(p,m);j(e),U(t),k(n)}}),[h,m,p]),o.useEffect((()=>{const e=v.current,t=w.current;return e&&e.addEventListener("keydown",I),t&&t.addEventListener("keydown",I),()=>{e&&e.removeEventListener("keydown",I),t&&t.removeEventListener("keydown",I)}}),[]);const I=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},D=o.useCallback((t=>{switch(t.currentTarget.name){case e.MINUTE_UP:U(c.TimeHelper.updateMinutes(M,"add"));break;case e.MINUTE_DOWN:U(c.TimeHelper.updateMinutes(M,"minus"));break;case e.HOUR_UP:j(c.TimeHelper.updateHours(T,"add"));break;case e.HOUR_DOWN:j(c.TimeHelper.updateHours(T,"minus"))}}),[T,M]),C=e=>{e.target.select()},f=e=>{const n=e.target.value;switch(e.target.name){case t.HOUR:n.length<=2&&j(n);break;case t.MINUTE:n.length<=2&&U(n)}},E=e=>{const n=parseInt(e.target.value);if(!isNaN(n))switch(e.target.name){case t.HOUR:{const t=n>23||n<0?b.hour:c.TimeHelper.convertHourTo12HourFormat(e.target.value);j(t);break}case t.MINUTE:{const t=n>59||n<0?b.minute:e.target.value;U(s.StringHelper.padValue(t));break}}},P=e=>{switch(e.target.name){case n.AM:k(c.EPeriod.AM);break;case n.PM:k(c.EPeriod.PM)}},N=e=>d?`${d}-${e}`:e;return r.jsx(l.StyledDiv,{children:r.jsxs(l.Container,{"data-testid":N("timepicker-dropdown"),inert:u.inertValue(!h),children:[r.jsxs(l.InputSection,{children:[r.jsxs(l.HourMinuteSection,{children:[r.jsxs(l.InputContainer,{children:[r.jsx(l.SwitchButton,{"aria-label":"increase hour",name:e.HOUR_UP,tabIndex:-1,onClick:D,"data-testid":N("hour-increment-button"),children:r.jsx(a.ChevronUpIcon,{})}),r.jsx(l.TimeInputBox,{children:r.jsx(l.TimeInput,{"aria-label":"hour",type:"number",name:t.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:v,value:T,onFocus:C,onChange:f,onBlur:E,min:1,max:12,placeholder:"HH","data-testid":N("hour-input")})}),r.jsx(l.SwitchButton,{"aria-label":"decrease hour",name:e.HOUR_DOWN,tabIndex:-1,onClick:D,"data-testid":N("hour-decrement-button"),children:r.jsx(i.ChevronDownIcon,{})})]}),r.jsx(l.DividerLabel,{children:":"}),r.jsxs(l.InputContainer,{children:[r.jsx(l.SwitchButton,{"aria-label":"increase minute",name:e.MINUTE_UP,tabIndex:-1,onClick:D,"data-testid":N("minute-increment-button"),children:r.jsx(a.ChevronUpIcon,{})}),r.jsx(l.TimeInputBox,{children:r.jsx(l.TimeInput,{"aria-label":"minute",type:"number",name:t.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:w,value:M,onChange:f,onBlur:E,onFocus:C,min:0,max:59,placeholder:"MM","data-testid":N("minute-input")})}),r.jsx(l.SwitchButton,{"aria-label":"decrease minute",name:e.MINUTE_DOWN,tabIndex:-1,onClick:D,"data-testid":N("minute-decrement-button"),children:r.jsx(i.ChevronDownIcon,{})})]})]}),r.jsxs(l.TimePeriodSection,{children:[r.jsx(l.TimePeriodToggle,{checked:H===c.EPeriod.AM,name:n.AM,type:"radio",onChange:P,"data-testid":N("am-toggle"),"aria-label":"AM",children:"AM"}),r.jsx(l.TimePeriodToggle,{checked:H===c.EPeriod.PM,name:n.PM,type:"radio",onChange:P,"data-testid":N("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),r.jsxs(l.ControlSection,{children:[r.jsx(l.ControlButton,{"aria-label":"close selector",type:"button",styleType:"secondary",onClick:x,"data-testid":N("cancel-button"),children:"Cancel"}),r.jsx(l.ControlButton,{"aria-label":"confirm selection",type:"button",onClick:()=>{let e;e="24hr"===p?c.TimeHelper.convertTo24HourFormat({hour:T,minute:M,period:H}):`${T}:${M}${H}`,g(e)},disabled:""===T||""===M,"data-testid":N("confirm-button"),children:"Done"})]})]})})};
+"use strict";var e,t,n,i=require("react/jsx-runtime"),a=require("@lifesg/react-icons/chevron-down"),r=require("@lifesg/react-icons/chevron-up"),s=require("react"),o=require("../../button/button.js"),c=require("../../toggle/toggle.js"),l=require("../../typography/index.js"),u=require("../../util/string-helper.js"),d=require("../../util/time-helper.js"),m=require("../accessibility/index.js"),p=require("../clickable-icon/clickable-icon.js"),h=require("../input-wrapper/input-wrapper.js"),g=require("./timepicker-dropdown.styles.js");!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(e||(e={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(t||(t={})),function(e){e.AM="am",e.PM="pm"}(n||(n={}));exports.TimepickerDropdown=({id:b,value:x,show:N,format:j,onChange:v,onCancel:T})=>{const k=d.TimeHelper.getTimeValues(j,x),[I,M]=s.useState(k.hour),[U,w]=s.useState(k.minute),[H,C]=s.useState(k.period),y=s.useRef(null),D=s.useRef(null);s.useEffect((()=>{if(N&&y.current&&y.current.focus({preventScroll:!0}),N){const{hour:e,minute:t,period:n}=d.TimeHelper.getTimeValues(j,x);M(e),w(t),C(n)}}),[N,x,j]),s.useEffect((()=>{const e=y.current,t=D.current;return e&&e.addEventListener("keydown",f),t&&t.addEventListener("keydown",f),()=>{e&&e.removeEventListener("keydown",f),t&&t.removeEventListener("keydown",f)}}),[]);const f=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},B=s.useCallback((t=>{switch(t.currentTarget.name){case e.MINUTE_UP:w(d.TimeHelper.updateMinutes(U,"add"));break;case e.MINUTE_DOWN:w(d.TimeHelper.updateMinutes(U,"minus"));break;case e.HOUR_UP:M(d.TimeHelper.updateHours(I,"add"));break;case e.HOUR_DOWN:M(d.TimeHelper.updateHours(I,"minus"))}}),[I,U]),E=e=>{e.target.select()},P=e=>{const n=e.target.value;switch(e.target.name){case t.HOUR:n.length<=2&&M(n);break;case t.MINUTE:n.length<=2&&w(n)}},O=e=>{const n=parseInt(e.target.value);if(!isNaN(n))switch(e.target.name){case t.HOUR:{const t=n>23||n<0?k.hour:d.TimeHelper.convertHourTo12HourFormat(e.target.value);M(t);break}case t.MINUTE:{const t=n>59||n<0?k.minute:e.target.value;w(u.StringHelper.padValue(t));break}}},q=e=>{switch(e.target.name){case n.AM:C(d.EPeriod.AM);break;case n.PM:C(d.EPeriod.PM)}},R=e=>b?`${b}-${e}`:e;return i.jsx("div",{className:g.root,children:i.jsxs("div",{className:g.container,"data-testid":R("timepicker-dropdown"),inert:m.inertValue(!N),children:[i.jsxs("div",{className:g.inputSection,children:[i.jsxs("div",{className:g.hourMinuteSection,children:[i.jsxs("div",{className:g.inputContainer,children:[i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"increase hour",name:e.HOUR_UP,tabIndex:-1,onClick:B,"data-testid":R("hour-increment-button"),children:i.jsx(r.ChevronUpIcon,{})}),i.jsx(h.InputBox,{className:g.timeInputBox,children:i.jsx(h.BasicInput,{className:g.timeInput,"aria-label":"hour",type:"number",name:t.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:y,value:I,onFocus:E,onChange:P,onBlur:O,min:1,max:12,placeholder:"HH","data-testid":R("hour-input")})}),i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"decrease hour",name:e.HOUR_DOWN,tabIndex:-1,onClick:B,"data-testid":R("hour-decrement-button"),children:i.jsx(a.ChevronDownIcon,{})})]}),i.jsx(l.Typography.BodyBL,{className:g.dividerLabel,children:":"}),i.jsxs("div",{className:g.inputContainer,children:[i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"increase minute",name:e.MINUTE_UP,tabIndex:-1,onClick:B,"data-testid":R("minute-increment-button"),children:i.jsx(r.ChevronUpIcon,{})}),i.jsx(h.InputBox,{className:g.timeInputBox,children:i.jsx(h.BasicInput,{className:g.timeInput,"aria-label":"minute",type:"number",name:t.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:D,value:U,onChange:P,onBlur:O,onFocus:E,min:0,max:59,placeholder:"MM","data-testid":R("minute-input")})}),i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"decrease minute",name:e.MINUTE_DOWN,tabIndex:-1,onClick:B,"data-testid":R("minute-decrement-button"),children:i.jsx(a.ChevronDownIcon,{})})]})]}),i.jsxs("div",{className:g.timePeriodSection,children:[i.jsx(c.Toggle,{className:g.timePeriodToggle,checked:H===d.EPeriod.AM,name:n.AM,type:"radio",onChange:q,"data-testid":R("am-toggle"),"aria-label":"AM",children:"AM"}),i.jsx(c.Toggle,{className:g.timePeriodToggle,checked:H===d.EPeriod.PM,name:n.PM,type:"radio",onChange:q,"data-testid":R("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),i.jsxs("div",{className:g.controlSection,children:[i.jsx(o.Button,{className:g.controlButton,sizeType:"small",type:"button",onClick:()=>{let e;e="24hr"===j?d.TimeHelper.convertTo24HourFormat({hour:I,minute:U,period:H}):`${I}:${U}${H}`,v(e)},disabled:""===I||""===U,"data-testid":R("confirm-button"),children:"Done"}),i.jsx(o.Button,{className:g.controlButton,sizeType:"small",type:"button",styleType:"secondary",onClick:T,"data-testid":R("cancel-button"),children:"Cancel"})]})]})})};
 //# sourceMappingURL=timepicker-dropdown.js.map

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker-dropdown.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { StringHelper } from \"../../util/string-helper\";\nimport type { TimeFormat } from \"../../util/time-helper\";\nimport { EPeriod, TimeHelper } from \"../../util/time-helper\";\nimport { inertValue } from \"../accessibility\";\nimport {\n Container,\n ControlButton,\n ControlSection,\n DividerLabel,\n HourMinuteSection,\n InputContainer,\n InputSection,\n StyledDiv,\n SwitchButton,\n TimeInput,\n TimeInputBox,\n TimePeriodSection,\n TimePeriodToggle,\n} from \"./timepicker-dropdown.styles\";\n\nenum EInputButtonName {\n HOUR_UP = \"hour-up\",\n HOUR_DOWN = \"hour-down\",\n MINUTE_UP = \"minute-up\",\n MINUTE_DOWN = \"minute-down\",\n}\n\nenum EInputName {\n HOUR = \"hour\",\n MINUTE = \"minute\",\n}\n\nenum ETimePeriodToggleName {\n AM = \"am\",\n PM = \"pm\",\n}\n\ninterface TimepickerDropdownProps {\n id?: string;\n value: string \| undefined;\n show: boolean;\n format: TimeFormat;\n onChange: (value: string) => void;\n onCancel: () => void;\n}\n\nexport const TimepickerDropdown = ({\n id,\n value,\n show,\n format,\n onChange,\n onCancel,\n}: TimepickerDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const timeValues = TimeHelper.getTimeValues(format, value);\n\n const [hourValue, setHourValue] = useState<string>(timeValues.hour);\n const [minuteValue, setMinuteValue] = useState<string>(timeValues.minute);\n const [timePeriod, setTimePeriod] = useState<EPeriod>(timeValues.period);\n\n const hourInputRef = useRef<HTMLInputElement>(null);\n const minuteInputRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n // Focus hour input on display of dropdown\n if (show && hourInputRef.current) {\n hourInputRef.current.focus({ preventScroll: true });\n }\n\n if (show) {\n // reset time values especially when a Cancel or blur event happened\n const { hour, minute, period } = TimeHelper.getTimeValues(\n format,\n value\n );\n setHourValue(hour);\n setMinuteValue(minute);\n setTimePeriod(period);\n }\n }, [show, value, format]);\n\n useEffect(() => {\n const hourInput = hourInputRef.current;\n const minuteInput = minuteInputRef.current;\n\n if (hourInput) hourInput.addEventListener(\"keydown\", handleKeyDown);\n if (minuteInput) minuteInput.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n if (hourInput)\n hourInput.removeEventListener(\"keydown\", handleKeyDown);\n if (minuteInput)\n minuteInput.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleKeyDown = (event: KeyboardEvent) => {\n /*\n NOTE: This is the most deterministic way in handling\n * incorrect characters from being entered. The pattern\n * added in the input still allows some special characters\n * to slip through.\n /\n\n const permittableEventCodes = [\n \"Digit0\",\n \"Digit1\",\n \"Digit2\",\n \"Digit3\",\n \"Digit4\",\n \"Digit5\",\n \"Digit6\",\n \"Digit7\",\n \"Digit8\",\n \"Digit9\",\n \"Tab\",\n \"Backspace\",\n \"Delete\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"ArrowDown\",\n ];\n\n const permittableEventKeys = [\n \"Backspace\",\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n ];\n\n if (\n !permittableEventCodes.includes(event.code) &&\n !permittableEventKeys.includes(event.key) // mobile devices\n ) {\n event.preventDefault();\n }\n };\n\n const handleInputButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n switch (event.currentTarget.name) {\n case EInputButtonName.MINUTE_UP:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"add\")\n );\n break;\n case EInputButtonName.MINUTE_DOWN:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"minus\")\n );\n break;\n case EInputButtonName.HOUR_UP:\n setHourValue(TimeHelper.updateHours(hourValue, \"add\"));\n break;\n case EInputButtonName.HOUR_DOWN:\n setHourValue(TimeHelper.updateHours(hourValue, \"minus\"));\n break;\n default:\n break;\n }\n },\n [hourValue, minuteValue]\n );\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n switch (event.target.name) {\n case EInputName.HOUR:\n if (value.length <= 2) setHourValue(value);\n break;\n case EInputName.MINUTE:\n if (value.length <= 2) setMinuteValue(value);\n break;\n default:\n break;\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const value = parseInt(event.target.value);\n\n if (isNaN(value)) return;\n\n switch (event.target.name) {\n case EInputName.HOUR: {\n const valueToSet =\n value > 23 \|\| value < 0\n ? timeValues.hour\n : TimeHelper.convertHourTo12HourFormat(\n event.target.value\n );\n\n setHourValue(valueToSet);\n break;\n }\n case EInputName.MINUTE: {\n const valueToSet =\n value > 59 \|\| value < 0\n ? timeValues.minute\n : event.target.value;\n\n setMinuteValue(StringHelper.padValue(valueToSet));\n break;\n }\n default:\n break;\n }\n };\n\n const handleTimePeriodChange = (\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n switch (event.target.name) {\n case ETimePeriodToggleName.AM:\n setTimePeriod(EPeriod.AM);\n break;\n case ETimePeriodToggleName.PM:\n setTimePeriod(EPeriod.PM);\n break;\n default:\n break;\n }\n };\n\n const handleConfirm = () => {\n let formattedValue: string;\n\n if (format === \"24hr\") {\n formattedValue = TimeHelper.convertTo24HourFormat({\n hour: hourValue,\n minute: minuteValue,\n period: timePeriod,\n });\n } else {\n formattedValue = `${hourValue}:${minuteValue}${timePeriod}`;\n }\n\n onChange(formattedValue);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getTestId = (baseTestId: string): string => {\n return id ? `${id}-${baseTestId}` : baseTestId;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHourInput = () => (\n <InputContainer>\n <SwitchButton\n aria-label=\"increase hour\"\n name={EInputButtonName.HOUR_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-increment-button\")}\n >\n <ChevronUpIcon />\n </SwitchButton>\n <TimeInputBox>\n <TimeInput\n aria-label=\"hour\"\n type=\"number\"\n name={EInputName.HOUR}\n id=\"hour\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={hourInputRef}\n value={hourValue}\n onFocus={handleFocus}\n onChange={handleChange}\n onBlur={handleBlur}\n min={1}\n max={12}\n placeholder=\"HH\"\n data-testid={getTestId(\"hour-input\")}\n />\n </TimeInputBox>\n <SwitchButton\n aria-label=\"decrease hour\"\n name={EInputButtonName.HOUR_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-decrement-button\")}\n >\n <ChevronDownIcon />\n </SwitchButton>\n </InputContainer>\n );\n\n const renderMinuteInput = () => (\n <InputContainer>\n <SwitchButton\n aria-label=\"increase minute\"\n name={EInputButtonName.MINUTE_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-increment-button\")}\n >\n <ChevronUpIcon />\n </SwitchButton>\n <TimeInputBox>\n <TimeInput\n aria-label=\"minute\"\n type=\"number\"\n name={EInputName.MINUTE}\n id=\"minute\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={minuteInputRef}\n value={minuteValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n min={0}\n max={59}\n placeholder=\"MM\"\n data-testid={getTestId(\"minute-input\")}\n />\n </TimeInputBox>\n <SwitchButton\n aria-label=\"decrease minute\"\n name={EInputButtonName.MINUTE_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change */\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-decrement-button\")}\n >\n <ChevronDownIcon />\n </SwitchButton>\n </InputContainer>\n );\n\n const renderTimePeriodControl = () => (\n <TimePeriodSection>\n <TimePeriodToggle\n checked={timePeriod === EPeriod.AM}\n name={ETimePeriodToggleName.AM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"am-toggle\")}\n aria-label=\"AM\"\n >\n AM\n </TimePeriodToggle>\n <TimePeriodToggle\n checked={timePeriod === EPeriod.PM}\n name={ETimePeriodToggleName.PM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"pm-toggle\")}\n aria-label=\"PM\"\n >\n PM\n </TimePeriodToggle>\n </TimePeriodSection>\n );\n\n return (\n <StyledDiv>\n <Container\n data-testid={getTestId(\"timepicker-dropdown\")}\n inert={inertValue(!show)}\n >\n <InputSection>\n <HourMinuteSection>\n {renderHourInput()}\n <DividerLabel>:</DividerLabel>\n {renderMinuteInput()}\n </HourMinuteSection>\n {renderTimePeriodControl()}\n </InputSection>\n <ControlSection>\n <ControlButton\n aria-label=\"close selector\"\n type=\"button\"\n styleType=\"secondary\"\n onClick={onCancel}\n data-testid={getTestId(\"cancel-button\")}\n >\n Cancel\n </ControlButton>\n <ControlButton\n aria-label=\"confirm selection\"\n type=\"button\"\n onClick={handleConfirm}\n disabled={hourValue === \"\" \|\| minuteValue === \"\"}\n data-testid={getTestId(\"confirm-button\")}\n >\n Done\n </ControlButton>\n </ControlSection>\n </Container>\n </StyledDiv>\n );\n};\n"],"names":["EInputButtonName","EInputName","ETimePeriodToggleName","id","value","show","format","onChange","onCancel","timeValues","TimeHelper","getTimeValues","hourValue","setHourValue","useState","hour","minuteValue","setMinuteValue","minute","timePeriod","setTimePeriod","period","hourInputRef","useRef","minuteInputRef","useEffect","current","focus","preventScroll","hourInput","minuteInput","addEventListener","handleKeyDown","removeEventListener","event","includes","code","key","preventDefault","handleInputButtonClick","useCallback","currentTarget","name","MINUTE_UP","updateMinutes","MINUTE_DOWN","HOUR_UP","updateHours","HOUR_DOWN","handleFocus","target","select","handleChange","HOUR","length","MINUTE","handleBlur","parseInt","isNaN","valueToSet","convertHourTo12HourFormat","StringHelper","padValue","handleTimePeriodChange","AM","EPeriod","PM","getTestId","baseTestId","_jsx","StyledDiv","children","_jsxs","Container","inert","inertValue","InputSection","HourMinuteSection","InputContainer","SwitchButton","tabIndex","onClick","ChevronUpIcon","TimeInputBox","TimeInput","type","maxLength","pattern","ref","onFocus","onBlur","min","max","placeholder","ChevronDownIcon","DividerLabel","TimePeriodSection","TimePeriodToggle","checked","ControlSection","ControlButton","styleType","formattedValue","convertTo24HourFormat","disabled"],"mappings":"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"}
1	+ {"version":3,"file":"timepicker-dropdown.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport type { TimeFormat } from \"../../util/time-helper\";\nimport { EPeriod, TimeHelper } from \"../../util/time-helper\";\nimport { inertValue } from \"../accessibility\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput, InputBox } from \"../input-wrapper\";\nimport * as styles from \"./timepicker-dropdown.styles\";\n\nenum EInputButtonName {\n HOUR_UP = \"hour-up\",\n HOUR_DOWN = \"hour-down\",\n MINUTE_UP = \"minute-up\",\n MINUTE_DOWN = \"minute-down\",\n}\n\nenum EInputName {\n HOUR = \"hour\",\n MINUTE = \"minute\",\n}\n\nenum ETimePeriodToggleName {\n AM = \"am\",\n PM = \"pm\",\n}\n\ninterface TimepickerDropdownProps {\n id?: string;\n value: string \| undefined;\n show: boolean;\n format: TimeFormat;\n onChange: (value: string) => void;\n onCancel: () => void;\n}\n\nexport const TimepickerDropdown = ({\n id,\n value,\n show,\n format,\n onChange,\n onCancel,\n}: TimepickerDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const timeValues = TimeHelper.getTimeValues(format, value);\n\n const [hourValue, setHourValue] = useState<string>(timeValues.hour);\n const [minuteValue, setMinuteValue] = useState<string>(timeValues.minute);\n const [timePeriod, setTimePeriod] = useState<EPeriod>(timeValues.period);\n\n const hourInputRef = useRef<HTMLInputElement>(null);\n const minuteInputRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n // Focus hour input on display of dropdown\n if (show && hourInputRef.current) {\n hourInputRef.current.focus({ preventScroll: true });\n }\n\n if (show) {\n // reset time values especially when a Cancel or blur event happened\n const { hour, minute, period } = TimeHelper.getTimeValues(\n format,\n value\n );\n setHourValue(hour);\n setMinuteValue(minute);\n setTimePeriod(period);\n }\n }, [show, value, format]);\n\n useEffect(() => {\n const hourInput = hourInputRef.current;\n const minuteInput = minuteInputRef.current;\n\n if (hourInput) hourInput.addEventListener(\"keydown\", handleKeyDown);\n if (minuteInput) minuteInput.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n if (hourInput)\n hourInput.removeEventListener(\"keydown\", handleKeyDown);\n if (minuteInput)\n minuteInput.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleKeyDown = (event: KeyboardEvent) => {\n /*\n NOTE: This is the most deterministic way in handling\n * incorrect characters from being entered. The pattern\n * added in the input still allows some special characters\n * to slip through.\n /\n\n const permittableEventCodes = [\n \"Digit0\",\n \"Digit1\",\n \"Digit2\",\n \"Digit3\",\n \"Digit4\",\n \"Digit5\",\n \"Digit6\",\n \"Digit7\",\n \"Digit8\",\n \"Digit9\",\n \"Tab\",\n \"Backspace\",\n \"Delete\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"ArrowDown\",\n ];\n\n const permittableEventKeys = [\n \"Backspace\",\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n ];\n\n if (\n !permittableEventCodes.includes(event.code) &&\n !permittableEventKeys.includes(event.key) // mobile devices\n ) {\n event.preventDefault();\n }\n };\n\n const handleInputButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n switch (event.currentTarget.name) {\n case EInputButtonName.MINUTE_UP:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"add\")\n );\n break;\n case EInputButtonName.MINUTE_DOWN:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"minus\")\n );\n break;\n case EInputButtonName.HOUR_UP:\n setHourValue(TimeHelper.updateHours(hourValue, \"add\"));\n break;\n case EInputButtonName.HOUR_DOWN:\n setHourValue(TimeHelper.updateHours(hourValue, \"minus\"));\n break;\n default:\n break;\n }\n },\n [hourValue, minuteValue]\n );\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n switch (event.target.name) {\n case EInputName.HOUR:\n if (value.length <= 2) setHourValue(value);\n break;\n case EInputName.MINUTE:\n if (value.length <= 2) setMinuteValue(value);\n break;\n default:\n break;\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const value = parseInt(event.target.value);\n\n if (isNaN(value)) return;\n\n switch (event.target.name) {\n case EInputName.HOUR: {\n const valueToSet =\n value > 23 \|\| value < 0\n ? timeValues.hour\n : TimeHelper.convertHourTo12HourFormat(\n event.target.value\n );\n\n setHourValue(valueToSet);\n break;\n }\n case EInputName.MINUTE: {\n const valueToSet =\n value > 59 \|\| value < 0\n ? timeValues.minute\n : event.target.value;\n\n setMinuteValue(StringHelper.padValue(valueToSet));\n break;\n }\n default:\n break;\n }\n };\n\n const handleTimePeriodChange = (\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n switch (event.target.name) {\n case ETimePeriodToggleName.AM:\n setTimePeriod(EPeriod.AM);\n break;\n case ETimePeriodToggleName.PM:\n setTimePeriod(EPeriod.PM);\n break;\n default:\n break;\n }\n };\n\n const handleConfirm = () => {\n let formattedValue: string;\n\n if (format === \"24hr\") {\n formattedValue = TimeHelper.convertTo24HourFormat({\n hour: hourValue,\n minute: minuteValue,\n period: timePeriod,\n });\n } else {\n formattedValue = `${hourValue}:${minuteValue}${timePeriod}`;\n }\n\n onChange(formattedValue);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getTestId = (baseTestId: string): string => {\n return id ? `${id}-${baseTestId}` : baseTestId;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHourInput = () => (\n <div className={styles.inputContainer}>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"increase hour\"\n name={EInputButtonName.HOUR_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-increment-button\")}\n >\n <ChevronUpIcon />\n </ClickableIcon>\n <InputBox className={styles.timeInputBox}>\n <BasicInput\n className={styles.timeInput}\n aria-label=\"hour\"\n type=\"number\"\n name={EInputName.HOUR}\n id=\"hour\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={hourInputRef}\n value={hourValue}\n onFocus={handleFocus}\n onChange={handleChange}\n onBlur={handleBlur}\n min={1}\n max={12}\n placeholder=\"HH\"\n data-testid={getTestId(\"hour-input\")}\n />\n </InputBox>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"decrease hour\"\n name={EInputButtonName.HOUR_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-decrement-button\")}\n >\n <ChevronDownIcon />\n </ClickableIcon>\n </div>\n );\n\n const renderMinuteInput = () => (\n <div className={styles.inputContainer}>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"increase minute\"\n name={EInputButtonName.MINUTE_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-increment-button\")}\n >\n <ChevronUpIcon />\n </ClickableIcon>\n <InputBox className={styles.timeInputBox}>\n <BasicInput\n className={styles.timeInput}\n aria-label=\"minute\"\n type=\"number\"\n name={EInputName.MINUTE}\n id=\"minute\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={minuteInputRef}\n value={minuteValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n min={0}\n max={59}\n placeholder=\"MM\"\n data-testid={getTestId(\"minute-input\")}\n />\n </InputBox>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"decrease minute\"\n name={EInputButtonName.MINUTE_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change */\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-decrement-button\")}\n >\n <ChevronDownIcon />\n </ClickableIcon>\n </div>\n );\n\n const renderTimePeriodControl = () => (\n <div className={styles.timePeriodSection}>\n <Toggle\n className={styles.timePeriodToggle}\n checked={timePeriod === EPeriod.AM}\n name={ETimePeriodToggleName.AM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"am-toggle\")}\n aria-label=\"AM\"\n >\n AM\n </Toggle>\n <Toggle\n className={styles.timePeriodToggle}\n checked={timePeriod === EPeriod.PM}\n name={ETimePeriodToggleName.PM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"pm-toggle\")}\n aria-label=\"PM\"\n >\n PM\n </Toggle>\n </div>\n );\n\n return (\n <div className={styles.root}>\n <div\n className={styles.container}\n data-testid={getTestId(\"timepicker-dropdown\")}\n inert={inertValue(!show)}\n >\n <div className={styles.inputSection}>\n <div className={styles.hourMinuteSection}>\n {renderHourInput()}\n <Typography.BodyBL className={styles.dividerLabel}>\n :\n </Typography.BodyBL>\n {renderMinuteInput()}\n </div>\n {renderTimePeriodControl()}\n </div>\n <div className={styles.controlSection}>\n <Button\n className={styles.controlButton}\n sizeType=\"small\"\n type=\"button\"\n onClick={handleConfirm}\n disabled={hourValue === \"\" \|\| minuteValue === \"\"}\n data-testid={getTestId(\"confirm-button\")}\n >\n Done\n </Button>\n <Button\n className={styles.controlButton}\n sizeType=\"small\"\n type=\"button\"\n styleType=\"secondary\"\n onClick={onCancel}\n data-testid={getTestId(\"cancel-button\")}\n >\n Cancel\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["EInputButtonName","EInputName","ETimePeriodToggleName","id","value","show","format","onChange","onCancel","timeValues","TimeHelper","getTimeValues","hourValue","setHourValue","useState","hour","minuteValue","setMinuteValue","minute","timePeriod","setTimePeriod","period","hourInputRef","useRef","minuteInputRef","useEffect","current","focus","preventScroll","hourInput","minuteInput","addEventListener","handleKeyDown","removeEventListener","event","includes","code","key","preventDefault","handleInputButtonClick","useCallback","currentTarget","name","MINUTE_UP","updateMinutes","MINUTE_DOWN","HOUR_UP","updateHours","HOUR_DOWN","handleFocus","target","select","handleChange","HOUR","length","MINUTE","handleBlur","parseInt","isNaN","valueToSet","convertHourTo12HourFormat","StringHelper","padValue","handleTimePeriodChange","AM","EPeriod","PM","getTestId","baseTestId","_jsx","className","styles.root","children","_jsxs","styles.container","inert","inertValue","styles.inputSection","styles.hourMinuteSection","styles.inputContainer","ClickableIcon","styles.switchButton","tabIndex","onClick","ChevronUpIcon","InputBox","styles.timeInputBox","BasicInput","styles.timeInput","type","maxLength","pattern","ref","onFocus","onBlur","min","max","placeholder","ChevronDownIcon","Typography","BodyBL","styles.dividerLabel","styles.timePeriodSection","Toggle","styles.timePeriodToggle","checked","styles.controlSection","Button","styles.controlButton","sizeType","formattedValue","convertTo24HourFormat","disabled","styleType"],"mappings":"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"}

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.styles.js CHANGED Viewed

@@ -1,114 +1,2 @@
-"use strict";var e=require("styled-components"),i=require("../../button/button.js"),t=require("../../toggle/toggle.js"),r=require("../../typography/index.js"),n=require("../../v3_theme/index.js"),a=require("../clickable-icon/clickable-icon.js"),o=require("../input-wrapper/input-wrapper.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=d(e);const c=l.default.div`
-    overflow: hidden;
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        max-width: 100%;
-    }
-`,s=l.default.div`
-    position: relative;
-    width: 100%;
-    padding: ${n.V3_Spacing["spacing-8"]} ${n.V3_Spacing["spacing-20"]}
-        ${n.V3_Spacing["spacing-24"]} ${n.V3_Spacing["spacing-20"]};
-    display: flex;
-    flex-direction: column;
-    background: ${n.V3_Colour.bg};
-    border: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-    border-radius: ${n.V3_Radius.sm};
-`,p=l.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        flex-direction: column;
-        width: 100%;
-    }
-`,u=l.default.div`
-    display: flex;
-    justify-content: flex-end;
-    margin-top: ${n.V3_Spacing["spacing-16"]};
-    gap: ${n.V3_Spacing["spacing-8"]};
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        flex-direction: column-reverse; // FIXME: this breaks tab focus
-        margin-top: ${n.V3_Spacing["spacing-32"]};
-    }
-`,x=l.default.div`
-    display: flex;
-    align-items: center;
-    margin-right: ${n.V3_Spacing["spacing-32"]};
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        margin-right: 0;
-        width: 100%;
-    }
-`,g=l.default.div`
-    display: flex;
-    gap: ${n.V3_Spacing["spacing-8"]};
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-    }
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        flex-direction: row;
-        width: 100%;
-    }
-`,h=l.default.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        width: 6rem;
-    }
-`,f=l.default(a.ClickableIcon)`
-    width: 5rem;
-    padding: ${n.V3_Spacing["spacing-16"]} 0;
-    color: ${n.V3_Colour.icon};
-    svg {
-        height: 1rem;
-        width: 1rem;
-    }
-    &:hover {
-        color: ${n.V3_Colour["icon-hover"]};
-    }
-`,m=l.default(r.Typography.BodyBL)`
-    flex-shrink: 0;
-    width: 1.5rem;
-    text-align: center;
-`,y=l.default(o.InputBox)`
-    height: calc(3rem - 2px);
-    width: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        width: 100%;
-    }
-`,_=l.default(o.BasicInput)`
-    text-align: center;
-    width: 100%;
-    &:focus::placeholder {
-        color: transparent;
-    }
-`,V=l.default(t.Toggle)`
-    min-width: 5rem;
-    flex: 1;
-`,$=l.default(i.Button.Small)`
-    width: 7rem;
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        flex: 1;
-    }
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        width: 100%;
-    }
-`;exports.Container=s,exports.ControlButton=$,exports.ControlSection=u,exports.DividerLabel=m,exports.HourMinuteSection=x,exports.InputContainer=h,exports.InputSection=p,exports.StyledDiv=c,exports.SwitchButton=f,exports.TimeInput=_,exports.TimeInputBox=y,exports.TimePeriodSection=g,exports.TimePeriodToggle=V;
+"use strict";require("./timepicker-dropdown.styles_119l6k6.css");exports.container="c1o8b9oi",exports.controlButton="covfne3",exports.controlSection="c1ljojaz",exports.dividerLabel="d8auh4f",exports.hourMinuteSection="h1lh2mc9",exports.inputContainer="iew5x9r",exports.inputSection="i11svvg0",exports.root="ru5iz77",exports.switchButton="sn5alad",exports.timeInput="tr1n08z",exports.timeInputBox="t1b5fiv0",exports.timePeriodSection="t28scph",exports.timePeriodToggle="t1xgwy38";
 //# sourceMappingURL=timepicker-dropdown.styles.js.map

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker-dropdown.styles.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.styles.~~tsx~~"],"sourcesContent":["import ~~styled from \"styled-components\";\n\nimport~~ { ~~Button~~ } from \"~~../../button~~\";\~~nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\nimport {\~~n ~~V3_Border,\n V3_Colour,\n V3_MediaQuery,\n V3_Radius,\n V3_Spacing,\n} from~~ \~~"../../v3_theme\";\~~nimport { ~~ClickableIcon~~ } ~~from~~ ~~\"../clickable-icon\";\nimport { BasicInput~~, ~~InputBox~~ } from \"~~../input-wrapper/input-wrapper~~\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN WRAPPER\n// -----------------------------------------------------------------------------\nexport const ~~StyledDiv~~ = ~~styled.div~~`\n overflow: hidden;\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n max-width: 100%;\n }\n`;\n\nexport const ~~Container~~ = ~~styled.div~~`\n position: relative;\n width: 100%;\n padding: ${~~V3_Spacing~~[\"spacing-8\"]} ${~~V3_Spacing~~[\"spacing-20\"]}\n ${~~V3_Spacing~~[\"spacing-24\"]} ${~~V3_Spacing~~[\"spacing-20\"]};\n display: flex;\n flex-direction: column;\n background: ${~~V3_Colour~~[\"bg\"]};\n border: ${~~V3_Border~~[\"width-010\"]} ${~~V3_Border~~[\"solid\"]}\n ${~~V3_Colour~~[\"border\"]};\n border-radius: ${~~V3_Radius~~[\"sm\"]};\n`;\n\nexport const ~~InputSection~~ = ~~styled.div~~`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n flex-direction: column;\n width: 100%;\n }\n`;\n\nexport const ~~ControlSection~~ = ~~styled.div~~`\n display: flex;\n justify-content: flex-~~end~~;\n margin-top: ${~~V3_Spacing~~[\"spacing-16\"]};\n gap: ${~~V3_Spacing~~[\"spacing-8\"]};\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n flex-direction: column~~-reverse; // FIXME: this breaks tab focus\~~n margin-top: ${~~V3_Spacing~~[\"spacing-32\"]};\n }\n`;\n\n// -----------------------------------------------------------------------------\n// INPUT COMPONENTS\n// -----------------------------------------------------------------------------\nexport const ~~HourMinuteSection~~ = ~~styled.div~~`\n display: flex;\n align-items: center;\n margin-right: ${~~V3_Spacing~~[\"spacing-32\"]};\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n margin-right: 0;\n width: 100%;\n }\n`;\n\nexport const ~~TimePeriodSection~~ = ~~styled.div~~`\n display: flex;\n gap: ${~~V3_Spacing~~[\"spacing-8\"]};\n\n ${~~V3_MediaQuery~~.MaxWidth.lg} {\n flex-direction: column;\n }\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n flex-direction: row;\n width: 100%;\n }\n`;\n\nexport const ~~InputContainer~~ = ~~styled.div~~`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n width: 6rem;\n }\n`;\n\nexport const ~~SwitchButton~~ = ~~styled(ClickableIcon)~~`\n width: 5rem;\n padding: ${~~V3_Spacing~~[\"spacing-16\"]} 0;\n color: ${~~V3_Colour~~[\"icon\"]};\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n\n &:hover {\n color: ${~~V3_Colour~~[\"icon-hover\"]};\n }\n`;\n\nexport const ~~DividerLabel~~ = ~~styled(Typography.BodyBL)~~`\n flex-shrink: 0;\n width: 1.5rem;\n text-align: center;\n`;\n\nexport const ~~TimeInputBox~~ = ~~styled(InputBox)~~`\n height: calc(3rem - 2px);\n width: 5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n width: 100%;\n }\n`;\n\nexport const ~~TimeInput~~ = ~~styled(BasicInput)~~`\n text-align: center;\n width: 100%;\n\n &:focus::placeholder {\n color: transparent;\n }\n`;\n\nexport const ~~TimePeriodToggle~~ = ~~styled(Toggle)~~`\n min-width: 5rem;\n flex: 1;\n`;\n\n// -----------------------------------------------------------------------------\n// CONTROL COMPONENTS\n// -----------------------------------------------------------------------------\nexport const ~~ControlButton~~ = ~~styled(Button.Small)~~`\n width: 7rem;\n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n flex: 1;\n }\n\n ${~~V3_MediaQuery~~.MaxWidth.xxs} {\n width: 100%;\n }\n`;\n"],"names":["StyledDiv","styled","div","V3_MediaQuery","MaxWidth","xxs","Container","V3_Spacing","V3_Colour","V3_Border","V3_Radius","InputSection","ControlSection","HourMinuteSection","TimePeriodSection","lg","InputContainer","SwitchButton","ClickableIcon","DividerLabel","Typography","BodyBL","TimeInputBox","InputBox","TimeInput","BasicInput","TimePeriodToggle","Toggle","ControlButton","Button","Small","sm"],"mappings":"~~uXAsBO~~,~~MAAMA~~,~~EAAYC~~,~~EAAAA~~,~~QAAOC~~,~~GAAG;;;MAG7BC~~,~~EAAAA~~,~~cAAcC~~,~~SAASC;;;EAKhBC~~,EAAYL,EAAAA,QAAOC,GAAG;;;eAGpBK,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;UAC3CA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;kBAG/BC,EAAAA,UAAc;cAClBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;qBACPE,EAAAA,UAAc;EAGtBC,EAAeV,EAAAA,QAAOC,GAAG;;;;;MAKhCC,EAAAA,cAAcC,SAASC;;;;EAMhBO,EAAiBX,EAAAA,QAAOC,GAAG;;;kBAGtBK,EAAAA,WAAW;WAClBA,EAAAA,WAAW;;MAEhBJ,EAAAA,cAAcC,SAASC;;sBAEPE,EAAAA,WAAW;;EAOpBM,EAAoBZ,EAAAA,QAAOC,GAAG;;;oBAGvBK,EAAAA,WAAW;;MAEzBJ,EAAAA,cAAcC,SAASC;;;;EAMhBS,EAAoBb,EAAAA,QAAOC,GAAG;;WAEhCK,EAAAA,WAAW;;MAEhBJ,EAAAA,cAAcC,SAASW;;;;MAIvBZ,EAAAA,cAAcC,SAASC;;;;EAMhBW,EAAiBf,EAAAA,QAAOC,GAAG;;;;;MAKlCC,EAAAA,cAAcC,SAASC;;;EAKhBY,EAAehB,EAAAA,QAAOiB,EAAAA,cAAc;;eAElCX,EAAAA,WAAW;aACbC,EAAAA,UAAgB;;;;;;;;iBAQZA,EAAAA,UAAU;;EAIdW,EAAelB,EAAAA,QAAOmB,aAAWC,OAAO;;;;EAMxCC,EAAerB,EAAAA,QAAOsB,EAAAA,SAAS;;;;;;;MAOtCpB,EAAAA,cAAcC,SAASC;;;EAKhBmB,EAAYvB,EAAAA,QAAOwB,EAAAA,WAAW;;;;;;;EAS9BC,EAAmBzB,EAAAA,QAAO0B,EAAAA,OAAO;;;EAQjCC,EAAgB3B,EAAAA,QAAO4B,SAAOC,MAAM;;;MAG3C3B,EAAAA,cAAcC,SAAS2B;;;;MAIvB5B,EAAAA,cAAcC,SAASC;;;"}
1	+ {"version":3,"file":"timepicker-dropdown.styles.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN WRAPPER\n// -----------------------------------------------------------------------------\nexport const root = css`\n overflow: hidden;\n\n ${MediaQuery.MaxWidth.xxs} {\n max-width: 100%;\n }\n`;\n\nexport const container = css`\n position: relative;\n width: 100%;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]}\n ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n display: flex;\n flex-direction: column;\n background: ${Colour[\"bg\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const inputSection = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.xxs} {\n flex-direction: column;\n width: 100%;\n }\n`;\n\nexport const controlSection = css`\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-start;\n margin-top: ${Spacing[\"spacing-16\"]};\n gap: ${Spacing[\"spacing-8\"]};\n\n ${MediaQuery.MaxWidth.xxs} {\n flex-direction: column;\n margin-top: ${Spacing[\"spacing-32\"]};\n }\n`;\n\n// -----------------------------------------------------------------------------\n// INPUT COMPONENTS\n// -----------------------------------------------------------------------------\nexport const hourMinuteSection = css`\n display: flex;\n align-items: center;\n margin-right: ${Spacing[\"spacing-32\"]};\n\n ${MediaQuery.MaxWidth.xxs} {\n margin-right: 0;\n width: 100%;\n }\n`;\n\nexport const timePeriodSection = css`\n display: flex;\n gap: ${Spacing[\"spacing-8\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n flex-direction: row;\n width: 100%;\n }\n`;\n\nexport const inputContainer = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${MediaQuery.MaxWidth.xxs} {\n width: 6rem;\n }\n`;\n\nexport const switchButton = css`\n width: 5rem;\n padding: ${Spacing[\"spacing-16\"]} 0;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const dividerLabel = css`\n flex-shrink: 0;\n width: 1.5rem;\n text-align: center;\n`;\n\nexport const timeInputBox = css`\n height: calc(3rem - 2px);\n width: 5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${MediaQuery.MaxWidth.xxs} {\n width: 100%;\n }\n`;\n\nexport const timeInput = css`\n text-align: center;\n width: 100%;\n\n &:focus::placeholder {\n color: transparent;\n }\n`;\n\nexport const timePeriodToggle = css`\n min-width: 5rem;\n flex: 1;\n`;\n\n// -----------------------------------------------------------------------------\n// CONTROL COMPONENTS\n// -----------------------------------------------------------------------------\nexport const controlButton = css`\n width: 7rem;\n\n ${MediaQuery.MaxWidth.sm} {\n flex: 1;\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n width: 100%;\n }\n`;\n"],"names":[],"mappings":"6HAmBsB,iCA4HI,iCArGC,gCAkEF,oCAlDK,kCAyBH,+BApDF,wBApBR,+BAkFQ,4BAiCH,+BAZG,qCA7CK,mCAkED"}

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.styles_119l6k6.css ADDED Viewed

@@ -0,0 +1,13 @@
+@layer fds{.ru5iz77{overflow:hidden;}:where(body.fds-breakpoint-xxs-max) .ru5iz77{max-width:100%;}
+.c1o8b9oi{position:relative;width:100%;padding:var(--fds-spacing-8) var(--fds-spacing-20) var(--fds-spacing-24) var(--fds-spacing-20);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
+.i11svvg0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-xxs-max) .i11svvg0{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.c1ljojaz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:var(--fds-spacing-16);gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-xxs-max) .c1ljojaz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-32);}
+.h1lh2mc9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-32);}:where(body.fds-breakpoint-xxs-max) .h1lh2mc9{margin-right:0;width:100%;}
+.t28scph{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-lg-max) .t28scph{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-xxs-max) .t28scph{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;}
+.iew5x9r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-xxs-max) .iew5x9r{width:6rem;}
+.sn5alad{width:5rem;padding:var(--fds-spacing-16) 0;color:var(--fds-colour-icon);}.sn5alad svg{height:1rem;width:1rem;}.sn5alad:hover{color:var(--fds-colour-icon-hover);}
+.d8auh4f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;text-align:center;}
+.t1b5fiv0{height:calc(3rem - 2px);width:5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-xxs-max) .t1b5fiv0{width:100%;}
+.tr1n08z{text-align:center;width:100%;}.tr1n08z:focus::-webkit-input-placeholder{color:transparent;}.tr1n08z:focus::-moz-placeholder{color:transparent;}.tr1n08z:focus:-ms-input-placeholder{color:transparent;}.tr1n08z:focus::placeholder{color:transparent;}
+.t1xgwy38{min-width:5rem;-webkit-flex:1;-ms-flex:1;flex:1;}
+.covfne3{width:7rem;}:where(body.fds-breakpoint-sm-max) .covfne3{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-xxs-max) .covfne3{width:100%;}}