@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/cjs/time-slot-bar/time-slot-bar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),l=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),a=require("../util/time-helper.js"),o=require("./helper.js"),s=require("./time-slot-bar.styles.js"),n=require("../shared/accessibility/index.js");const d=l.forwardRef(((d,c)=>{const{"data-testid":u,className:m,variant:h="default",startTime:f,endTime:p,slots:T,onSlotClick:b,onClick:x,styleAttributes:$,initialScrollTime:g,roundInitialScrollTime:j=!0}=d,v=l.useRef(null),[C,k]=l.useState(0),[B,S]=l.useState(0),H=s.getCellWidth(h),y=o.TimeSlotBarHelper.adjustTimeForMarker(f,"start"),w=o.TimeSlotBarHelper.adjustTimeForMarker(p,"end"),W=2.5*H;l.useImperativeHandle(c,(()=>({resetScroll:E})));const{summary:L,computedSlots:q}=l.useMemo((()=>o.TimeSlotBarHelper.processSlots({start:y,end:w},T,h)),[y,w,T,h]);l.useEffect((()=>{const e=v.current;return e&&(e.addEventListener("scroll",I),S(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",I)}}),[]),l.useEffect((()=>{E()}),[g,H,f,p]);const I=()=>{v.current&&k(v.current.scrollLeft)},M=e=>{v.current&&v.current.scrollBy({left:"left"===e?-W:W,behavior:"smooth"})};i.useResizeDetector({onResize:()=>{v.current&&S(v.current.clientWidth)},targetRef:v,refreshMode:"debounce",refreshRate:50});const R=e=>e<=H/2,A=e=>{if(u)return`${u}-${e}`},F=(e,r,t)=>{const l=0===e.minute();if("default"===t)return l;return l&&(r?e.hour()%2==0:e.hour()%2==1)},E=()=>{if(g&&v.current&&H>0){const e=a.TimeHelper.calculateScrollPosition({scrollTime:g,minTime:y,maxTime:w,interval:30,intervalWidth:H,options:{roundToInterval:j}});null!==e&&(v.current.scrollLeft=e)}},_=e=>h===e;return r.jsxs(s.Container,{className:m,children:[r.jsxs(s.TimeSlotBarContainer,{"data-testid":u,ref:v,$variant:h,children:[r.jsx(s.TimeMarkerWrapper,{"data-testid":A("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],l=t.default(y,"HH:mm"),i=t.default(w,"HH:mm"),a=l.hour()%2==0;for(let t=l;t.isBefore(i);t=t.add(30,"minute")){const l=F(t,a,h);e.push(r.jsx(s.TimeMarker,{"data-testid":`${t.format("HH:mm")}-marker`,$isLongMarker:l,$variant:h,children:l&&r.jsx(s.TimeLabel,{weight:"semibold",children:o.TimeSlotBarHelper.formatHourlyDisplay(t.format("HH:mm"))})},t.format("HH:mm")))}return e})()}),r.jsx("div",{role:"grid","aria-label":L,tabIndex:0,children:r.jsxs(s.TimeSlotWrapper,{"data-testid":A("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!$)return;const{backgroundColor:e,backgroundColor2:t,hoverBackgroundColor:l,hoverBackgroundColor2:i,styleType:a="default"}=$,n=o.TimeSlotBarHelper.calculateWidth(y,w,H),d=!!x&&_("default");return r.jsxs(r.Fragment,{children:[r.jsx(s.TimeSlotBorder,{$variant:h}),r.jsx(s.TimeSlot,{"data-testid":A("default-timeslot"),$width:n,$variant:h,$left:0,$styleType:a,$bgColor:e,$bgColor2:t,$hoverBgColor:l,$hoverBgColor2:i,$clickable:d,onClick:d?x:void 0},"default-timeslot")]})})(),q.map((t=>{const{id:l,startTime:i,endTime:a,label:d,clickable:c=!0,styleAttributes:u,ariaLabel:m}=t,{color:f,styleType:T="default",backgroundColor:x,backgroundColor2:$,hoverBackgroundColor:g,hoverBackgroundColor2:j}=u,v=o.TimeSlotBarHelper.calculateWidth(i,a,H),C=o.TimeSlotBarHelper.calculateWidth(y,i,H),k=c&&"default"===h,B=_("default")&&d,S=r=>t=>{t.stopPropagation();const{ariaLabel:l}=r,i=e.__rest(r,["ariaLabel"]);k&&b(i)};return r.jsxs("div",{role:"gridcell",children:[r.jsx(s.TimeSlotBorder,{"data-testid":"start-border",$variant:h,style:{left:`${C}px`}}),r.jsxs(s.TimeSlot,{"data-testid":A(`${l}-timeslot`),$width:v,$left:C,$styleType:T,$variant:h,$bgColor:x,$bgColor2:$,$hoverBgColor:g,$hoverBgColor2:j,$clickable:k,onClick:S(t),children:[!!m&&r.jsx(n.VisuallyHidden,{children:r.jsx("button",{type:"button","aria-disabled":!k,"aria-label":m,onClick:S(t)})}),B&&r.jsx(s.CellText,{$slotWidth:v,$color:f,weight:"semibold","aria-hidden":!m,children:R(v)?"...":d})]}),p!==a&&r.jsx(s.TimeSlotBorder,{"data-testid":"end-border",$variant:h,style:{left:`${C+v}px`}})]},l)}))]})})]}),r.jsx(r.Fragment,{children:C>0&&r.jsx(s.ArrowButton,{"data-testid":A("arrow-left"),"aria-hidden":!0,tabIndex:-1,$direction:"left",$variant:h,focusHighlight:!1,focusOutline:"none",onClick:()=>{M("left")},children:r.jsx(s.ArrowIconLeft,{})})}),C+B<o.TimeSlotBarHelper.calculateWidth(y,w,H)?r.jsx(s.ArrowButton,{"data-testid":A("arrow-right"),"aria-hidden":!0,tabIndex:-1,$direction:"right",$variant:h,focusHighlight:!1,focusOutline:"none",onClick:()=>{M("right")},children:r.jsx(s.ArrowIconRight,{})}):r.jsx(r.Fragment,{})]})}));exports.TimeSlotBar=d;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),l=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../external/dayjs/dayjs.min.js"),o=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),n=require("../shared/accessibility/index.js"),d=require("../shared/clickable-icon/clickable-icon.js"),c=require("../shared/time-slot/time-slot.js"),u=require("../typography/index.js"),m=require("../util/time-helper.js"),f=require("./helper.js"),h=require("./time-slot-bar.styles.js"),p=require("./time-slot-divider.js"),j=require("./time-slot-item.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=b(a);const g=o.forwardRef(((a,b)=>{const{"data-testid":g,className:T,variant:x="default",startTime:k,endTime:y,slots:C,onSlotClick:B,onClick:S,styleAttributes:H,initialScrollTime:q,roundInitialScrollTime:w=!0}=a,I=o.useRef(null),[N,M]=o.useState(0),[W,L]=o.useState(0),R=f.getCellWidth(x),D=f.TimeSlotBarHelper.adjustTimeForMarker(k,"start"),$=f.TimeSlotBarHelper.adjustTimeForMarker(y,"end"),E=2.5*R;o.useImperativeHandle(b,(()=>({resetScroll:X})));const{summary:_,computedSlots:z}=o.useMemo((()=>f.TimeSlotBarHelper.processSlots({start:D,end:$},C,x)),[D,$,C,x]);o.useEffect((()=>{const e=I.current;return e&&(e.addEventListener("scroll",F),L(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",F)}}),[]),o.useEffect((()=>{X()}),[q,R,k,y]);const F=()=>{I.current&&M(I.current.scrollLeft)};s.useResizeDetector({onResize:()=>{I.current&&L(I.current.clientWidth)},targetRef:I,refreshMode:"debounce",refreshRate:50});const O=e=>e<=R/2,A=e=>{if(g)return`${g}-${e}`},P=(e,r,t)=>{const l=0===e.minute();if("default"===t)return l;return l&&(r?e.hour()%2==0:e.hour()%2==1)},X=()=>{if(q&&I.current&&R>0){const e=m.TimeHelper.calculateScrollPosition({scrollTime:q,minTime:D,maxTime:$,interval:30,intervalWidth:R,options:{roundToInterval:w}});null!==e&&(I.current.scrollLeft=e)}},V=e=>x===e,G=e=>{const a="left"===e,i=f.TimeSlotBarHelper.calculateWidth(D,$,R);if(!(a?N>0:N+W<i))return null;const o=a?h.arrowButtonLeft:h.arrowButtonRight,s="default"===x?h.arrowButtonDefault:h.arrowButtonMinified,n=a?r.jsx(t.ChevronLeftIcon,{className:h.arrowIcon}):r.jsx(l.ChevronRightIcon,{className:h.arrowIcon});return r.jsx(d.ClickableIcon,{"data-testid":A(`arrow-${e}`),"aria-hidden":!0,tabIndex:-1,className:v.default(h.arrowButton,o,s),focusHighlight:!1,focusOutline:"none",onClick:()=>{(e=>{I.current&&I.current.scrollBy({left:"left"===e?-E:E,behavior:"smooth"})})(e)},children:n})};return r.jsxs("div",{className:v.default(h.container,T),children:[r.jsxs("div",{"data-testid":g,ref:I,className:v.default(h.timeSlotBarContainer,"default"===x?h.containerDefault:h.containerMinified),children:[r.jsx("div",{className:h.timeMarkerWrapper,"data-testid":A("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],t=i.default(D,"HH:mm"),l=i.default($,"HH:mm"),a=t.hour()%2==0;for(let i=t;i.isBefore(l);i=i.add(30,"minute")){const t=P(i,a,x);e.push(r.jsx("div",{"data-testid":`${i.format("HH:mm")}-marker`,className:v.default(h.timeMarker,"default"===x?h.timeMarkerDefault:h.timeMarkerMinified,t&&h.timeMarkerLong),children:t&&r.jsx(u.Typography.BodyXS,{className:h.timeLabel,weight:"semibold",children:f.TimeSlotBarHelper.formatHourlyDisplay(i.format("HH:mm"))})},i.format("HH:mm")))}return e})()}),r.jsx("div",{role:"grid","aria-label":_,tabIndex:0,children:r.jsxs("div",{className:h.timeSlotWrapper,"data-testid":A("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!H)return;const{backgroundColor:e,backgroundColor2:t,hoverBackgroundColor:l,hoverBackgroundColor2:a,styleType:i="default"}=H,o=f.TimeSlotBarHelper.calculateWidth(D,$,R),s=!!S&&V("default");return r.jsxs(r.Fragment,{children:[r.jsx(p.default,{variant:x}),r.jsx(j.default,{variant:x,dataTestId:A("default-timeslot"),slotWidth:o,slotOffset:0,onClick:s?S:void 0,children:r.jsx(c.TimeSlot,{className:h.timeSlotItemContent,styleType:i,bgColor:e,bgColor2:t,hoverBgColor:l,hoverBgColor2:a,clickable:s})},"default-timeslot")]})})(),z.map((t=>{const{id:l,startTime:a,endTime:i,label:o,clickable:s=!0,styleAttributes:d,ariaLabel:m}=t,{color:b,styleType:v="default",backgroundColor:g,backgroundColor2:T,hoverBackgroundColor:k,hoverBackgroundColor2:C}=d,S=f.TimeSlotBarHelper.calculateWidth(a,i,R),H=f.TimeSlotBarHelper.calculateWidth(D,a,R),q=s&&"default"===x,w=V("default")&&o,I=r=>t=>{t.stopPropagation();const{ariaLabel:l}=r,a=e.__rest(r,["ariaLabel"]);q&&B(a)};return r.jsxs("div",{role:"gridcell",children:[r.jsx(p.default,{variant:x,left:H,dataTestId:"start-border"}),r.jsx(j.default,{variant:x,dataTestId:A(`${l}-timeslot`),slotWidth:S,slotOffset:H,color:b,onClick:I(t),children:r.jsxs(c.TimeSlot,{className:h.timeSlotItemContent,styleType:v,bgColor:g,bgColor2:T,hoverBgColor:k,hoverBgColor2:C,clickable:q,children:[!!m&&r.jsx(n.VisuallyHidden,{children:r.jsx("button",{type:"button","aria-disabled":!q,"aria-label":m,onClick:I(t)})}),w&&r.jsx(u.Typography.BodyXS,{className:h.cellText,weight:"semibold","aria-hidden":!m,children:O(S)?"...":o})]})}),y!==i&&r.jsx(p.default,{variant:x,dataTestId:"end-border",left:H+S})]},l)}))]})})]}),G("left"),G("right")]})}));exports.TimeSlotBar=g;
 //# sourceMappingURL=time-slot-bar.js.map

package/cjs/time-slot-bar/time-slot-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.js","sources":["../../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { Dayjs } from \"dayjs\";\nimport {\n    type MouseEvent,\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { TimeSlotBarHelper } from \"./helper\";\nimport {\n    ArrowButton,\n    ArrowIconLeft,\n    ArrowIconRight,\n    CellText,\n    Container,\n    TimeLabel,\n    TimeMarker,\n    TimeMarkerWrapper,\n    TimeSlot,\n    TimeSlotBarContainer,\n    TimeSlotBorder,\n    TimeSlotWrapper,\n    getCellWidth,\n} from \"./time-slot-bar.styles\";\nimport {\n    Direction,\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <TimeMarker\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    $isLongMarker={displayLongTimeMarker}\n                    $variant={variant}\n                >\n                    {displayLongTimeMarker && (\n                        <TimeLabel weight=\"semibold\">\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </TimeLabel>\n                    )}\n                </TimeMarker>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotBorder $variant={variant} />\n                <TimeSlot\n                    key={\"default-timeslot\"}\n                    data-testid={getDataTestId(\"default-timeslot\")}\n                    $width={slotWidth}\n                    $variant={variant}\n                    $left={0}\n                    $styleType={styleType}\n                    $bgColor={backgroundColor}\n                    $bgColor2={backgroundColor2}\n                    $hoverBgColor={hoverBackgroundColor}\n                    $hoverBgColor2={hoverBackgroundColor2}\n                    $clickable={isClickable}\n                    onClick={isClickable ? onClick : undefined}\n                />\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotBorder\n                        data-testid=\"start-border\"\n                        $variant={variant}\n                        style={{\n                            left: `${slotOffset}px`,\n                        }}\n                    />\n                    <TimeSlot\n                        data-testid={getDataTestId(`${id}-timeslot`)}\n                        $width={slotWidth}\n                        $left={slotOffset}\n                        $styleType={styleType}\n                        $variant={variant}\n                        $bgColor={backgroundColor}\n                        $bgColor2={backgroundColor2}\n                        $hoverBgColor={hoverBackgroundColor}\n                        $hoverBgColor2={hoverBackgroundColor2}\n                        $clickable={isClickable}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        {!!ariaLabel && (\n                            <VisuallyHidden>\n                                <button\n                                    type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                    aria-disabled={!isClickable}\n                                    aria-label={ariaLabel}\n                                    onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                />\n                            </VisuallyHidden>\n                        )}\n\n                        {showLabel && (\n                            <CellText\n                                $slotWidth={slotWidth}\n                                $color={color}\n                                weight={\"semibold\"}\n                                aria-hidden={!ariaLabel}\n                            >\n                                {showFullEllipsis(slotWidth) ? \"...\" : label}\n                            </CellText>\n                        )}\n                    </TimeSlot>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotBorder\n                            data-testid=\"end-border\"\n                            $variant={variant}\n                            style={{\n                                left: `${slotOffset + slotWidth}px`,\n                            }}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButtonLeft = () => {\n        return (\n            <>\n                {/* Show the left ArrowButton when the scroll position is greater than 0 */}\n                {scrollPosition > 0 && (\n                    <ArrowButton\n                        data-testid={getDataTestId(\"arrow-left\")}\n                        aria-hidden\n                        tabIndex={-1}\n                        $direction={\"left\"}\n                        $variant={variant}\n                        focusHighlight={false}\n                        focusOutline=\"none\"\n                        onClick={() => {\n                            handleArrowButtonClick(\"left\");\n                        }}\n                    >\n                        <ArrowIconLeft />\n                    </ArrowButton>\n                )}\n            </>\n        );\n    };\n\n    const renderArrowButtonRight = () => {\n        // Show the right ArrowButton when the scroll position is less than the maximum possible scroll value\n        if (\n            scrollPosition + clientWidth <\n            TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                adjustedEndTime,\n                cellWidth\n            )\n        ) {\n            return (\n                <ArrowButton\n                    data-testid={getDataTestId(\"arrow-right\")}\n                    aria-hidden\n                    tabIndex={-1}\n                    $direction={\"right\"}\n                    $variant={variant}\n                    focusHighlight={false}\n                    focusOutline=\"none\"\n                    onClick={() => {\n                        handleArrowButtonClick(\"right\");\n                    }}\n                >\n                    <ArrowIconRight />\n                </ArrowButton>\n            );\n        }\n\n        return <></>;\n    };\n\n    return (\n        <Container className={className}>\n            <TimeSlotBarContainer\n                data-testid={testId}\n                ref={barRef}\n                $variant={variant}\n            >\n                <TimeMarkerWrapper\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </TimeMarkerWrapper>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <TimeSlotWrapper\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </TimeSlotWrapper>\n                </div>\n            </TimeSlotBarContainer>\n            {renderArrowButtonLeft()}\n            {renderArrowButtonRight()}\n        </Container>\n    );\n};\n\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","handleArrowButtonClick","direction","scrollBy","left","behavior","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","_jsxs","Container","children","TimeSlotBarContainer","$variant","_jsx","TimeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","TimeMarker","format","$isLongMarker","TimeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","tabIndex","TimeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","calculateWidth","isClickable","TimeSlotBorder","TimeSlot","$width","$left","$styleType","$bgColor","$hoverBgColor","$hoverBgColor2","undefined","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","clickable","ariaLabel","color","slotOffset","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","style","$bgColor2","$clickable","VisuallyHidden","type","CellText","$slotWidth","$color","_Fragment","ArrowButton","focusHighlight","focusOutline","ArrowIconLeft","$direction","ArrowIconRight"],"mappings":"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"}
+{"version":3,"file":"time-slot-bar.js","sources":["../../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs, { type Dayjs } from \"dayjs\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { getCellWidth, TimeSlotBarHelper } from \"./helper\";\nimport type { Direction } from \"./internal-types\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport TimeSlotDivider from \"./time-slot-divider\";\nimport TimeSlotItem from \"./time-slot-item\";\nimport type {\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <div\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    className={clsx(\n                        styles.timeMarker,\n                        variant === \"default\"\n                            ? styles.timeMarkerDefault\n                            : styles.timeMarkerMinified,\n                        displayLongTimeMarker && styles.timeMarkerLong\n                    )}\n                >\n                    {displayLongTimeMarker && (\n                        <Typography.BodyXS\n                            className={styles.timeLabel}\n                            weight=\"semibold\"\n                        >\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </Typography.BodyXS>\n                    )}\n                </div>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotDivider variant={variant} />\n                <TimeSlotItem\n                    key={\"default-timeslot\"}\n                    variant={variant}\n                    dataTestId={getDataTestId(\"default-timeslot\")}\n                    slotWidth={slotWidth}\n                    slotOffset={0}\n                    onClick={isClickable ? onClick : undefined}\n                >\n                    <TimeSlot\n                        className={styles.timeSlotItemContent}\n                        styleType={styleType}\n                        bgColor={backgroundColor}\n                        bgColor2={backgroundColor2}\n                        hoverBgColor={hoverBackgroundColor}\n                        hoverBgColor2={hoverBackgroundColor2}\n                        clickable={isClickable}\n                    />\n                </TimeSlotItem>\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: React.MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotDivider\n                        variant={variant}\n                        left={slotOffset}\n                        dataTestId=\"start-border\"\n                    />\n                    <TimeSlotItem\n                        variant={variant}\n                        dataTestId={getDataTestId(`${id}-timeslot`)}\n                        slotWidth={slotWidth}\n                        slotOffset={slotOffset}\n                        color={color}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        <TimeSlot\n                            className={styles.timeSlotItemContent}\n                            styleType={styleType}\n                            bgColor={backgroundColor}\n                            bgColor2={backgroundColor2}\n                            hoverBgColor={hoverBackgroundColor}\n                            hoverBgColor2={hoverBackgroundColor2}\n                            clickable={isClickable}\n                        >\n                            {!!ariaLabel && (\n                                <VisuallyHidden>\n                                    <button\n                                        type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                        aria-disabled={!isClickable}\n                                        aria-label={ariaLabel}\n                                        onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                    />\n                                </VisuallyHidden>\n                            )}\n\n                            {showLabel && (\n                                <Typography.BodyXS\n                                    className={styles.cellText}\n                                    weight={\"semibold\"}\n                                    aria-hidden={!ariaLabel}\n                                >\n                                    {showFullEllipsis(slotWidth)\n                                        ? \"...\"\n                                        : label}\n                                </Typography.BodyXS>\n                            )}\n                        </TimeSlot>\n                    </TimeSlotItem>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotDivider\n                            variant={variant}\n                            dataTestId=\"end-border\"\n                            left={slotOffset + slotWidth}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButton = (direction: Direction) => {\n        const isLeft = direction === \"left\";\n        const totalScrollableWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n        const hasContentOnLeft = scrollPosition > 0;\n        const hasContentOnRight =\n            scrollPosition + clientWidth < totalScrollableWidth;\n        const shouldShowArrow = isLeft ? hasContentOnLeft : hasContentOnRight;\n\n        if (!shouldShowArrow) return null;\n\n        const directionClass = isLeft\n            ? styles.arrowButtonLeft\n            : styles.arrowButtonRight;\n        const variantClass =\n            variant === \"default\"\n                ? styles.arrowButtonDefault\n                : styles.arrowButtonMinified;\n        const arrowIcon = isLeft ? (\n            <ChevronLeftIcon className={styles.arrowIcon} />\n        ) : (\n            <ChevronRightIcon className={styles.arrowIcon} />\n        );\n\n        return (\n            <ClickableIcon\n                data-testid={getDataTestId(`arrow-${direction}`)}\n                aria-hidden\n                tabIndex={-1}\n                className={clsx(\n                    styles.arrowButton,\n                    directionClass,\n                    variantClass\n                )}\n                focusHighlight={false}\n                focusOutline=\"none\"\n                onClick={() => {\n                    handleArrowButtonClick(direction);\n                }}\n            >\n                {arrowIcon}\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.container, className)}>\n            <div\n                data-testid={testId}\n                ref={barRef}\n                className={clsx(\n                    styles.timeSlotBarContainer,\n                    variant === \"default\"\n                        ? styles.containerDefault\n                        : styles.containerMinified\n                )}\n            >\n                <div\n                    className={styles.timeMarkerWrapper}\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </div>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <div\n                        className={styles.timeSlotWrapper}\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </div>\n                </div>\n            </div>\n            {renderArrowButton(\"left\")}\n            {renderArrowButton(\"right\")}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A horizontally scrollable timeline bar that visualises time slots across a\n * defined time range.\n *\n * Use `TimeSlotBar` to display availability, bookings, or schedule occupancy\n * as coloured cells on a shared time axis.\n * @keywords availability, booking, occupancy, reservation, schedule\n */\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","renderArrowButton","direction","isLeft","totalScrollableWidth","calculateWidth","directionClass","styles.arrowButtonLeft","styles.arrowButtonRight","variantClass","styles.arrowButtonDefault","styles.arrowButtonMinified","arrowIcon","_jsx","ChevronLeftIcon","styles.arrowIcon","ChevronRightIcon","ClickableIcon","tabIndex","clsx","styles.arrowButton","focusHighlight","focusOutline","scrollBy","left","behavior","handleArrowButtonClick","children","_jsxs","styles.container","styles.timeSlotBarContainer","styles.containerDefault","styles.containerMinified","styles.timeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","format","styles.timeMarker","styles.timeMarkerDefault","styles.timeMarkerMinified","styles.timeMarkerLong","Typography","BodyXS","styles.timeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","styles.timeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","isClickable","_Fragment","TimeSlotDivider","TimeSlotItem","dataTestId","slotOffset","undefined","TimeSlot","styles.timeSlotItemContent","bgColor","bgColor2","hoverBgColor","hoverBgColor2","clickable","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","ariaLabel","color","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","VisuallyHidden","type","styles.cellText"],"mappings":"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"}

package/cjs/time-slot-bar/time-slot-bar.styles.js

@@ -1,128 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-left"),o=require("@lifesg/react-icons/chevron-right"),r=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),i=require("../theme/index.js"),l=require("../typography/typography.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const n=1.25,d=e=>"minified"===e?12:40,g=e=>"minified"===e?12:40,p=s.default.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-`,$=s.default(t.ClickableIcon)`
-    z-index: 2;
-    position: absolute;
-    bottom: ${({$variant:e})=>"default"===e?"0.25rem":"0rem"};
-    background-color: ${i.Colour.bg};
-    box-shadow: ${i.Shadow["md-strong"]};
-    border-radius: 100%;
-    padding: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-
-    ${e=>"right"===e.$direction?r.css`
-                  right: 0;
-              `:r.css`
-                  left: 0;
-              `}
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:focus {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-`,c=s.default(o.ChevronRightIcon)`
-    width: 1rem;
-    height: 1rem;
-    color: ${i.Colour["icon-primary"]};
-`,h=s.default(e.ChevronLeftIcon)`
-    font-size: 1rem;
-    color: ${i.Colour["icon-primary"]};
-`,u=s.default.div`
-    overflow: hidden;
-    flex-grow: 1;
-    position: relative;
-    height: ${({$variant:e})=>`${20+g(e)}px`};
-`,b=s.default.div`
-    position: relative;
-    white-space: nowrap;
-    height: ${n}rem;
-`,f=s.default.div`
-    display: flex;
-    white-space: nowrap;
-`,x=s.default.div`
-    display: inline-block;
-    width: ${({$variant:e})=>`${d(e)}px`};
-    position: relative;
-    border-left: ${i.Border["width-010"]} ${i.Border.solid}
-        ${i.Colour["border-stronger"]};
-    ${e=>{let o=0;switch(e.$variant){case"default":o=e.$isLongMarker?n:.625;break;case"minified":o=e.$isLongMarker?n:0;break;default:o=0}return r.css`
-            height: ${o}rem;
-        `}}
-`,C=s.default(l.Typography.BodyXS)`
-    color: ${i.Colour["text-subtle"]};
-    position: absolute;
-    bottom: 10%;
-    left: 10%;
-`,v=s.default.div`
-    ${e=>"vertical"===e.$type?r.css`
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                margin: 1px 0px;
-            `:r.css`
-                position: absolute;
-                height: ${g(e.$variant)}px;
-                width: ${e.$width}px;
-                left: ${e.$left}px;
-            `}
-    background-color: ${({$bgColor:e})=>e};
-    cursor: ${({$clickable:e})=>e?"pointer":"default"};
-    ${({$hoverBgColor:e,$clickable:o})=>e&&o&&r.css`
-            &:hover {
-                background-color: ${e};
-            }
-        `}
-
-    ${e=>"stripes"===e.$styleType&&r.css`
-            background: repeating-linear-gradient(
-                135deg,
-                ${e.$bgColor2||i.Colour["bg-strongest"]} 0px,
-                ${e.$bgColor2||i.Colour["bg-strongest"]} 10px,
-                ${e.$bgColor||i.Colour["bg-stronger"]} 10px,
-                ${e.$bgColor||i.Colour["bg-stronger"]} 20px
-            );
-            ${(e.$hoverBgColor||e.$hoverBgColor2)&&e.$clickable&&r.css`
-                &:hover {
-                    background: repeating-linear-gradient(
-                        135deg,
-                        ${e.$hoverBgColor2||e.$bgColor2||i.Colour["bg-strongest"]}
-                            0px,
-                        ${e.$hoverBgColor2||e.$bgColor2||i.Colour["bg-strongest"]}
-                            10px,
-                        ${e.$hoverBgColor||e.$bgColor||i.Colour["bg-stronger"]}
-                            10px,
-                        ${e.$hoverBgColor||e.$bgColor||i.Colour["bg-stronger"]}
-                            20px
-                    );
-                }
-            `}
-        `}
-`,m=s.default.div`
-    position: absolute;
-    top: ${n}rem;
-    height: ${({$variant:e})=>`${g(e)}px`};
-    z-index: 1;
-    border-right: ${i.Border["width-010"]} ${i.Border.solid}
-        ${i.Colour["border-stronger"]};
-`,w=s.default(l.Typography.BodyXS)`
-    color: ${e=>e.$color||i.Colour.text(e)};
-    position: absolute;
-    bottom: 0;
-    padding-left: 4px;
-    padding-bottom: 4px;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;exports.ArrowButton=$,exports.ArrowIconLeft=h,exports.ArrowIconRight=c,exports.CellText=w,exports.Container=p,exports.TimeLabel=C,exports.TimeMarker=x,exports.TimeMarkerWrapper=b,exports.TimeSlot=v,exports.TimeSlotBarContainer=u,exports.TimeSlotBorder=m,exports.TimeSlotWrapper=f,exports.getCellHeight=g,exports.getCellWidth=d;
+"use strict";require("./time-slot-bar.styles_wigbyd.css");exports.DEFAULT_CELL_SIZE=40,exports.MINIFIED_CELL_SIZE=12,exports.arrowButton="a18tsztd",exports.arrowButtonDefault="a9mraed",exports.arrowButtonLeft="av3ykv8",exports.arrowButtonMinified="aljok3x",exports.arrowButtonRight="as5dred",exports.arrowIcon="a195ar7o",exports.cellText="c1yanpy9",exports.container="cleto2",exports.containerDefault="c1w55l7b",exports.containerMinified="cqcczbk",exports.timeLabel="te99x8g",exports.timeMarker="t1iag8mt",exports.timeMarkerDefault="t1iopuc",exports.timeMarkerLong="t7d7vtm",exports.timeMarkerMinified="tbp961o",exports.timeMarkerWrapper="t10z816e",exports.timeSlotBarContainer="t1dmizys",exports.timeSlotBorder="t1e383ch",exports.timeSlotBorderDefault="tyac3mh",exports.timeSlotBorderMinified="twiecck",exports.timeSlotItem="tfycdxa",exports.timeSlotItemContent="t11y98ca",exports.timeSlotItemDefault="t1kzvg2s",exports.timeSlotItemMinified="t4axcvt",exports.timeSlotWrapper="t1ukhl9h",exports.tokens={item:{width:"--fds-internal-timeSlotBar-item-width",left:"--fds-internal-timeSlotBar-item-left",color:"--fds-internal-timeSlotBar-item-color"},border:{left:"--fds-internal-timeSlotBar-border-left"}};
 //# sourceMappingURL=time-slot-bar.styles.js.map

package/cjs/time-slot-bar/time-slot-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.styles.js","sources":["../../../src/time-slot-bar/time-slot-bar.styles.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Shadow } from \"../theme\";\nimport { ThemeStyleProps } from \"../theme/types\";\nimport { Typography } from \"../typography\";\nimport { Direction, SlotStyle, TimeSlotBarVariant } from \"./types\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// Function to get the height of a cell in px\nexport const getCellHeight = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface ArrowStyleProps {\n    $direction?: Direction;\n    $variant: TimeSlotBarVariant;\n}\n\nexport interface TimeSlotStyleProps {\n    $type?: \"default\" | \"vertical\";\n    $variant: TimeSlotBarVariant;\n    $width?: number;\n    $left?: number;\n    $styleType: SlotStyle;\n    $bgColor: string | ((props: ThemeStyleProps) => string);\n    $bgColor2?: string | ((props: ThemeStyleProps) => string);\n    $hoverBgColor?: string | ((props: ThemeStyleProps) => string);\n    $hoverBgColor2?: string | ((props: ThemeStyleProps) => string);\n    $clickable?: boolean;\n}\n\ninterface CellTextStyleProps {\n    $slotWidth: number;\n    $color?: string;\n}\n\ninterface TimeMarkerStyleProps {\n    $isLongMarker: boolean;\n    $variant: TimeSlotBarVariant;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const ArrowButton = styled(ClickableIcon)<ArrowStyleProps>`\n    z-index: 2;\n    position: absolute;\n    bottom: ${({ $variant }) => ($variant === \"default\" ? \"0.25rem\" : \"0rem\")};\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    ${(props) =>\n        props.$direction === \"right\"\n            ? css`\n                  right: 0;\n              `\n            : css`\n                  left: 0;\n              `}\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const ArrowIconRight = styled(ChevronRightIcon)`\n    width: 1rem;\n    height: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const ArrowIconLeft = styled(ChevronLeftIcon)`\n    font-size: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const TimeSlotBarContainer = styled.div<{\n    $variant: TimeSlotBarVariant;\n}>`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n    height: ${({ $variant }) =>\n        `${MAX_LINE_HEIGHT * 16 + getCellHeight($variant)}px`};\n`;\n\nexport const TimeMarkerWrapper = styled.div`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const TimeMarker = styled.div<TimeMarkerStyleProps>`\n    display: inline-block;\n    width: ${({ $variant }) => `${getCellWidth($variant)}px`};\n    position: relative;\n    border-left: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n    ${(props) => {\n        let markerHeight = 0;\n\n        switch (props.$variant) {\n            case \"default\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0.625;\n                break;\n            case \"minified\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0;\n                break;\n            default:\n                markerHeight = 0;\n                break;\n        }\n\n        return css`\n            height: ${markerHeight}rem;\n        `;\n    }}\n`;\n\nexport const TimeLabel = styled(Typography.BodyXS)`\n    color: ${Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const TimeSlot = styled.div<TimeSlotStyleProps>`\n    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                display: flex;\n                flex-grow: 1;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                margin: 1px 0px;\n            `;\n        } else {\n            return css`\n                position: absolute;\n                height: ${getCellHeight(props.$variant)}px;\n                width: ${props.$width}px;\n                left: ${props.$left}px;\n            `;\n        }\n    }}\n    background-color: ${({ $bgColor }) => $bgColor};\n    cursor: ${({ $clickable }) => ($clickable ? \"pointer\" : \"default\")};\n    ${({ $hoverBgColor, $clickable }) =>\n        $hoverBgColor &&\n        $clickable &&\n        css`\n            &:hover {\n                background-color: ${$hoverBgColor};\n            }\n        `}\n\n    ${(props) =>\n        props.$styleType === \"stripes\" &&\n        css`\n            background: repeating-linear-gradient(\n                135deg,\n                ${props.$bgColor2 || Colour[\"bg-strongest\"]} 0px,\n                ${props.$bgColor2 || Colour[\"bg-strongest\"]} 10px,\n                ${props.$bgColor || Colour[\"bg-stronger\"]} 10px,\n                ${props.$bgColor || Colour[\"bg-stronger\"]} 20px\n            );\n            ${(props.$hoverBgColor || props.$hoverBgColor2) &&\n            props.$clickable &&\n            css`\n                &:hover {\n                    background: repeating-linear-gradient(\n                        135deg,\n                        ${props.$hoverBgColor2 ||\n                            props.$bgColor2 ||\n                            Colour[\"bg-strongest\"]}\n                            0px,\n                        ${props.$hoverBgColor2 ||\n                            props.$bgColor2 ||\n                            Colour[\"bg-strongest\"]}\n                            10px,\n                        ${props.$hoverBgColor ||\n                            props.$bgColor ||\n                            Colour[\"bg-stronger\"]}\n                            10px,\n                        ${props.$hoverBgColor ||\n                            props.$bgColor ||\n                            Colour[\"bg-stronger\"]}\n                            20px\n                    );\n                }\n            `}\n        `}\n`;\n\nexport const TimeSlotBorder = styled.div<{ $variant: TimeSlotBarVariant }>`\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    height: ${({ $variant }) => `${getCellHeight($variant)}px`};\n    z-index: 1;\n    border-right: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const CellText = styled(Typography.BodyXS)<CellTextStyleProps>`\n    color: ${(props) => props.$color || Colour.text(props)};\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n"],"names":["MAX_LINE_HEIGHT","getCellWidth","variant","getCellHeight","Container","styled","div","ArrowButton","ClickableIcon","$variant","Colour","bg","Shadow","props","$direction","css","ArrowIconRight","ChevronRightIcon","ArrowIconLeft","ChevronLeftIcon","TimeSlotBarContainer","TimeMarkerWrapper","TimeSlotWrapper","TimeMarker","Border","solid","markerHeight","$isLongMarker","TimeLabel","Typography","BodyXS","TimeSlot","$type","$width","$left","$bgColor","$clickable","$hoverBgColor","$styleType","$bgColor2","$hoverBgColor2","TimeSlotBorder","CellText","$color","text"],"mappings":"gWASA,MAAMA,EAAkB,KAOXC,EAAgBC,GACT,aAAZA,EACO,GAEA,GAKFC,EAAiBD,GACV,aAAZA,EACO,GAEA,GAwCFE,EAAYC,EAAAA,QAAOC,GAAG;;;;EAMtBC,EAAcF,EAAAA,QAAOG,EAAAA,cAA+B;;;cAGnD,EAAGC,cAA6B,YAAbA,EAAyB,UAAY;wBAC9CC,EAAAA,OAAOC;kBACbC,EAAAA,OAAO;;;;;;MAMlBC,GACsB,UAArBA,EAAMC,WACAC,KAAG;;gBAGHA,KAAG;;;;;;;;;;;;;EAeJC,EAAiBX,EAAAA,QAAOY,EAAAA,iBAAiB;;;aAGzCP,EAAAA,OAAO;EAGPQ,EAAgBb,EAAAA,QAAOc,EAAAA,gBAAgB;;aAEvCT,EAAAA,OAAO;EAGPU,EAAuBf,EAAAA,QAAOC,GAEzC;;;;cAIY,EAAGG,cACT,GAAGT,GAAuBG,EAAcM;EAGnCY,EAAoBhB,EAAAA,QAAOC,GAAG;;;cAG7BN;EAGDsB,EAAkBjB,EAAAA,QAAOC,GAAG;;;EAK5BiB,EAAalB,EAAAA,QAAOC,GAAyB;;aAE7C,EAAGG,cAAe,GAAGR,EAAaQ;;mBAE5Be,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC;UACvCf,EAAAA,OAAO;MACVG,IACC,IAAIa,EAAe,EAEnB,OAAQb,EAAMJ,UACV,IAAK,UACDiB,EAAeb,EAAMc,cAAgB3B,EAAkB,KACvD,MACJ,IAAK,WACD0B,EAAeb,EAAMc,cAAgB3B,EAAkB,EACvD,MACJ,QACI0B,EAAe,EAIvB,OAAOX,KAAG;sBACIW;SACb;EAIIE,EAAYvB,EAAAA,QAAOwB,aAAWC,OAAO;aACrCpB,EAAAA,OAAO;;;;EAMPqB,EAAW1B,EAAAA,QAAOC,GAAuB;MAC/CO,GACqB,aAAhBA,EAAMmB,MACCjB,KAAG;;;;;;;cASHA,KAAG;;0BAEIZ,EAAcU,EAAMJ;yBACrBI,EAAMoB;wBACPpB,EAAMqB;;wBAIN,EAAGC,cAAeA;cAC5B,EAAGC,gBAAkBA,EAAa,UAAY;MACtD,EAAGC,gBAAeD,gBAChBC,GACAD,GACArB,KAAG;;oCAEyBsB;;;;MAI7BxB,GACsB,YAArBA,EAAMyB,YACNvB,KAAG;;;kBAGOF,EAAM0B,WAAa7B,EAAAA,OAAO;kBAC1BG,EAAM0B,WAAa7B,EAAAA,OAAO;kBAC1BG,EAAMsB,UAAYzB,EAAAA,OAAO;kBACzBG,EAAMsB,UAAYzB,EAAAA,OAAO;;eAE5BG,EAAMwB,eAAiBxB,EAAM2B,iBAChC3B,EAAMuB,YACNrB,KAAG;;;;0BAIWF,EAAM2B,gBACJ3B,EAAM0B,WACN7B,EAAAA,OAAO;;0BAETG,EAAM2B,gBACJ3B,EAAM0B,WACN7B,EAAAA,OAAO;;0BAETG,EAAMwB,eACJxB,EAAMsB,UACNzB,EAAAA,OAAO;;0BAETG,EAAMwB,eACJxB,EAAMsB,UACNzB,EAAAA,OAAO;;;;;;EAQtB+B,EAAiBpC,EAAAA,QAAOC,GAAqC;;WAE/DN;cACG,EAAGS,cAAe,GAAGN,EAAcM;;oBAE7Be,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC;UACxCf,EAAAA,OAAO;EAGJgC,EAAWrC,EAAAA,QAAOwB,aAAWC,OAA2B;aACvDjB,GAAUA,EAAM8B,QAAUjC,EAAAA,OAAOkC,KAAK/B;;;;;;;;;"}
+{"version":3,"file":"time-slot-bar.styles.js","sources":["../../../src/time-slot-bar/time-slot-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow } from \"../theme\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\nexport const DEFAULT_CELL_SIZE = 40;\nexport const MINIFIED_CELL_SIZE = 12;\n\nexport const tokens = {\n    item: {\n        width: \"--fds-internal-timeSlotBar-item-width\",\n        left: \"--fds-internal-timeSlotBar-item-left\",\n        color: \"--fds-internal-timeSlotBar-item-color\",\n    },\n    border: {\n        left: \"--fds-internal-timeSlotBar-border-left\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const arrowButton = css`\n    z-index: 2;\n    position: absolute;\n    bottom: 0rem;\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const arrowButtonDefault = css`\n    bottom: 0.25rem;\n`;\n\nexport const arrowButtonMinified = css`\n    bottom: 0rem;\n`;\n\nexport const arrowButtonLeft = css`\n    left: 0;\n`;\n\nexport const arrowButtonRight = css`\n    right: 0;\n`;\n\nexport const arrowIcon = css`\n    width: 1rem;\n    height: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const timeSlotBarContainer = css`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n`;\n\nexport const containerDefault = css`\n    height: ${MAX_LINE_HEIGHT * 16 + DEFAULT_CELL_SIZE}px;\n`;\n\nexport const containerMinified = css`\n    height: ${MAX_LINE_HEIGHT * 16 + MINIFIED_CELL_SIZE}px;\n`;\n\nexport const timeMarkerWrapper = css`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const timeMarker = css`\n    display: inline-block;\n    position: relative;\n    border-left: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeMarkerDefault = css`\n    width: ${DEFAULT_CELL_SIZE}px;\n    height: 0.625rem;\n`;\n\nexport const timeMarkerMinified = css`\n    width: ${MINIFIED_CELL_SIZE}px;\n    height: 0rem;\n`;\n\nexport const timeMarkerLong = css`\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeLabel = css`\n    color: ${Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const timeSlotBorder = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.border.left}: initial;\n\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    z-index: 1;\n    left: var(${tokens.border.left});\n    border-right: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeSlotBorderDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotBorderMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n\nexport const cellText = css`\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: inherit;\n`;\n\nexport const timeSlotItem = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.item.left}: initial;\n    ${tokens.item.width}: initial;\n    ${tokens.item.color}: initial;\n\n    position: absolute;\n    color: var(${tokens.item.color});\n    left: var(${tokens.item.left});\n    width: var(${tokens.item.width});\n`;\n\nexport const timeSlotItemContent = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const timeSlotItemDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotItemMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n"],"names":["item","width","left","color","border"],"mappings":"iHAKiC,8BACC,uBAmBV,sCAsBO,kCAQH,sCAJI,mCAQH,4BAIP,4BA+ED,6BA3HC,kCAwDO,qCAIC,4BAoCR,6BArBC,qCAOO,iCAUH,qCALI,oCAvBD,wCAdG,kCAqDN,yCAYO,yCAIC,+BAgBV,sCAYO,uCAKA,wCAIC,kCAtFL,0BAjFN,CAClBA,KAAM,CACFC,MAAO,wCACPC,KAAM,uCACNC,MAAO,yCAEXC,OAAQ,CACJF,KAAM"}

package/cjs/time-slot-bar/time-slot-bar.styles_wigbyd.css

@@ -0,0 +1,25 @@
+@layer fds{.cleto2{position:relative;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;}
+.a18tsztd{z-index:2;position:absolute;bottom:0rem;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-strong);border-radius:100%;padding:0.5rem;width:2rem;height:2rem;}.a18tsztd >div{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;}.a18tsztd:focus{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
+.a9mraed{bottom:0.25rem;}
+.aljok3x{bottom:0rem;}
+.av3ykv8{left:0;}
+.as5dred{right:0;}
+.a195ar7o{width:1rem;height:1rem;color:var(--fds-colour-icon-primary);}
+.t1dmizys{overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;}
+.c1w55l7b{height:60px;}
+.cqcczbk{height:32px;}
+.t10z816e{position:relative;white-space:nowrap;height:1.25rem;}
+.t1ukhl9h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;}
+.t1iag8mt{display:inline-block;position:relative;border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.t1iopuc{width:40px;height:0.625rem;}
+.tbp961o{width:12px;height:0rem;}
+.t7d7vtm{height:1.25rem;}
+.te99x8g{color:var(--fds-colour-text-subtle);position:absolute;bottom:10%;left:10%;}
+.t1e383ch{--fds-internal-timeSlotBar-border-left:initial;position:absolute;top:1.25rem;z-index:1;left:var(--fds-internal-timeSlotBar-border-left);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.tyac3mh{height:40px;}
+.twiecck{height:12px;}
+.c1yanpy9{position:absolute;bottom:0;padding-left:4px;padding-bottom:4px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;}
+.tfycdxa{--fds-internal-timeSlotBar-item-left:initial;--fds-internal-timeSlotBar-item-width:initial;--fds-internal-timeSlotBar-item-color:initial;position:absolute;color:var(--fds-internal-timeSlotBar-item-color);left:var(--fds-internal-timeSlotBar-item-left);width:var(--fds-internal-timeSlotBar-item-width);}
+.t11y98ca{width:100%;height:100%;}
+.t1kzvg2s{height:40px;}
+.t4axcvt{height:12px;}}

package/cjs/time-slot-bar/time-slot-divider.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react");require("../theme/theme-provider/index.js");var s=require("../theme/utils/css-variable.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 i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("./time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(r);exports.default=({variant:r,left:o,dataTestId:l})=>{const d=t.useRef(null);return i.useApplyStyle(d,{[u.tokens.border.left]:void 0===o?void 0:s.formatUnitValue(o,"px")}),e.jsx("div",{ref:d,"data-testid":l,className:a.default(u.timeSlotBorder,"default"===r?u.timeSlotBorderDefault:u.timeSlotBorderMinified)})};
+//# sourceMappingURL=time-slot-divider.js.map

package/cjs/time-slot-bar/time-slot-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-divider.js","sources":["../../../src/time-slot-bar/time-slot-divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotDividerProps {\n    variant: TimeSlotBarVariant;\n    left?: number;\n    dataTestId?: string;\n}\n\nconst TimeSlotDivider = ({\n    variant,\n    left,\n    dataTestId,\n}: TimeSlotDividerProps) => {\n    const dividerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(dividerRef, {\n        [styles.tokens.border.left]:\n            left === undefined ? undefined : formatUnitValue(left, \"px\"),\n    });\n\n    return (\n        <div\n            ref={dividerRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotBorder,\n                variant === \"default\"\n                    ? styles.timeSlotBorderDefault\n                    : styles.timeSlotBorderMinified\n            )}\n        />\n    );\n};\n\nexport default TimeSlotDivider;\n"],"names":["variant","left","dataTestId","dividerRef","useRef","useApplyStyle","styles.tokens","border","undefined","formatUnitValue","_jsx","ref","className","clsx","styles.timeSlotBorder","styles.timeSlotBorderDefault","styles.timeSlotBorderMinified"],"mappings":"4pBAawB,EACpBA,UACAC,OACAC,iBAEA,MAAMC,EAAaC,EAAAA,OAAuB,MAO1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,OAAON,WACTO,IAATP,OAAqBO,EAAYC,EAAAA,gBAAgBR,EAAM,QAI3DS,MAAA,MAAA,CACIC,IAAKR,EAAU,cACFD,EACbU,UAAWC,UACPC,EAAAA,eACY,YAAZd,EACMe,EAAAA,sBACAC,EAAAA,yBAEZ"}

package/cjs/time-slot-bar/time-slot-item.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var i=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var s=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var l=require("./time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);exports.default=({children:t,color:o,dataTestId:m,onClick:n,slotOffset:d,slotWidth:c,variant:f})=>{const h=r.useRef(null);return u.useApplyStyle(h,{[l.tokens.item.width]:i.formatUnitValue(c,"px"),[l.tokens.item.left]:i.formatUnitValue(d,"px"),[l.tokens.item.color]:o||s.Colour.text}),e.jsx("div",{ref:h,"data-testid":m,className:a.default(l.timeSlotItem,"default"===f?l.timeSlotItemDefault:l.timeSlotItemMinified),onClick:n,children:t})};
+//# sourceMappingURL=time-slot-item.js.map

package/cjs/time-slot-bar/time-slot-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-item.js","sources":["../../../src/time-slot-bar/time-slot-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type MouseEvent, useRef } from \"react\";\n\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotItemProps {\n    children: React.ReactNode;\n    color?: string;\n    dataTestId?: string;\n    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);\n    slotOffset: number;\n    slotWidth: number;\n    variant: TimeSlotBarVariant;\n}\n\nconst TimeSlotItem = ({\n    children,\n    color,\n    dataTestId,\n    onClick,\n    slotOffset,\n    slotWidth,\n    variant,\n}: TimeSlotItemProps) => {\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(itemRef, {\n        [styles.tokens.item.width]: formatUnitValue(slotWidth, \"px\"),\n        [styles.tokens.item.left]: formatUnitValue(slotOffset, \"px\"),\n        [styles.tokens.item.color]: color || Colour.text,\n    });\n\n    return (\n        <div\n            ref={itemRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotItem,\n                variant === \"default\"\n                    ? styles.timeSlotItemDefault\n                    : styles.timeSlotItemMinified\n            )}\n            onClick={onClick}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default TimeSlotItem;\n"],"names":["children","color","dataTestId","onClick","slotOffset","slotWidth","variant","itemRef","useRef","useApplyStyle","styles.tokens","item","width","formatUnitValue","left","Colour","text","_jsx","ref","className","clsx","styles.timeSlotItem","styles.timeSlotItemDefault","styles.timeSlotItemMinified"],"mappings":"kqBAiBqB,EACjBA,WACAC,QACAC,aACAC,UACAC,aACAC,YACAC,cAEA,MAAMC,EAAUC,EAAAA,OAAuB,MAQvC,OANAC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,KAAKC,OAAQC,EAAAA,gBAAgBR,EAAW,MACvD,CAACK,EAAAA,OAAcC,KAAKG,MAAOD,EAAAA,gBAAgBT,EAAY,MACvD,CAACM,EAAAA,OAAcC,KAAKV,OAAQA,GAASc,EAAAA,OAAOC,OAI5CC,MAAA,MAAA,CACIC,IAAKX,EAAO,cACCL,EACbiB,UAAWC,UACPC,EAAAA,aACY,YAAZf,EACMgB,EAAAA,oBACAC,EAAAA,sBAEVpB,QAASA,EAAOH,SAEfA,GACC"}

package/cjs/time-slot-bar-week/consts.js

@@ -0,0 +1,2 @@
+"use strict";exports.ROW_HEIGHT=16,exports.SLOT_GAP=4,exports.SLOT_HEIGHT=12;
+//# sourceMappingURL=consts.js.map

package/cjs/time-slot-bar-week/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sources":["../../../src/time-slot-bar-week/consts.ts"],"sourcesContent":["export const SLOT_HEIGHT = 12; // px\nexport const SLOT_GAP = 4; // px\nexport const ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n"],"names":["SLOT_HEIGHT"],"mappings":"gCAE0BA,oBADF,sBADG"}

package/cjs/time-slot-bar-week/time-slot-bar-week-days.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),l=require("../external/dayjs/dayjs.min.js"),r=require("../external/lodash/isEmpty.js"),i=require("../external/lodash/maxBy.js"),a=require("../external/lodash/minBy.js"),n=require("react"),o=require("../external/react-resize-detector/build/index.esm.js"),s=require("../shared/accessibility/index.js"),d=require("../shared/internal-calendar/day-cell/day-cell.js"),c=require("../theme/index.js"),u=require("../util/calendar-helper.js"),f=require("../util/date-helper.js");require("../util/date-input-helper.js"),require("../util/simple-id-generator.js");var m=require("../util/string-helper.js");require("@react-aria/live-announcer");var h=require("../util/time-helper.js"),p=require("./time-slot-bar-week-days.style.js");exports.TimeSlotBarWeekDays=({calendarDate:v,disabledDates:x,selectedDate:b,onSelect:g,minDate:j,maxDate:y,startTime:T,endTime:k,maxVisibleCellHeight:D,slots:w,interval:C=30,variant:M="flexible",enableSelection:$=!0,onSlotClick:H})=>{var S,q,I,A;const W="YYYY-MM-DD",[L,E]=n.useState(!1),[O,R]=n.useState(),Y=n.useRef({}),B=n.useMemo((()=>u.CalendarHelper.generateDaysForCurrentWeek(v)),[v]),F=Object.values(null!=w?w:{}).flat(),P=null!==(q=null!=T?T:null===(S=a.default(F,"startTime"))||void 0===S?void 0:S.startTime)&&void 0!==q?q:"00:00",U=null!==(A=null!=k?k:null===(I=i.default(F,"endTime"))||void 0===I?void 0:I.endTime)&&void 0!==A?A:"24:00",V=Math.ceil(f.DateHelper.getTimeDiffInMinutes(P,U)/C),{height:z=0,ref:G}=o.useResizeDetector(),K=!!D&&z>D,N=void 0!==D?Math.max(1,Math.floor((D+4)/16)):0,J=D?!K||L?z:N>0?16*N-4:D:z,Q=t.useSpring({height:J}),X=n.useMemo((()=>{if(w){const e={};return Object.entries(w).forEach((([t,l])=>{const i=function(e){const t=Array(V).fill({});return e.forEach((e=>{const l=Math.max(0,f.DateHelper.getTimeDiffInMinutes(P,e.startTime)/C),i=Math.min(V,f.DateHelper.getTimeDiffInMinutes(P,e.endTime)/C),a=Math.ceil(i)-Math.floor(l);switch(M){case"fixed":t[Math.floor(l)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(l),cellLength:i-l});break;case"flexible":for(let n=0;n<a;n++){const o=f.DateHelper.addMinutesToTime(P,Math.floor(l+n)*C),s=f.DateHelper.addMinutesToTime(o,C);let d;r.default(t[Math.floor(l+n)])?0===n&&l%1!=0?d="top":n===a-1&&i%1!=0&&(d="bottom"):d=void 0,t[Math.floor(l+n)]=Object.assign(Object.assign({},e),{id:`${e.id}-${n}`,startTime:o,endTime:s,isActualSlot:!0,rowIndex:Math.floor(l+n),cellLength:1,halfFill:d})}}})),t}(l);e[t]=function(e){var t,l,i,a;let n=0;switch(M){case"fixed":for(e=e.reduce(((e,t)=>{const l=e.length>0?e[e.length-1]:e[0];return r.default(t)&&r.default(l)?e:[...e,t]}),[{}]);n<e.length;){if(r.default(e[n])){const r=null!==(l=null===(t=e[n-1])||void 0===t?void 0:t.endTime)&&void 0!==l?l:P,o=null!==(a=null===(i=e[n+1])||void 0===i?void 0:i.startTime)&&void 0!==a?a:U;if(r!==o){const t=f.DateHelper.getTimeDiffInMinutes(r,o)/C;e[n]=Object.assign(Object.assign({},ae(n)),{startTime:r,endTime:o,cellLength:t})}}n++}break;case"flexible":for(;n<e.length;)r.default(e[n])?(e[n]=ae(n),n++):n+=e[n].cellLength}return e.filter((e=>!r.default(e)&&e.cellLength>0))}(i)})),e}return{}}),[w]),Z=n.useMemo((()=>B.reduce(((e,t)=>{const l=t.format(W);return e[l]=oe(l).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${l}-${e.id}`,date:l,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[B,X]),_=e=>{R(e)},ee=()=>{R(void 0)},te=(e,t)=>{null==H||H(e,t)},le=(e,t)=>l=>{l.stopPropagation(),te(e,t)},re=e=>{e.preventDefault(),E((e=>!e))},ie=e=>{var t;const r=u.CalendarHelper.isWithinRange(e,j?l.default(j):void 0,y?l.default(y):void 0),i=null!==(t=x&&x.includes(e.format(W)))&&void 0!==t&&t;return!r||i};function ae(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:c.Colour["bg-stronger"]},cellLength:t}}function ne(e,t){var r;const{startTime:i,endTime:a}=t;return m.StringHelper.joinNonEmptyStrings([l.default(e).format("D MMMM YYYY dddd"),i&&a?h.TimeHelper.formatTimeRange(i,a):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function oe(e){var t;return null!==(t=X[e])&&void 0!==t?t:Array("flexible"===M?V:1).fill(void 0).map(((e,t)=>ae(t,"fixed"===M?V:void 0)))}const se=(t,l)=>{var r;const{id:i,clickable:a=!0,isActualSlot:n,styleAttributes:o,cellLength:d,halfFill:c}=l,{styleType:u="default",backgroundColor:f,backgroundColor2:m}=o,h=`${t}-${i}`,v=K&&!L&&(null!==(r=l.rowIndex)&&void 0!==r?r:0)>=N;return e.jsx(p.TimeSlotComponent,{$type:"vertical",$variant:"default",$styleType:u,$bgColor:f,$bgColor2:m,$halfFill:c,$clickable:a,$height:"fixed"===M?12*d+4*(d-1):12,onClick:()=>a&&te(t,l),children:n&&e.jsx(s.VisuallyHidden,{inert:s.inertValue(v),children:e.jsx("button",{type:"button",ref:e=>{Y.current[h]=e},"aria-disabled":!a,"aria-label":ne(t,l),onKeyDown:e=>{var r;return((e,t)=>{var l;const r=null!==(l=Z[t.date])&&void 0!==l?l:[],i=e=>{var t;e&&(null===(t=Y.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const l=r.findIndex((e=>e.key===t.key));i(r[l+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const l=r.findIndex((e=>e.key===t.key));i(r[l-1]);break}case"Home":case"PageUp":e.preventDefault(),i(r[0]);break;case"End":e.preventDefault(),i(r[r.length-1]);break;case"PageDown":if(e.preventDefault(),K&&!L){E(!0);const e=[...r].reverse().find((e=>e.rowIndex<N));i(null!=e?e:r[0]);break}i(r[r.length-1])}})(e,{key:h,date:t,rowIndex:null!==(r=l.rowIndex)&&void 0!==r?r:0})},onClick:a?le(t,l):void 0})})},i)};return e.jsxs(p.Wrapper,{children:[e.jsxs(p.GridWrapper,{role:"grid",children:[e.jsx(p.HeaderCellWeekColumn,{role:"row",onBlur:ee,children:B.map(((t,r)=>{const i=(e=>{const t=e.format(W),l=ie(e),r={},i=$&&!l;l&&(r.disabled=!0),r.interactive=$?i:null;const a=i&&O&&e.isSame(O,"day"),n=[b].includes(t);return n&&a?(r.labelType="selected-hover",r.circleLeft="selected-hover-outline",r.circleRight="selected-hover-outline"):n?(r.labelType="selected",r.circleLeft="selected-outline",r.circleRight="selected-outline"):a&&(r.labelType="hover",r.circleLeft="hover-subtle",r.circleRight="hover-subtle"),r})(t);return e.jsx(d.DayCell,Object.assign({date:t,calendarDate:l.default(b),role:"columnheader",tabIndex:i.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&$&&g(e)})(t,!i.interactive)},onHover:_,onHoverEnd:ee,onFocus:_},i),`day-${r}`)}))}),e.jsx(p.HeaderCellWeekColumn,{role:"row",children:B.map(((t,r)=>e.jsx(p.HeaderCellWeek,{role:"gridcell",children:e.jsx(p.CellWeekText,{weight:"semibold",$disabled:ie(t),children:l.default(t).format("ddd")})},`week-day-${r}`)))}),(()=>{let t=!1;const r=e=>{const r=l.default(P,"HH:mm").add(4*e*C,"minutes"),i=r.format("h"),a=r.format("mm"),n=r.format("a");let o=`${i}${"00"!==a?` ${a}`:""}`;return t||"pm"!==n||"00"!==a||(o+=` ${n}`,t=!0),o};return e.jsx(p.TimeColumn,{$height:J,"aria-hidden":!0,children:Array(Math.ceil(V/4)).fill(void 0).map(((t,l)=>e.jsx(p.TimeColumnWrapper,{children:e.jsx(p.TimeColumnText,{children:r(l)})},`time-${l}`)))})})(),e.jsx(p.Expandable,{style:Q,role:"row",children:e.jsx(p.ColumnWeekCell,{ref:G,children:B.map(((t,l)=>{const r=t.format(W),i=oe(r);return e.jsx(p.TimeSlotWrapper,{role:"gridcell",children:i.map((e=>se(r,e)))},`wrapper-${l}`)}))},`week-cell-${v.format(W)}`)})]}),(()=>{if(D&&G.current)return e.jsx(p.CollapseExpandAllWrapper,{children:e.jsxs(p.CollapseExpandAllButton,{"data-testid":"time-bar-expand-collapse-button",styleType:"light","aria-expanded":L,onClick:re,children:[e.jsx(p.ChevronIcon,{$isExpanded:L}),(L?"Hide":"Show")+" later times"]})})})()]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("@react-spring/web"),l=require("clsx"),a=require("../external/dayjs/dayjs.min.js"),i=require("../external/lodash/isEmpty.js"),n=require("../external/lodash/maxBy.js"),s=require("../external/lodash/minBy.js"),o=require("react"),d=require("../external/react-resize-detector/build/index.esm.js"),u=require("../button/button.js"),c=require("../shared/internal-calendar/day-cell/day-cell.js");require("../theme/theme-provider/index.js");var m=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var f=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var v=require("../typography/index.js"),p=require("../util/calendar-helper.js"),x=require("../util/date-helper.js");require("../util/simple-id-generator.js");var g=require("../util/string-helper.js");require("@react-aria/live-announcer");var j=require("../util/use-mount.js"),b=require("../util/time-helper.js"),y=require("./consts.js"),T=require("./time-slot-bar-week-days.styles.js"),k=require("./time-slot-cell.js");function D(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=D(l);exports.TimeSlotBarWeekDays=({calendarDate:l,disabledDates:D,selectedDate:w,onSelect:M,minDate:C,maxDate:S,startTime:A,endTime:H,maxVisibleCellHeight:I,slots:N,interval:W=30,variant:$="flexible",enableSelection:L=!0,onSlotClick:O})=>{var R,E,B,Y;const P="YYYY-MM-DD",[U,G]=o.useState(!1),[_,z]=o.useState(),F=j.useIsMounted(),V=o.useRef({}),K=o.useRef(null),X=o.useMemo((()=>p.CalendarHelper.generateDaysForCurrentWeek(l)),[l]),J=Object.values(null!=N?N:{}).flat(),Q=null!==(E=null!=A?A:null===(R=s.default(J,"startTime"))||void 0===R?void 0:R.startTime)&&void 0!==E?E:"00:00",Z=null!==(Y=null!=H?H:null===(B=n.default(J,"endTime"))||void 0===B?void 0:B.endTime)&&void 0!==Y?Y:"24:00",ee=Math.ceil(x.DateHelper.getTimeDiffInMinutes(Q,Z)/W),{height:te=0,ref:re}=d.useResizeDetector(),le=!!I&&te>I,ae=void 0!==I?Math.max(1,Math.floor((I+y.SLOT_GAP)/y.ROW_HEIGHT)):0,ie=ae>0?ae*y.ROW_HEIGHT-y.SLOT_GAP:I,ne=I?!le||U?te:ie:te,se=r.useSpring({height:ne}),oe=o.useMemo((()=>{if(N){const e={};return Object.entries(N).forEach((([t,r])=>{const l=function(e){const t=Array(ee).fill({});return e.forEach((e=>{const r=Math.max(0,x.DateHelper.getTimeDiffInMinutes(Q,e.startTime)/W),l=Math.min(ee,x.DateHelper.getTimeDiffInMinutes(Q,e.endTime)/W),a=Math.ceil(l)-Math.floor(r);switch($){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:l-r});break;case"flexible":for(let n=0;n<a;n++){const s=x.DateHelper.addMinutesToTime(Q,Math.floor(r+n)*W),o=x.DateHelper.addMinutesToTime(s,W);let d;d=i.default(t[Math.floor(r+n)])?0===n&&r%1!=0?"top":n===a-1&&l%1!=0?"bottom":"default":"default",t[Math.floor(r+n)]=Object.assign(Object.assign({},e),{id:`${e.id}-${n}`,startTime:s,endTime:o,isActualSlot:!0,rowIndex:Math.floor(r+n),cellLength:1,halfFill:d})}}})),t}(r);e[t]=function(e){var t,r,l,a;let n=0;switch($){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return i.default(t)&&i.default(r)?e:[...e,t]}),[{}]);n<e.length;){if(i.default(e[n])){const i=null!==(r=null===(t=e[n-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:Q,s=null!==(a=null===(l=e[n+1])||void 0===l?void 0:l.startTime)&&void 0!==a?a:Z;if(i!==s){const t=x.DateHelper.getTimeDiffInMinutes(i,s)/W;e[n]=Object.assign(Object.assign({},xe(n)),{startTime:i,endTime:s,cellLength:t})}}n++}break;case"flexible":for(;n<e.length;)i.default(e[n])?(e[n]=xe(n),n++):n+=e[n].cellLength}return e.filter((e=>!i.default(e)&&e.cellLength>0))}(l)})),e}return{}}),[N]),de=o.useMemo((()=>X.reduce(((e,t)=>{const r=t.format(P);return e[r]=je(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[X,oe]);h.useApplyStyle(K,{[T.tokens.timeColumn.height]:m.formatUnitValue(ne,"px")});const ue=e=>{z(e)},ce=()=>{z(void 0)},me=(e,t)=>{null==O||O(e,t)},fe=(e,t)=>r=>{r.stopPropagation(),me(e,t)},he=e=>{e.preventDefault(),G((e=>!e))},ve=(e,t)=>{var r;const l=null!==(r=de[t.date])&&void 0!==r?r:[],a=e=>{var t;e&&(null===(t=V.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=l.findIndex((e=>e.key===t.key));a(l[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=l.findIndex((e=>e.key===t.key));a(l[r-1]);break}case"Home":case"PageUp":e.preventDefault(),a(l[0]);break;case"End":e.preventDefault(),a(l[l.length-1]);break;case"PageDown":if(e.preventDefault(),le&&!U){G(!0);const e=[...l].reverse().find((e=>e.rowIndex<ae));a(null!=e?e:l[0]);break}a(l[l.length-1])}},pe=e=>{var t;const r=p.CalendarHelper.isWithinRange(e,C?a.default(C):void 0,S?a.default(S):void 0),l=null!==(t=D&&D.includes(e.format(P)))&&void 0!==t&&t;return!r||l};function xe(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:f.Colour["bg-stronger"]},cellLength:t}}function ge(e,t){var r;const{startTime:l,endTime:i}=t;return g.StringHelper.joinNonEmptyStrings([a.default(e).format("D MMMM YYYY dddd"),l&&i?b.TimeHelper.formatTimeRange(l,i):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function je(e){var t;return null!==(t=oe[e])&&void 0!==t?t:Array("flexible"===$?ee:1).fill(void 0).map(((e,t)=>xe(t,"fixed"===$?ee:void 0)))}return e.jsxs("div",{className:T.wrapper,children:[e.jsxs("div",{className:T.gridWrapper,role:"grid",children:[e.jsx("div",{className:T.headerCellWeekColumn,role:"row",onBlur:ce,children:X.map(((t,r)=>{const l=(e=>{const t=e.format(P),r=pe(e),l={},a=L&&!r;r&&(l.disabled=!0),l.interactive=!!L&&a;const i=a&&_&&e.isSame(_,"day"),n=[w].includes(t);return n&&i?(l.labelType="selected-hover",l.circleLeft="selected-hover-outline",l.circleRight="selected-hover-outline"):n?(l.labelType="selected",l.circleLeft="selected-outline",l.circleRight="selected-outline"):i&&(l.labelType="hover",l.circleLeft="hover-subtle",l.circleRight="hover-subtle"),l})(t);return e.jsx(c.DayCell,Object.assign({date:t,calendarDate:a.default(w),role:"columnheader",tabIndex:l.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&L&&M(e)})(t,!l.interactive)},onHover:ue,onHoverEnd:ce,onFocus:ue},l),`day-${r}`)}))}),e.jsx("div",{className:T.headerCellWeekColumn,role:"row",children:X.map(((t,r)=>e.jsx("div",{className:T.headerCellWeek,role:"gridcell",children:e.jsx(v.Typography.BodyXS,{weight:"semibold",className:q.default(pe(t)&&T.cellWeekTextDisabled),children:a.default(t).format("ddd")})},`week-day-${r}`)))}),(()=>{let t=!1;const r=e=>{const r=a.default(Q,"HH:mm").add(4*e*W,"minutes"),l=r.format("h"),i=r.format("mm"),n=r.format("a");let s=`${l}${"00"!==i?` ${i}`:""}`;return t||"pm"!==n||"00"!==i||(s+=` ${n}`,t=!0),s};return e.jsx("div",{className:T.timeColumn,ref:K,"aria-hidden":!0,children:Array(Math.ceil(ee/4)).fill(void 0).map(((t,l)=>e.jsx("div",{className:T.timeColumnWrapper,children:e.jsx("div",{className:T.timeColumnText,children:r(l)})},`time-${l}`)))})})(),e.jsx(r.animated.div,{className:T.expandable,style:F?se:void 0,role:"row",children:e.jsx("div",{className:T.columnWeekCell,ref:re,children:X.map(((t,r)=>{const l=t.format(P),a=je(l);return e.jsx("div",{className:T.timeSlotWrapper,role:"gridcell",children:a.map((t=>((t,r)=>e.jsx(k.WeekTimeSlotCell,{formattedDate:t,slot:r,variant:$,hasCollapsedContent:le,expandAll:U,visibleRowCount:ae,onSlotClick:me,getSlotAriaLabel:ge,onSlotKeyDown:ve,onSlotButtonClick:fe,slotButtonRefs:V},r.id))(l,t)))},`wrapper-${r}`)}))},`week-cell-${l.format(P)}`)})]}),(()=>{if(I&&re.current)return e.jsx("div",{className:T.collapseExpandAllWrapper,children:e.jsx(u.Button,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",sizeType:"small","aria-expanded":U,onClick:he,className:T.collapseExpandAllButton,children:e.jsxs("span",{className:T.collapseExpandAllButtonContent,children:[e.jsx(t.ChevronUpIcon,{className:q.default(T.chevronIcon,U&&T.chevronIconExpanded)}),(U?"Hide":"Show")+" later times"]})})})})()]})};
 //# sourceMappingURL=time-slot-bar-week-days.js.map