@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.4

package/cjs/schedule/schedule-day-view/schedule-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport type { MouseEvent } from \"react\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nconst {\n    ServiceContainer,\n    ServiceColumn,\n    ArrowContainer,\n    ArrowButton,\n    ServiceHeaderContainer,\n    Title,\n    Description,\n    SlotContent,\n    SlotTime,\n    SlotAvailability,\n    SlotCell,\n    EmptySlot,\n    SlotGrid,\n    Timeline,\n    SlotColumn,\n    ScheduleContainer,\n    LoadingContainer,\n    HeaderContainer,\n    BlankCell,\n    BodyContainer,\n} = styles;\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e: MouseEvent) =>\n                    slot.onClick && slot.onClick(slot, e)\n                }\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ServiceContainer","ServiceColumn","ArrowContainer","ArrowButton","ServiceHeaderContainer","Title","Description","SlotContent","SlotTime","SlotAvailability","SlotCell","EmptySlot","SlotGrid","Timeline","SlotColumn","ScheduleContainer","LoadingContainer","HeaderContainer","BlankCell","BodyContainer","styles","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","parseInput","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","$isMobile","$columnCount","styleType","sizeType","icon","ChevronLeftIcon","filter","cell","ChevronRightIcon","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","$top"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { Button } from \"../../button\";\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    ScheduleSlotContent,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../schedule-slot-content\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\ninterface SlotContentItemProps {\n    slot: ScheduleSlotProps;\n    timeSlotStart: string;\n    blockedMessage: string;\n}\n\nconst SlotContentItem = ({\n    slot,\n    timeSlotStart,\n    blockedMessage,\n}: SlotContentItemProps) => {\n    const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <ScheduleSlotContent\n            slot={slot}\n            offsetTop={offsetTop}\n            tokens={styles.tokens.slotContent}\n            classNames={{\n                container: styles.slotContent,\n                blocked: styles.slotContentBlocked,\n                available: styles.slotContentAvailable,\n            }}\n        >\n            {duration >= 15 && (\n                <>\n                    <span className={styles.slotTime}>\n                        {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                        {\"\\u2013\"} {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                    </span>\n                    <span className={styles.slotAvailability}>\n                        {slot.status === \"blocked\"\n                            ? blockedMessage\n                            : `${slot.booked} / ${slot.capacity}`}\n                    </span>\n                </>\n            )}\n        </ScheduleSlotContent>\n    );\n};\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const serviceContainerRef = useRef<HTMLDivElement>(null);\n    const slotGridRef = useRef<HTMLDivElement>(null);\n    const timelineRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    useApplyStyle(serviceContainerRef, {\n        [styles.tokens.serviceContainer.columnCount]: `${serviceData.length}`,\n    });\n\n    useApplyStyle(slotGridRef, {\n        [styles.tokens.slotGrid.columnCount]: `${serviceData.length}`,\n    });\n\n    useApplyStyle(timelineRef, {\n        [styles.tokens.timeline.top]:\n            timelineOffset === null ? null : `${timelineOffset}px`,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <div ref={serviceContainerRef} className={styles.serviceContainer}>\n                {serviceData.map((service) => (\n                    <div key={service.id} className={styles.serviceColumn}>\n                        {isMobile && (\n                            <div className={styles.arrowContainer}>\n                                {showPrevArrow && onPrevService && (\n                                    <Button\n                                        className={styles.arrowButton}\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </div>\n                        )}\n                        <div className={styles.serviceHeaderContainer}>\n                            <Typography.BodyMD className={styles.title}>\n                                {service.name}\n                            </Typography.BodyMD>\n                            <Typography.BodySM className={styles.description}>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Typography.BodySM>\n                        </div>\n                        {isMobile && showNextArrow && onNextService && (\n                            <Button\n                                className={styles.arrowButton}\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        return (\n            <SlotContentItem\n                slot={slot}\n                timeSlotStart={timeSlotStart}\n                blockedMessage={blockedMessage}\n            />\n        );\n    };\n\n    const getSlotCellClassName = (time: string) =>\n        clsx(styles.slotCell, time.endsWith(\":00\") && styles.slotCellDashed);\n\n    const renderFilledSlotCell = (\n        service: ScheduleEntityProps,\n        time: string,\n        slots: ScheduleSlotProps[]\n    ) => {\n        return (\n            <div key={time} className={getSlotCellClassName(time)}>\n                {slots.map((slot, index) => (\n                    <WithOptionalPopover\n                        key={`${slot.id}-${index}`}\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(service, slot, time)}\n                    >\n                        {renderSlotContent(slot, time)}\n                    </WithOptionalPopover>\n                ))}\n            </div>\n        );\n    };\n\n    const renderEmptySlotCell = (\n        service: ScheduleEntityProps,\n        time: string\n    ) => {\n        return (\n            <div\n                key={time}\n                className={getSlotCellClassName(time)}\n                onClick={() => handleEmptySlotClick(time, service.name)}\n                data-testid={`empty-slot-${service.id}-${time}`}\n            >\n                <WithOptionalPopover\n                    containerRef={containerRef}\n                    customPopover={getPopoverConfig(service, undefined, time)}\n                >\n                    <div className={styles.emptySlot} />\n                </WithOptionalPopover>\n            </div>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n\n        return slots.length > 0\n            ? renderFilledSlotCell(service, time, slots)\n            : renderEmptySlotCell(service, time);\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <div ref={slotGridRef} className={styles.slotGrid}>\n                {timelineOffset !== null && (\n                    <div ref={timelineRef} className={styles.timeline} />\n                )}\n                {serviceData.map((service) => (\n                    <div key={service.id} className={styles.slotColumn}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.scheduleContainer}>\n            {loading ? (\n                <div className={styles.loadingContainer}>\n                    <ThemedLoadingSpinner data-testid=\"loading-spinner\" />\n                </div>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <div\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        className={clsx(\n                            styles.headerContainer,\n                            isMobile && styles.headerContainerMobile\n                        )}\n                    >\n                        <div className={styles.blankCell} />\n                        {renderHeader()}\n                    </div>\n\n                    <div\n                        className={styles.bodyContainer}\n                        ref={bodyRef}\n                        onScroll={handleBodyScroll}\n                    >\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["SlotContentItem","slot","timeSlotStart","blockedMessage","offsetTop","calculateSlotOffset","startTime","duration","TimeHelper","calculateDuration","endTime","_jsx","ScheduleSlotContent","tokens","styles.tokens","slotContent","classNames","container","styles.slotContent","blocked","styles.slotContentBlocked","available","styles.slotContentAvailable","children","_jsxs","_Fragment","className","styles.slotTime","parseInput","styles.slotAvailability","status","booked","capacity","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","serviceContainerRef","slotGridRef","timelineRef","timeSlots","useMemo","generateTimings","useApplyStyle","serviceContainer","columnCount","length","slotGrid","timeline","top","getPopoverConfig","service","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","DateHelper","addMinutesToTime","name","renderSlotContent","getSlotCellClassName","clsx","styles.slotCell","endsWith","styles.slotCellDashed","renderEmptySlotCell","onClick","serviceName","endTimeString","handleEmptySlotClick","id","WithOptionalPopover","undefined","styles.emptySlot","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","map","index","renderFilledSlotCell","styles.scheduleContainer","styles.loadingContainer","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","styles.headerContainer","styles.headerContainerMobile","styles.blankCell","styles.serviceContainer","styles.serviceColumn","styles.arrowContainer","Button","styles.arrowButton","styleType","sizeType","icon","ChevronLeftIcon","styles.serviceHeaderContainer","Typography","BodyMD","styles.title","BodySM","styles.description","filter","cell","ChevronRightIcon","styles.bodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","styles.slotGrid","styles.timeline","styles.slotColumn"],"mappings":"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"}

package/cjs/schedule/schedule-day-view/schedule-day-view.styles.js

@@ -1,153 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../../button/button.js"),r=require("../../shared/styles/index.js"),t=require("../../typography/index.js"),i=require("../../v3_theme/index.js"),d=require("../const.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e);const s=l.default(o.Button)`
-    color: ${i.V3_Colour.icon};
-`,a=l.default.div`
-    width: 2rem;
-`,u=l.default.div`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-`,p=l.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 25rem;
-    height: 100%;
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid} ${i.V3_Colour.border};
-    border-radius: ${i.V3_Radius.md};
-    background: ${i.V3_Colour.bg};
-`,c=l.default.div`
-    z-index: 3;
-    max-height: ${d.HEADER_HEIGHT}px;
-    border-top-right-radius: ${i.V3_Radius.md};
-    border-top-left-radius: ${i.V3_Radius.md};
-    position: sticky;
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid} ${i.V3_Colour.border};
-    overflow-x: hidden;
-    overflow-y: hidden;
-
-    ${o=>o.$isMobile?e.css`
-                  display: block;
-                  overflow: hidden;
-              `:e.css`
-                  display: grid;
-                  grid-template-columns: ${d.TIME_INDICATOR_WIDTH}px 1fr;
-              `}
-`,g=l.default.div`
-    min-width: ${d.TIME_INDICATOR_WIDTH}px;
-    background: ${i.V3_Colour["bg-strong"]};
-    position: sticky;
-    left: 0;
-`,$=l.default.div`
-    display: grid;
-    grid-template-columns: repeat(${e=>e.$columnCount}, 1fr);
-`,_=l.default.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-width: ${d.MIN_COLUMN_WIDTH}px;
-    padding: ${i.V3_Spacing["spacing-16"]} ${i.V3_Spacing["spacing-8"]};
-    background: ${i.V3_Colour["bg-strong"]};
-    border-right: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-        ${i.V3_Colour.border};
-    &:last-child {
-        border-right: none;
-    }
-`,b=l.default.div`
-    width: 15rem;
-    padding-left: ${i.V3_Spacing["spacing-16"]};
-`,h=l.default(t.Typography.BodyMD)`
-    color: ${i.V3_Colour["text-primary"]};
-    font-weight: ${i.V3_Font.Spec["weight-semibold"]};
-    margin-top: 0;
-    ${r.lineClampCss(2)}
-    text-overflow: ellipsis;
-    word-wrap: break-word;
-`,x=l.default(t.Typography.BodySM)`
-    margin-top: ${i.V3_Spacing["spacing-8"]};
-    background-color: ${i.V3_Colour["bg-success-hover"]};
-    border-radius: ${i.V3_Radius.full};
-    width: fit-content;
-    padding: ${i.V3_Spacing["spacing-4"]} ${i.V3_Spacing["spacing-8"]};
-    color: ${i.V3_Colour["text-success"]};
-    font-weight: ${i.V3_Font.Spec["weight-regular"]};
-    span {
-        font-weight: ${i.V3_Font.Spec["weight-semibold"]};
-    }
-`,f=l.default.div`
-    display: grid;
-    grid-template-columns: ${d.TIME_INDICATOR_WIDTH}px 1fr;
-    width: 100%;
-    overflow-x: auto;
-    overflow-y: auto;
-    flex: 1;
-    height: 100%;
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid} ${i.V3_Colour.border};
-    border-top: none;
-    border-bottom-right-radius: ${i.V3_Radius.md};
-    border-bottom-left-radius: ${i.V3_Radius.md};
-`,V=l.default.div`
-    display: grid;
-    grid-template-columns: repeat(${e=>e.$columnCount}, 1fr);
-    min-width: max-content;
-    position: relative;
-`,m=l.default.div`
-    display: flex;
-    flex-direction: column;
-    min-width: ${d.MIN_COLUMN_WIDTH}px;
-    min-height: fit-content;
-    border-right: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-        ${i.V3_Colour.border};
-    &:last-child {
-        border-right: none;
-    }
-`,C=l.default.div`
-    min-height: ${d.CELL_HEIGHT}px;
-    position: relative;
-    border-bottom: ${i.V3_Border["width-010"]} solid ${i.V3_Colour.border};
-    ${o=>o.$dashed&&e.css`
-            border-bottom-style: dashed;
-        `}
-    cursor: pointer;
-`,w=l.default(t.Typography.BodyXS)`
-    margin-top: 0;
-    overflow: hidden;
-    width: calc(100% - 27px);
-    padding: 2px ${i.V3_Spacing["spacing-8"]};
-    position: absolute;
-    top: ${e=>e.$offsetTop||0}px;
-    ${i.V3_Font["body-xs-semibold"]};
-    border-radius: ${i.V3_Radius.sm};
-    z-index: 1;
-    height: ${e=>e.$duration?e.$duration/30*d.CELL_HEIGHT-1+"px":d.CELL_HEIGHT-1+"px"};
-    display: flex;
-    justify-content: space-between;
-    background: ${o=>{switch(o.$status){case"pending":return e.css`
-                    repeating-linear-gradient(
-                        135deg,
-                        ${i.V3_Colour["bg-warning"]},
-                        ${i.V3_Colour["bg-warning"]} 5px,
-                        ${i.V3_Colour["bg-warning-hover"]} 5px,
-                        ${i.V3_Colour["bg-warning-hover"]} 10px
-                    )
-                `;case"blocked":return i.V3_Colour["bg-inverse-subtle"];case"available":return i.V3_Colour["bg-success-hover"];case"booked":return i.V3_Colour["bg-primary-subtler"];default:return i.V3_Colour.bg}}};
-
-    color: ${e=>"blocked"===e.$status?i.V3_Colour["text-inverse"]:i.V3_Colour["text-subtle"]};
-
-    border-left: ${i.V3_Border["width-040"]} solid
-        ${e=>"available"===e.$status?i.V3_Colour["icon-success"]:"none"};
-`,y=l.default.span`
-    ${i.V3_Font["body-xs-regular"]};
-`,v=l.default.span`
-    ${i.V3_Font["body-xs-semibold"]};
-`,S=l.default.div`
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: ${i.V3_Colour["icon-primary"]};
-    top: ${e=>e.$top}px;
-    z-index: 2;
-`,T=l.default.div`
-    width: 100%;
-    height: ${d.CELL_HEIGHT-1}px;
-`;exports.ArrowButton=s,exports.ArrowContainer=a,exports.BlankCell=g,exports.BodyContainer=f,exports.Description=x,exports.EmptySlot=T,exports.HeaderContainer=c,exports.LoadingContainer=p,exports.ScheduleContainer=u,exports.ServiceColumn=_,exports.ServiceContainer=$,exports.ServiceHeaderContainer=b,exports.SlotAvailability=v,exports.SlotCell=C,exports.SlotColumn=m,exports.SlotContent=w,exports.SlotGrid=V,exports.SlotTime=y,exports.Timeline=S,exports.Title=h;
+"use strict";require("./schedule-day-view.styles_8ti149.css");exports.arrowButton="a1gk5ipc",exports.arrowContainer="ac6jj8s",exports.blankCell="bcdvy5w",exports.bodyContainer="b10f0jd9",exports.description="d1s1gqx7",exports.emptySlot="e1xn1uhc",exports.headerContainer="h7zv0mp",exports.headerContainerMobile="h189uqeu",exports.loadingContainer="lfazoz2",exports.scheduleContainer="syko8xg",exports.serviceColumn="s16mh3td",exports.serviceContainer="s1shiknn",exports.serviceHeaderContainer="surbskl",exports.slotAvailability="s2as1da",exports.slotCell="s1m5etm4",exports.slotCellDashed="s5nw100",exports.slotColumn="s1ftjtjk",exports.slotContent="s1kbe3yg",exports.slotContentAvailable="s4ebyxx",exports.slotContentBlocked="s1c4k21e",exports.slotGrid="ssw76ta",exports.slotTime="s1cpyxi3",exports.timeline="t42sdto",exports.title="t1vhhu8o",exports.tokens={serviceContainer:{columnCount:"--fds-internal-scheduleDayView-serviceContainer-columnCount"},slotGrid:{columnCount:"--fds-internal-scheduleDayView-slotGrid-columnCount"},slotContent:{offsetTop:"--fds-internal-scheduleDayView-slotContent-offsetTop",height:"--fds-internal-scheduleDayView-slotContent-height"},timeline:{top:"--fds-internal-scheduleDayView-timeline-top"}};
 //# sourceMappingURL=schedule-day-view.styles.js.map

package/cjs/schedule/schedule-day-view/schedule-day-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(Button)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","Button","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    serviceContainer: {\n        columnCount:\n            \"--fds-internal-scheduleDayView-serviceContainer-columnCount\",\n    },\n    slotGrid: {\n        columnCount: \"--fds-internal-scheduleDayView-slotGrid-columnCount\",\n    },\n    slotContent: {\n        offsetTop: \"--fds-internal-scheduleDayView-slotContent-offsetTop\",\n        height: \"--fds-internal-scheduleDayView-slotContent-height\",\n    },\n    timeline: {\n        top: \"--fds-internal-scheduleDayView-timeline-top\",\n    },\n};\n\nexport const arrowButton = css`\n    color: ${Colour[\"icon\"]};\n`;\nexport const arrowContainer = css`\n    width: 2rem;\n`;\n\nexport const scheduleContainer = css`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const loadingContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const headerContainer = css`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-top-left-radius: ${Radius[\"md\"]};\n    position: sticky;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n`;\n\nexport const headerContainerMobile = css`\n    display: block;\n    overflow: hidden;\n`;\n\nexport const blankCell = css`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const serviceContainer = css`\n    ${tokens.serviceContainer.columnCount}: 1;\n    display: grid;\n    grid-template-columns: repeat(\n        var(${tokens.serviceContainer.columnCount}),\n        1fr\n    );\n`;\n\nexport const serviceColumn = css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    background: ${Colour[\"bg-strong\"]};\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const serviceHeaderContainer = css`\n    width: 15rem;\n    padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const title = css`\n    color: ${Colour[\"text-primary\"]};\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const description = css`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    background-color: ${Colour[\"bg-success-hover\"]};\n    border-radius: ${Radius[\"full\"]};\n    width: fit-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-success\"]};\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const bodyContainer = css`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n`;\n\nexport const slotGrid = css`\n    ${tokens.slotGrid.columnCount}: 1;\n    display: grid;\n    grid-template-columns: repeat(var(${tokens.slotGrid.columnCount}), 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const slotColumn = css`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const slotCell = css`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${Border[\"width-010\"]} solid ${Colour[\"border\"]};\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    padding: 0;\n    text-align: left;\n`;\n\nexport const slotCellDashed = css`\n    border-bottom-style: dashed;\n`;\n\nexport const slotContent = css`\n    ${tokens.slotContent.offsetTop}: 0px;\n    ${tokens.slotContent.height}: ${CELL_HEIGHT - 1}px;\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: var(${tokens.slotContent.offsetTop});\n    ${Font[\"body-xs-semibold\"]};\n    border-radius: ${Radius[\"sm\"]};\n    z-index: 1;\n    height: var(${tokens.slotContent.height});\n    display: flex;\n    justify-content: space-between;\n    color: ${Colour[\"text-subtle\"]};\n`;\n\nexport const slotContentBlocked = css`\n    color: ${Colour[\"text-inverse\"]};\n`;\n\nexport const slotContentAvailable = css`\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"icon-success\"]};\n`;\n\nexport const slotTime = css`\n    ${Font[\"body-xs-regular\"]};\n`;\n\nexport const slotAvailability = css`\n    ${Font[\"body-xs-semibold\"]};\n`;\n\nexport const timeline = css`\n    ${tokens.timeline.top}: 0px;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${Colour[\"icon-primary\"]};\n    top: var(${tokens.timeline.top});\n    z-index: 2;\n`;\n\nexport const emptySlot = css`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["serviceContainer","columnCount","slotGrid","slotContent","offsetTop","height","timeline","top"],"mappings":"4HA+BwB,kCAGG,4BAuCL,gCAuDI,+BAbF,6BAyGF,mCArKM,wCAaM,oCAxBL,oCANC,gCAkDJ,oCATG,0CAsBM,mCAyGN,2BA7CR,kCAWM,6BAtBJ,+BA0BC,wCAsBS,qCAJF,4BApDV,2BA4DA,4BAQA,wBAxGH,0BA5FI,CAClBA,iBAAkB,CACdC,YACI,+DAERC,SAAU,CACND,YAAa,uDAEjBE,YAAa,CACTC,UAAW,uDACXC,OAAQ,qDAEZC,SAAU,CACNC,IAAK"}

package/cjs/schedule/schedule-day-view/schedule-day-view.styles_8ti149.css

@@ -0,0 +1,30 @@
+.a1gk5ipc{color:var(--fds-colour-icon);}
+.ac6jj8s{width:2rem;}
+.syko8xg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}
+.lfazoz2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:25rem;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
+.h7zv0mp{z-index:3;max-height:130px;border-top-right-radius:var(--fds-radius-md);border-top-left-radius:var(--fds-radius-md);position:-webkit-sticky;position:sticky;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);overflow-x:hidden;overflow-y:hidden;display:-ms-grid;display:grid;-ms-grid-columns:42px 1fr;grid-template-columns:42px 1fr;}
+.h189uqeu{display:block;overflow:hidden;}
+.bcdvy5w{min-width:42px;background:var(--fds-colour-bg-strong);position:-webkit-sticky;position:sticky;left:0;}
+.s1shiknn{--fds-internal-scheduleDayView-serviceContainer-columnCount:1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(
+        var(--fds-internal-scheduleDayView-serviceContainer-columnCount),
+        1fr
+    );grid-template-columns:repeat(
+        var(--fds-internal-scheduleDayView-serviceContainer-columnCount),
+        1fr
+    );}
+.s16mh3td{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:280px;padding:var(--fds-spacing-16) var(--fds-spacing-8);background:var(--fds-colour-bg-strong);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.s16mh3td:last-child{border-right:none;}
+.surbskl{width:15rem;padding-left:var(--fds-spacing-16);}
+.t1vhhu8o{color:var(--fds-colour-text-primary);font-weight:var(--fds-font-weight-semibold);margin-top:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
+.d1s1gqx7{margin-top:var(--fds-spacing-8);background-color:var(--fds-colour-bg-success-hover);border-radius:var(--fds-radius-full);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--fds-spacing-4) var(--fds-spacing-8);color:var(--fds-colour-text-success);font-weight:var(--fds-font-weight-regular);}.d1s1gqx7 span{font-weight:var(--fds-font-weight-semibold);}
+.b10f0jd9{display:-ms-grid;display:grid;-ms-grid-columns:42px 1fr;grid-template-columns:42px 1fr;width:100%;overflow-x:auto;overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-top:none;border-bottom-right-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);}
+.ssw76ta{--fds-internal-scheduleDayView-slotGrid-columnCount:1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(var(--fds-internal-scheduleDayView-slotGrid-columnCount), 1fr);grid-template-columns:repeat(var(--fds-internal-scheduleDayView-slotGrid-columnCount), 1fr);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;position:relative;}
+.s1ftjtjk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:280px;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.s1ftjtjk:last-child{border-right:none;}
+.s1m5etm4{min-height:48px;position:relative;border-bottom:var(--fds-border-width-010) solid var(--fds-colour-border);cursor:pointer;background:none;width:100%;padding:0;text-align:left;}
+.s5nw100{border-bottom-style:dashed;}
+.s1kbe3yg{--fds-internal-scheduleDayView-slotContent-offsetTop:0px;--fds-internal-scheduleDayView-slotContent-height:47px;margin-top:0;overflow:hidden;width:calc(100% - 27px);padding:2px var(--fds-spacing-8);position:absolute;top:var(--fds-internal-scheduleDayView-slotContent-offsetTop);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);border-radius:var(--fds-radius-sm);z-index:1;height:var(--fds-internal-scheduleDayView-slotContent-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;color:var(--fds-colour-text-subtle);}
+.s1c4k21e{color:var(--fds-colour-text-inverse);}
+.s4ebyxx{border-left:var(--fds-border-width-040) solid var(--fds-colour-icon-success);}
+.s1cpyxi3{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.s2as1da{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.t42sdto{--fds-internal-scheduleDayView-timeline-top:0px;position:absolute;width:100%;height:2px;background:var(--fds-colour-icon-primary);top:var(--fds-internal-scheduleDayView-timeline-top);z-index:2;}
+.e1xn1uhc{width:100%;height:47px;}

package/cjs/schedule/schedule-header/schedule-header.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../input-select/input-select.js");require("../../util/calendar-helper.js");var r=require("../../util/date-helper.js");require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./schedule-header.style.js");exports.ScheduleHeader=l=>{var{date:n,view:s="day",minDate:o,maxDate:c,onPreviousDayClick:d,onNextDayClick:u,onCalendarDateSelect:D,onViewChange:y,onTodayClick:j}=l,h=e.__rest(l,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const p=[{label:"Day",value:"day"},{label:"Week",value:"week"}],x=p.find((e=>e.value===s));return t.jsxs(i.ScheduleHeaderWrapper,Object.assign({},h,{children:[t.jsxs(i.LeftSection,{children:[t.jsx(i.StyledButton,{styleType:"light",onClick:j,children:"Today"}),t.jsx(i.StyledDateNavigator,{selectedDate:n,minDate:o,maxDate:c,view:s,onLeftArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).subtract(1,"week");d(t.format("YYYY-MM-DD"))}else d(e)},onRightArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).add(1,"week");u(t.format("YYYY-MM-DD"))}else u(e)},onCalendarDateSelect:D})]}),t.jsxs(i.RightSection,{children:[t.jsx(i.StyledText,{children:"View by:"}),t.jsx(a.InputSelect,{options:p,selectedOption:x,onSelectOption:e=>null==y?void 0:y(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:i.DROPDOWN_WIDTH})]})]}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../../button/button.js"),r=require("../../date-navigator/date-navigator.js"),i=require("../../input-select/input-select.js"),l=require("../../typography/index.js");require("../../util/calendar-helper.js");var s=require("../../util/date-helper.js");require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./schedule-header.styles.js");exports.ScheduleHeader=o=>{var{date:c,view:d="day",minDate:u,maxDate:D,onPreviousDayClick:j,onNextDayClick:y,onCalendarDateSelect:v,onViewChange:p,onTodayClick:h}=o,x=e.__rest(o,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const m=[{label:"Day",value:"day"},{label:"Week",value:"week"}],k=m.find((e=>e.value===d));return a.jsxs("div",Object.assign({className:n.scheduleHeaderWrapper},x,{children:[a.jsxs("div",{className:n.leftSection,children:[a.jsx(t.Button,{className:n.button,styleType:"light",onClick:h,children:"Today"}),a.jsx(r.DateNavigator,{className:n.dateNavigator,selectedDate:c,minDate:u,maxDate:D,view:d,onLeftArrowClick:e=>{if("week"===d){const a=s.DateHelper.toDayjs(e).subtract(1,"week");j(a.format("YYYY-MM-DD"))}else j(e)},onRightArrowClick:e=>{if("week"===d){const a=s.DateHelper.toDayjs(e).add(1,"week");y(a.format("YYYY-MM-DD"))}else y(e)},onCalendarDateSelect:v})]}),a.jsxs("div",{className:n.rightSection,children:[a.jsx(l.Typography.BodyMD,{className:n.text,children:"View by:"}),a.jsx(i.InputSelect,{options:m,selectedOption:k,onSelectOption:e=>null==p?void 0:p(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:n.DROPDOWN_WIDTH})]})]}))};
 //# sourceMappingURL=schedule-header.js.map

package/cjs/schedule/schedule-header/schedule-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-header.js","sources":["../../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { InputSelect } from \"../../input-select\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport {\n    DROPDOWN_WIDTH,\n    LeftSection,\n    RightSection,\n    ScheduleHeaderWrapper,\n    StyledButton,\n    StyledDateNavigator,\n    StyledText,\n} from \"./schedule-header.style\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <ScheduleHeaderWrapper {...otherProps}>\n            <LeftSection>\n                <StyledButton styleType=\"light\" onClick={onTodayClick}>\n                    Today\n                </StyledButton>\n                <StyledDateNavigator\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </LeftSection>\n\n            <RightSection>\n                <StyledText>View by:</StyledText>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={DROPDOWN_WIDTH}\n                />\n            </RightSection>\n        </ScheduleHeaderWrapper>\n    );\n};\n"],"names":["_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","ScheduleHeaderWrapper","Object","assign","children","LeftSection","_jsx","StyledButton","styleType","onClick","StyledDateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","RightSection","StyledText","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","DROPDOWN_WIDTH"],"mappings":"qdA0B+BA,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAA,OAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAAA,KAACC,EAAAA,sBAAqBC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SAAA,CACjCJ,EAAAA,KAACK,EAAAA,YAAW,CAAAD,SAAA,CACRE,EAAAA,IAACC,EAAAA,aAAY,CAACC,UAAU,QAAQC,QAASlB,EAAYa,SAAA,UAGrDE,EAAAA,IAACI,EAAAA,oBAAmB,CAChBC,aAAc5B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN4B,iBA/BcC,IAC1B,GAAa,SAAT7B,EAAiB,CACjB,MACM8B,EADiBC,EAAAA,WAAWC,QAAQH,GACNI,SAAS,EAAG,QAChD9B,EAAmB2B,EAAaI,OAAO,cAC3C,MACI/B,EAAmB0B,EACvB,EAyBYM,kBAtBeN,IAC3B,GAAa,SAAT7B,EAAiB,CACjB,MACMoC,EADiBL,EAAAA,WAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCjC,EAAegC,EAASF,OAAO,cACnC,MACI9B,EAAeyB,EACnB,EAgBYxB,qBAAsBA,OAI9BW,EAAAA,KAACsB,eAAY,CAAAlB,SAAA,CACTE,EAAAA,IAACiB,EAAAA,kCACDjB,EAAAA,IAACkB,EAAAA,YAAW,CACRC,QAAS/B,EACTgC,eAAgB7B,EAChB8B,eAAiB5B,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDgC,cAAgB7B,GAAWA,EAAOJ,MAClCkC,sBAAwB9B,GAAWA,EAAOJ,MAC1CmC,cAAeC,EAAAA,uBAGH"}
+{"version":3,"file":"schedule-header.js","sources":["../../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { InputSelect } from \"../../input-select\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport * as styles from \"./schedule-header.styles\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <div className={styles.scheduleHeaderWrapper} {...otherProps}>\n            <div className={styles.leftSection}>\n                <Button\n                    className={styles.button}\n                    styleType=\"light\"\n                    onClick={onTodayClick}\n                >\n                    Today\n                </Button>\n                <DateNavigator\n                    className={styles.dateNavigator}\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </div>\n\n            <div className={styles.rightSection}>\n                <Typography.BodyMD className={styles.text}>\n                    View by:\n                </Typography.BodyMD>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={styles.DROPDOWN_WIDTH}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","Object","assign","className","styles.scheduleHeaderWrapper","styles.leftSection","children","_jsx","Button","styles.button","styleType","onClick","DateNavigator","styles.dateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","styles.rightSection","Typography","BodyMD","styles.text","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","styles.DROPDOWN_WIDTH"],"mappings":"qlBAqB+BA,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAA,OAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,OAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,EAAAA,uBAAkCZ,aAC9CQ,EAAAA,KAAA,MAAA,CAAKG,UAAWE,cAAkBC,SAAA,CAC9BC,EAAAA,IAACC,EAAAA,QACGL,UAAWM,SACXC,UAAU,QACVC,QAASpB,EAAYe,SAAA,UAIzBC,EAAAA,IAACK,gBAAa,CACVT,UAAWU,EAAAA,cACXC,aAAc/B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN+B,iBApCcC,IAC1B,GAAa,SAAThC,EAAiB,CACjB,MACMiC,EADiBC,EAAAA,WAAWC,QAAQH,GACNI,SAAS,EAAG,QAChDjC,EAAmB8B,EAAaI,OAAO,cAC3C,MACIlC,EAAmB6B,EACvB,EA8BYM,kBA3BeN,IAC3B,GAAa,SAAThC,EAAiB,CACjB,MACMuC,EADiBL,EAAAA,WAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCpC,EAAemC,EAASF,OAAO,cACnC,MACIjC,EAAe4B,EACnB,EAqBY3B,qBAAsBA,OAI9BW,OAAA,MAAA,CAAKG,UAAWsB,EAAAA,aAAmBnB,SAAA,CAC/BC,MAACmB,EAAAA,WAAWC,OAAM,CAACxB,UAAWyB,OAAWtB,SAAA,aAGzCC,EAAAA,IAACsB,EAAAA,YAAW,CACRC,QAASpC,EACTqC,eAAgBlC,EAChBmC,eAAiBjC,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDqC,cAAgBlC,GAAWA,EAAOJ,MAClCuC,sBAAwBnC,GAAWA,EAAOJ,MAC1CwC,cAAeC,EAAAA,uBAGrB"}

package/cjs/schedule/schedule-header/schedule-header.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./schedule-header.styles_1n2u5vj.css");exports.DROPDOWN_WIDTH="240px",exports.button="bzltxmo",exports.dateNavigator="d19djkwt",exports.leftSection="lzjgzr2",exports.rightSection="r1xv7b6y",exports.scheduleHeaderWrapper="smt7il1",exports.text="t1cre13t";
+//# sourceMappingURL=schedule-header.styles.js.map

package/cjs/schedule/schedule-header/schedule-header.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-header.styles.js","sources":["../../../../src/schedule/schedule-header/schedule-header.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const scheduleHeaderWrapper = css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: ${Spacing[\"spacing-16\"]};\n    color: ${Colour[\"text-primary\"]};\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const leftSection = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n`;\n\nexport const rightSection = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const dateNavigator = css`\n    width: 100%;\n    max-width: 400px;\n`;\n\nexport const text = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const button = css`\n    min-width: 5rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nexport const DROPDOWN_WIDTH = \"240px\";\n"],"names":[],"mappings":"4HA0D8B,uBAXX,gCATO,+BAtBF,+BAYC,yCArBS,uBAoCjB"}

package/cjs/schedule/schedule-header/schedule-header.styles_1n2u5vj.css

@@ -0,0 +1,6 @@
+.smt7il1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:var(--fds-spacing-16);color:var(--fds-colour-text-primary);gap:var(--fds-spacing-16);}
+.lzjgzr2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .lzjgzr2{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;}
+.r1xv7b6y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);}:where(body.fds-breakpoint-lg-max) .r1xv7b6y{display:none;}
+.d19djkwt{width:100%;max-width:400px;}
+.t1cre13t{color:var(--fds-colour-text-subtler);}
+.bzltxmo{min-width:5rem;}:where(body.fds-breakpoint-lg-max) .bzltxmo{display:none;}

package/cjs/schedule/schedule-slot-content/schedule-slot-content.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react"),s=require("../../shared/time-slot/time-slot.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var l=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var i=require("../../util/time-helper.js"),o=require("../const.js"),u=require("./style-helper.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t);exports.ScheduleSlotContent=({slot:t,offsetTop:a,classNames:c,tokens:m,clickable:d,children:h})=>{const p=i.TimeHelper.calculateDuration(t.startTime,t.endTime),q=r.useRef(null);l.useApplyStyle(q,{[m.offsetTop]:`${a}px`,[m.height]:p/30*o.CELL_HEIGHT-1+"px"});const j=u.getTimeSlotStyleProps(t.status);return e.jsx(s.TimeSlot,{ref:q,className:n.default(c.container,"blocked"===t.status&&c.blocked,"available"===t.status&&c.available),styleType:j.styleType,bgColor:j.bgColor,bgColor2:j.bgColor2,clickable:d,onClick:e=>{var r;return null===(r=t.onClick)||void 0===r?void 0:r.call(t,t,e)},children:h})};
+//# sourceMappingURL=schedule-slot-content.js.map

package/cjs/schedule/schedule-slot-content/schedule-slot-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-slot-content.js","sources":["../../../../src/schedule/schedule-slot-content/schedule-slot-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { TimeSlot } from \"../../shared/time-slot\";\nimport { useApplyStyle } from \"../../theme\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { CELL_HEIGHT } from \"../const\";\nimport type { ScheduleSlotProps } from \"../types\";\nimport { getTimeSlotStyleProps } from \"./style-helper\";\n\ninterface SlotContentClassNames {\n    container: string;\n    blocked: string;\n    available: string;\n}\n\ninterface SlotContentTokens {\n    offsetTop: string;\n    height: string;\n}\n\ninterface ScheduleSlotContentProps {\n    slot: ScheduleSlotProps;\n    offsetTop: number;\n    classNames: SlotContentClassNames;\n    tokens: SlotContentTokens;\n    clickable?: boolean;\n    children: React.ReactNode;\n}\n\nexport const ScheduleSlotContent = ({\n    slot,\n    offsetTop,\n    classNames,\n    tokens,\n    clickable,\n    children,\n}: ScheduleSlotContentProps) => {\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n    const slotContentRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(slotContentRef, {\n        [tokens.offsetTop]: `${offsetTop}px`,\n        [tokens.height]: `${(duration / 30) * CELL_HEIGHT - 1}px`,\n    });\n\n    const slotStyleProps = getTimeSlotStyleProps(slot.status);\n\n    return (\n        <TimeSlot\n            ref={slotContentRef}\n            className={clsx(\n                classNames.container,\n                slot.status === \"blocked\" && classNames.blocked,\n                slot.status === \"available\" && classNames.available\n            )}\n            styleType={slotStyleProps.styleType}\n            bgColor={slotStyleProps.bgColor}\n            bgColor2={slotStyleProps.bgColor2}\n            clickable={clickable}\n            onClick={(e: React.MouseEvent) => slot.onClick?.(slot, e)}\n        >\n            {children}\n        </TimeSlot>\n    );\n};\n"],"names":["slot","offsetTop","classNames","tokens","clickable","children","duration","TimeHelper","calculateDuration","startTime","endTime","slotContentRef","useRef","useApplyStyle","height","CELL_HEIGHT","slotStyleProps","getTimeSlotStyleProps","status","_jsx","TimeSlot","ref","className","clsx","container","blocked","available","styleType","bgColor","bgColor2","onClick","e","_a","call"],"mappings":"ksBA+BmC,EAC/BA,OACAC,YACAC,aACAC,SACAC,YACAC,eAEA,MAAMC,EAAWC,EAAAA,WAAWC,kBAAkBR,EAAKS,UAAWT,EAAKU,SAC7DC,EAAiBC,EAAAA,OAAuB,MAE9CC,EAAAA,cAAcF,EAAgB,CAC1B,CAACR,EAAOF,WAAY,GAAGA,MACvB,CAACE,EAAOW,QAAaR,EAAW,GAAMS,EAAAA,YAAc,EAAnC,OAGrB,MAAMC,EAAiBC,EAAAA,sBAAsBjB,EAAKkB,QAElD,OACIC,MAACC,EAAAA,SAAQ,CACLC,IAAKV,EACLW,UAAWC,EAAAA,QACPrB,EAAWsB,UACK,YAAhBxB,EAAKkB,QAAwBhB,EAAWuB,QACxB,cAAhBzB,EAAKkB,QAA0BhB,EAAWwB,WAE9CC,UAAWX,EAAeW,UAC1BC,QAASZ,EAAeY,QACxBC,SAAUb,EAAea,SACzBzB,UAAWA,EACX0B,QAAUC,IAAuB,IAAAC,EAAC,OAAY,UAAZhC,EAAK8B,eAAO,IAAAE,OAAA,EAAAA,EAAAC,KAAAjC,EAAGA,EAAM+B,EAAE,WAExD1B,GACM"}

package/cjs/schedule/schedule-slot-content/style-helper.js

@@ -0,0 +1,2 @@
+"use strict";require("../../theme/theme-provider/index.js"),require("react"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var e=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js");exports.getTimeSlotStyleProps=r=>{switch(r){case"pending":return{styleType:"stripes",bgColor:e.Colour["bg-warning"],bgColor2:e.Colour["bg-warning-hover"]};case"blocked":return{styleType:"default",bgColor:e.Colour["bg-inverse-subtle"]};case"available":return{styleType:"default",bgColor:e.Colour["bg-success-hover"]};case"booked":return{styleType:"default",bgColor:e.Colour["bg-primary-subtler"]};default:return{styleType:"default",bgColor:e.Colour.bg}}};
+//# sourceMappingURL=style-helper.js.map

package/cjs/schedule/schedule-slot-content/style-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-helper.js","sources":["../../../../src/schedule/schedule-slot-content/style-helper.ts"],"sourcesContent":["import type { SlotStyle } from \"../../shared/time-slot\";\nimport { Colour } from \"../../theme\";\nimport type { ScheduleSlotProps } from \"../types\";\n\nexport interface TimeSlotStyleProps {\n    styleType: SlotStyle;\n    bgColor: string;\n    bgColor2?: string;\n}\n\nexport const getTimeSlotStyleProps = (\n    status: ScheduleSlotProps[\"status\"]\n): TimeSlotStyleProps => {\n    switch (status) {\n        case \"pending\":\n            return {\n                styleType: \"stripes\",\n                bgColor: Colour[\"bg-warning\"],\n                bgColor2: Colour[\"bg-warning-hover\"],\n            };\n        case \"blocked\":\n            return {\n                styleType: \"default\",\n                bgColor: Colour[\"bg-inverse-subtle\"],\n            };\n        case \"available\":\n            return {\n                styleType: \"default\",\n                bgColor: Colour[\"bg-success-hover\"],\n            };\n        case \"booked\":\n            return {\n                styleType: \"default\",\n                bgColor: Colour[\"bg-primary-subtler\"],\n            };\n        default:\n            return {\n                styleType: \"default\",\n                bgColor: Colour[\"bg\"],\n            };\n    }\n};\n"],"names":["status","styleType","bgColor","Colour","bgColor2"],"mappings":"qkBAWIA,IAEA,OAAQA,GACJ,IAAK,UACD,MAAO,CACHC,UAAW,UACXC,QAASC,EAAAA,OAAO,cAChBC,SAAUD,EAAAA,OAAO,qBAEzB,IAAK,UACD,MAAO,CACHF,UAAW,UACXC,QAASC,EAAAA,OAAO,sBAExB,IAAK,YACD,MAAO,CACHF,UAAW,UACXC,QAASC,EAAAA,OAAO,qBAExB,IAAK,SACD,MAAO,CACHF,UAAW,UACXC,QAASC,EAAAA,OAAO,uBAExB,QACI,MAAO,CACHF,UAAW,UACXC,QAASC,EAAAA,OAAW"}

package/cjs/schedule/schedule-week-view/schedule-week-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("../../external/dayjs/dayjs.min.js"),r=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("../../shared/internal-calendar/day-cell/day-cell.js"),s=require("../../util/time-helper.js"),n=require("../schedule-day-view/schedule-day-view.styles.js"),l=require("../shared/hooks.js"),d=require("../time-indicator/time-indicator.js"),c=require("./schedule-week-view.styles.js"),o=require("./time-cell.js"),m=require("./week-view-utils.js");exports.ScheduleWeekView=({date:u,serviceData:j,loading:h,minTime:x,maxTime:f,initialScrollTime:y,containerRef:S,blockedMessage:g,onClickHiddenSlots:p})=>{const T=l.useTimelineOffset(x,f),q=l.useInitialScroll(h,x,y),v=r.useMemo((()=>{const e=i.default(u).startOf("week");return Array.from({length:7},((i,r)=>e.add(r,"day")))}),[u]),k=r.useMemo((()=>s.TimeHelper.generateTimings(30,"24hr",x,f)),[x,f]),C=r.useMemo((()=>m.calculateSlotWidths(j,v,k)),[j,v,k]),D=i.default();return e.jsx(n.ScheduleContainer,{children:h?e.jsx(c.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(c.HeaderContainer,{children:[e.jsx(c.BlankCell,{}),e.jsx(c.ServiceContainer,{children:v.map((r=>{const t=(e=>{const i=e.isSame(D,"day"),r={labelType:i?"current":"available",interactive:void 0};return i&&(r.circleLeft="selected-outline",r.circleRight="selected-outline"),r})(r);return e.jsxs(c.ServiceHeader,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:i.default(u)},t)),e.jsx(c.Description,{children:r.format("ddd")})]},r.format("YYYY-MM-DD"))}))})]}),e.jsxs(c.BodyContainer,{ref:q,children:[e.jsx(d.TimeIndicator,{minTime:x,maxTime:f,format:"24hr",timelineOffset:T,isWeekView:!0}),e.jsx(c.SlotGrid,{children:v.map((i=>{const r=i.format("YYYY-MM-DD");return e.jsxs(c.SlotColumn,{children:[null!==T&&i.isSame(D,"day")&&e.jsx(c.Timeline,{$top:T}),k.map((i=>e.jsx(o.TimeCell,{dayDate:r,time:i,serviceData:j,slotLayoutMap:C,containerRef:S,blockedMessage:g,onClickHiddenSlots:p},i)))]},r)}))})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("../../external/dayjs/dayjs.min.js"),s=require("react"),r=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),t=require("../../shared/internal-calendar/day-cell/day-cell.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var a=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var l=require("../../typography/index.js"),n=require("../../util/time-helper.js"),d=require("../schedule-day-view/schedule-day-view.styles.js"),o=require("../shared/hooks.js");require("clsx"),require("../../shared/time-slot/time-slot.js");var c=require("../time-indicator/time-indicator.js"),m=require("./schedule-week-view.styles.js"),u=require("./time-cell.js"),h=require("./week-view-utils.js");const j=({top:i})=>{const r=s.useRef(null);return a.useApplyStyle(r,{[m.tokens.timeline.top]:`${i}px`}),e.jsx("div",{ref:r,className:m.timeline})};exports.ScheduleWeekView=({date:a,serviceData:y,loading:p,minTime:v,maxTime:x,initialScrollTime:q,containerRef:f,blockedMessage:g,onClickHiddenSlots:k})=>{const T=o.useTimelineOffset(v,x),C=o.useInitialScroll(p,v,q),M=s.useMemo((()=>{const e=i.default(a).startOf("week");return Array.from({length:7},((i,s)=>e.add(s,"day")))}),[a]),N=s.useMemo((()=>n.TimeHelper.generateTimings(30,"24hr",v,x)),[v,x]),D=s.useMemo((()=>h.calculateSlotWidths(y,M,N)),[y,M,N]),S=i.default();return e.jsx("div",{className:d.scheduleContainer,children:p?e.jsx("div",{className:m.loadingContainer,children:e.jsx(r.ThemedLoadingSpinner,{"data-testid":"loading-spinner"})}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:m.headerContainer,children:[e.jsx("div",{className:m.blankCell}),e.jsx("div",{className:m.serviceContainer,children:M.map((s=>{const r=(e=>{const i=e.isSame(S,"day"),s={labelType:i?"current":"available",interactive:void 0};return i&&(s.circleLeft="selected-outline",s.circleRight="selected-outline"),s})(s);return e.jsxs("div",{className:m.serviceHeader,children:[e.jsx(t.DayCell,Object.assign({date:s,calendarDate:i.default(a)},r)),e.jsx(l.Typography.BodyMD,{className:m.description,children:s.format("ddd")})]},s.format("YYYY-MM-DD"))}))})]}),e.jsxs("div",{className:m.bodyContainer,ref:C,children:[e.jsx(c.TimeIndicator,{minTime:v,maxTime:x,format:"24hr",timelineOffset:T,isWeekView:!0}),e.jsx("div",{className:m.slotGrid,children:M.map((i=>{const s=i.format("YYYY-MM-DD");return e.jsxs("div",{className:m.slotColumn,children:[null!==T&&i.isSame(S,"day")&&e.jsx(j,{top:T}),N.map((i=>e.jsx(u.TimeCell,{dayDate:s,time:i,serviceData:y,slotLayoutMap:D,containerRef:f,blockedMessage:g,onClickHiddenSlots:k},i)))]},s)}))})]})]})})};
 //# sourceMappingURL=schedule-week-view.js.map

package/cjs/schedule/schedule-week-view/schedule-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-week-view.js","sources":["../../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ScheduleContainer } from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../shared\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport {\n    BlankCell,\n    BodyContainer,\n    Description,\n    HeaderContainer,\n    LoadingContainer,\n    ServiceContainer,\n    ServiceHeader,\n    SlotColumn,\n    SlotGrid,\n    Timeline,\n} from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: undefined,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderContainer>\n                <BlankCell />\n                <ServiceContainer>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <ServiceHeader key={day.format(\"YYYY-MM-DD\")}>\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Description>{day.format(\"ddd\")}</Description>\n                            </ServiceHeader>\n                        );\n                    })}\n                </ServiceContainer>\n            </HeaderContainer>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <SlotGrid>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <SlotColumn key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <Timeline $top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </SlotColumn>\n                );\n            })}\n        </SlotGrid>\n    );\n\n    const renderBodyContainer = () => (\n        <BodyContainer ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </BodyContainer>\n    );\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","_jsx","ScheduleContainer","children","LoadingContainer","ThemedLoadingSpinner","_jsxs","HeaderContainer","BlankCell","ServiceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","undefined","circleLeft","circleRight","generateStyleProps","ServiceHeader","DayCell","calendarDate","Description","format","BodyContainer","ref","TimeIndicator","isWeekView","SlotGrid","dayDate","SlotColumn","Timeline","$top","time","TimeCell"],"mappings":"2jBA8BgC,EAC5BA,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAAA,kBAAkBP,EAASC,GAC5CO,EAAUC,EAAAA,iBAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,EAAAA,SAAQ,KACrB,MAAMC,EAAcC,EAAAA,QAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,EAAAA,SAAQ,IACfW,EAAAA,WAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,EAAAA,SAAQ,IACnBc,sBAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,EAAAA,UAwFd,OACIc,MAACC,EAAAA,kBAAiB,CAAAC,SACb9B,EACG4B,MAACG,EAAAA,iBAAgB,CAAAD,SACbF,EAAAA,IAACI,uBAAoB,CAAA,KAGzBC,EAAAA,2BArEJA,EAAAA,KAACC,EAAAA,2BACGN,EAAAA,IAACO,EAAAA,cACDP,EAAAA,IAACQ,EAAAA,iBAAgB,CAAAN,SACZnB,EAAS0B,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOd,EAAO,OAE5BY,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,iBAAaC,GAQjB,OALIJ,IACAD,EAAkBM,WAAa,mBAC/BN,EAAkBO,YAAc,oBAG7BP,CAAiB,EAYkBQ,CAAmBT,GAC7C,OACIL,EAAAA,KAACe,EAAAA,yBACGpB,EAAAA,IAACqB,EAAAA,uBACGnD,KAAMwC,EACNY,aAAcpC,EAAAA,QAAMhB,IAChByC,IAERX,EAAAA,IAACuB,EAAAA,YAAW,CAAArB,SAAEQ,EAAIc,OAAO,WANTd,EAAIc,OAAO,cAOf,SAqCpCnB,OAACoB,EAAAA,cAAa,CAACC,IAAK7C,EAAOqB,SAAA,CACvBF,EAAAA,IAAC2B,EAAAA,cAAa,CACVtD,QAASA,EACTC,QAASA,EACTkD,OAAO,OACP7C,eAAgBA,EAChBiD,YAAY,IAlCpB5B,EAAAA,IAAC6B,EAAAA,SAAQ,CAAA3B,SACJnB,EAAS0B,KAAKC,IACX,MAAMoB,EAAUpB,EAAIc,OAAO,cAC3B,OACInB,EAAAA,KAAC0B,EAAAA,WAAU,CAAA7B,SAAA,CACa,OAAnBvB,GACG+B,EAAIG,OAAOd,EAAO,QACdC,EAAAA,IAACgC,EAAAA,SAAQ,CAAAC,KAAOtD,IAEvBe,EAAUe,KAAKyB,GACZlC,EAAAA,IAACmC,EAAAA,SAAQ,CAELL,QAASA,EACTI,KAAMA,EACN/D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfwD,OAPAJ,EAiBJ,aA+BL"}
+{"version":3,"file":"schedule-week-view.js","sources":["../../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as dayViewStyles from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../schedule-slot-content\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport * as styles from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\ninterface WeekTimelineProps {\n    top: number;\n}\n\nconst WeekTimeline = ({ top }: WeekTimelineProps) => {\n    const timelineRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(timelineRef, {\n        [styles.tokens.timeline.top]: `${top}px`,\n    });\n\n    return <div ref={timelineRef} className={styles.timeline} />;\n};\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: undefined,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <div className={styles.headerContainer}>\n                <div className={styles.blankCell} />\n                <div className={styles.serviceContainer}>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <div\n                                className={styles.serviceHeader}\n                                key={day.format(\"YYYY-MM-DD\")}\n                            >\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Typography.BodyMD\n                                    className={styles.description}\n                                >\n                                    {day.format(\"ddd\")}\n                                </Typography.BodyMD>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <div className={styles.slotGrid}>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <div className={styles.slotColumn} key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <WeekTimeline top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </div>\n                );\n            })}\n        </div>\n    );\n\n    const renderBodyContainer = () => (\n        <div className={styles.bodyContainer} ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </div>\n    );\n\n    return (\n        <div className={dayViewStyles.scheduleContainer}>\n            {loading ? (\n                <div className={styles.loadingContainer}>\n                    <ThemedLoadingSpinner data-testid=\"loading-spinner\" />\n                </div>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["WeekTimeline","top","timelineRef","useRef","useApplyStyle","styles.tokens","timeline","_jsx","ref","className","styles.timeline","date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","dayViewStyles.scheduleContainer","children","styles.loadingContainer","ThemedLoadingSpinner","_jsxs","styles.headerContainer","styles.blankCell","styles.serviceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","undefined","circleLeft","circleRight","generateStyleProps","styles.serviceHeader","DayCell","Object","assign","calendarDate","Typography","BodyMD","styles.description","format","styles.bodyContainer","TimeIndicator","isWeekView","styles.slotGrid","dayDate","styles.slotColumn","time","TimeCell"],"mappings":"0/BAqBA,MAAMA,EAAe,EAAGC,UACpB,MAAMC,EAAcC,EAAAA,OAAuB,MAM3C,OAJAC,EAAAA,cAAcF,EAAa,CACvB,CAACG,EAAAA,OAAcC,SAASL,KAAM,GAAGA,QAG9BM,EAAAA,IAAA,MAAA,CAAKC,IAAKN,EAAaO,UAAWC,EAAAA,UAAmB,2BAOhC,EAC5BC,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAAA,kBAAkBP,EAASC,GAC5CO,EAAUC,EAAAA,iBAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,EAAAA,SAAQ,KACrB,MAAMC,EAAcC,EAAAA,QAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,EAAAA,SAAQ,IACfW,EAAAA,WAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,EAAAA,SAAQ,IACnBc,sBAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,EAAAA,UA+Fd,OACIpB,EAAAA,IAAA,MAAA,CAAKE,UAAWgC,EAAAA,kBAA+BC,SAC1C7B,EACGN,EAAAA,IAAA,MAAA,CAAKE,UAAWkC,EAAAA,iBAAuBD,SACnCnC,EAAAA,IAACqC,EAAAA,oCAAiC,sBAGtCC,EAAAA,2BA5EJA,EAAAA,KAAA,MAAA,CAAKpC,UAAWqC,EAAAA,gBAAsBJ,SAAA,CAClCnC,EAAAA,IAAA,MAAA,CAAKE,UAAWsC,EAAAA,YAChBxC,EAAAA,IAAA,MAAA,CAAKE,UAAWuC,mBAAuBN,SAClClB,EAASyB,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOb,EAAO,OAE5BW,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,iBAAaC,GAQjB,OALIJ,IACAD,EAAkBM,WAAa,mBAC/BN,EAAkBO,YAAc,oBAG7BP,CAAiB,EAYkBQ,CAAmBT,GAC7C,OACIL,EAAAA,KAAA,MAAA,CACIpC,UAAWmD,EAAAA,cAAoBlB,SAAA,CAG/BnC,MAACsD,EAAAA,QAAOC,OAAAC,OAAA,CACJpD,KAAMuC,EACNc,aAAcrC,EAAAA,QAAMhB,IAChBwC,IAER5C,EAAAA,IAAC0D,aAAWC,OAAM,CACdzD,UAAW0D,EAAAA,YAAkBzB,SAE5BQ,EAAIkB,OAAO,WAVXlB,EAAIkB,OAAO,cAYd,SAqC1BvB,EAAAA,KAAA,MAAA,CAAKpC,UAAW4D,EAAAA,cAAsB7D,IAAKc,YACvCf,EAAAA,IAAC+D,EAAAA,eACGxD,QAASA,EACTC,QAASA,EACTqD,OAAO,OACPhD,eAAgBA,EAChBmD,YAAY,IAlCpBhE,MAAA,MAAA,CAAKE,UAAW+D,EAAAA,SAAe9B,SAC1BlB,EAASyB,KAAKC,IACX,MAAMuB,EAAUvB,EAAIkB,OAAO,cAC3B,OACIvB,EAAAA,KAAA,MAAA,CAAKpC,UAAWiE,EAAAA,WAAiBhC,SAAA,CACT,OAAnBtB,GACG8B,EAAIG,OAAOb,EAAO,QACdjC,EAAAA,IAACP,EAAY,CAACC,IAAKmB,IAE1Be,EAAUc,KAAK0B,GACZpE,EAAAA,IAACqE,EAAAA,UAEGH,QAASA,EACTE,KAAMA,EACN/D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfwD,OAPuBF,EAiBlC,aA+BZ"}