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

package/timetable/timetable-row/row-bar.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import e from"../../external/dayjs/dayjs.min.js";import{useMemo as r}from"react";import{TimeHelper as o}from"../../util/time-helper.js";import{ROW_INTERVAL as m}from"../const.js";import{RowCellContainer as i}from"./row-bar.style.js";import{RowCell as s}from"./row-cell.js";const a=({id:a,name:n,timetableMinTime:d,timetableMaxTime:l,rowMinTime:u,rowMaxTime:T,rowCells:H,rowBarColor:c,intervalWidth:f,containerRef:p,outOfRangeCellPopover:v})=>{const h=u?o.roundToNearestInterval(u,m):d,b=T?o.roundToNearestInterval(T,m,!0):l,g=r((()=>{const t=[];h&&e(d,"HH:mm").isBefore(e(h,"HH:mm"))&&t.push({id:a,startTime:d,endTime:h,status:"blocked",customPopover:v});const r=[...H].sort(((t,r)=>{const o=e(t.startTime,"HH:mm"),m=e(r.startTime,"HH:mm");return o.isBefore(m)?-1:o.isAfter(m)?1:0}));let i;return r.forEach(((r,s)=>{var n;const{startTime:d,endTime:l}=r;let u=o.roundToNearestInterval(d,m);i&&e(u,"HH:mm").isBefore(e(i,"HH:mm"))&&(u=o.roundToNearestInterval(d,m,!0));const T=o.roundToNearestInterval(l,m,!0);t.push(Object.assign(Object.assign({},r),{roundedStartTime:u,roundedEndTime:T,isFocusable:!0}));const c=(null===(n=H[s+1])||void 0===n?void 0:n.startTime)||b,f=e(o.roundToNearestInterval(c,m),"HH:mm");let p=e(T,"HH:mm");for(;p.isBefore(f);)if(v=f,p.get("hour")!=v.get("hour")){const e=p.add(1,"hour").startOf("hour");t.push({id:a,startTime:p.format("HH:mm").toString(),endTime:e.format("HH:mm").toString(),status:"disabled"}),p=e}else t.push({id:a,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var v;i=p.format("HH:mm").toString()})),b&&e(l,"HH:mm").isAfter(e(b,"HH:mm"))&&t.push({id:a,startTime:b,endTime:l,status:"blocked",customPopover:v}),0!==r.length||u||T||t.push({id:a,startTime:d,endTime:l,status:"blocked",customPopover:v}),t}),[h,d,H,b,l,u,T,a,v]);return t(i,{"data-testid":"timetable-row",role:"presentation",children:g.map(((e,r)=>{return t(s,Object.assign({},e,{ariaColIndex:(l=e.roundedStartTime||e.startTime,(o.timeToMinutes(l)-o.timeToMinutes(d))/m+2),ariaColSpan:(i=e.roundedStartTime||e.startTime,a=e.roundedEndTime||e.endTime,(o.timeToMinutes(a)-o.timeToMinutes(i))/m),rowName:n,intervalWidth:f,rowBarColor:c,containerRef:p}),`${r}-row-cell-key`);var i,a,l}))})};export{a as RowBar};
+import{jsx as e}from"react/jsx-runtime";import t from"../../external/dayjs/dayjs.min.js";import{useMemo as r}from"react";import{TimeHelper as o}from"../../util/time-helper.js";import{ROW_INTERVAL as m}from"../const.js";import{rowCellContainer as i}from"./row-bar.styles.js";import{RowCell as s}from"./row-cell.js";const a=({id:a,name:n,timetableMinTime:d,timetableMaxTime:l,rowMinTime:u,rowMaxTime:T,rowCells:H,rowBarColor:c,intervalWidth:f,containerRef:p,outOfRangeCellPopover:v})=>{const h=u?o.roundToNearestInterval(u,m):d,b=T?o.roundToNearestInterval(T,m,!0):l,g=r((()=>{const e=[];h&&t(d,"HH:mm").isBefore(t(h,"HH:mm"))&&e.push({id:a,startTime:d,endTime:h,status:"blocked",customPopover:v});const r=[...H].sort(((e,r)=>{const o=t(e.startTime,"HH:mm"),m=t(r.startTime,"HH:mm");return o.isBefore(m)?-1:o.isAfter(m)?1:0}));let i;return r.forEach(((r,s)=>{var n;const{startTime:d,endTime:l}=r;let u=o.roundToNearestInterval(d,m);i&&t(u,"HH:mm").isBefore(t(i,"HH:mm"))&&(u=o.roundToNearestInterval(d,m,!0));const T=o.roundToNearestInterval(l,m,!0);e.push(Object.assign(Object.assign({},r),{roundedStartTime:u,roundedEndTime:T,isFocusable:!0}));const c=(null===(n=H[s+1])||void 0===n?void 0:n.startTime)||b,f=t(o.roundToNearestInterval(c,m),"HH:mm");let p=t(T,"HH:mm");for(;p.isBefore(f);)if(v=f,p.get("hour")!=v.get("hour")){const t=p.add(1,"hour").startOf("hour");e.push({id:a,startTime:p.format("HH:mm").toString(),endTime:t.format("HH:mm").toString(),status:"disabled"}),p=t}else e.push({id:a,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var v;i=p.format("HH:mm").toString()})),b&&t(l,"HH:mm").isAfter(t(b,"HH:mm"))&&e.push({id:a,startTime:b,endTime:l,status:"blocked",customPopover:v}),0!==r.length||u||T||e.push({id:a,startTime:d,endTime:l,status:"blocked",customPopover:v}),e}),[h,d,H,b,l,u,T,a,v]);return e("div",{className:i,"data-testid":"timetable-row",role:"presentation",children:g.map(((t,r)=>{return e(s,Object.assign({},t,{ariaColIndex:(l=t.roundedStartTime||t.startTime,(o.timeToMinutes(l)-o.timeToMinutes(d))/m+2),ariaColSpan:(i=t.roundedStartTime||t.startTime,a=t.roundedEndTime||t.endTime,(o.timeToMinutes(a)-o.timeToMinutes(i))/m),rowName:n,intervalWidth:f,rowBarColor:c,containerRef:p}),`${r}-row-cell-key`);var i,a,l}))})};export{a as RowBar};
 //# sourceMappingURL=row-bar.js.map

package/timetable/timetable-row/row-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-bar.js","sources":["../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <RowCellContainer data-testid=\"timetable-row\" role=\"presentation\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["RowBar","id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","role","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"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"}
+{"version":3,"file":"row-bar.js","sources":["../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport * as styles from \"./row-bar.styles\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <div\n            className={styles.rowCellContainer}\n            data-testid=\"timetable-row\"\n            role=\"presentation\"\n        >\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["RowBar","id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","className","styles.rowCellContainer","role","children","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"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"}

package/timetable/timetable-row/row-bar.styles.d.ts

@@ -0,0 +1 @@
+export declare const rowCellContainer: import("@linaria/core").LinariaClassName;

package/timetable/timetable-row/row-bar.styles.js

@@ -0,0 +1,2 @@
+import"./row-bar.styles_1x0vrsz.css";const t="r1vzjzkv";export{t as rowCellContainer};
+//# sourceMappingURL=row-bar.styles.js.map

package/timetable/timetable-row/row-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-bar.styles.js","sources":["../../../src/timetable/timetable-row/row-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const rowCellContainer = css`\n    display: flex;\n    width: 100%;\n`;\n"],"names":["rowCellContainer"],"mappings":"4EAEO,MAAMA,EAAgB"}

package/timetable/timetable-row/row-bar.styles_1x0vrsz.css

@@ -0,0 +1 @@
+.r1vzjzkv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}

package/timetable/timetable-row/row-cell.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as r}from"react/jsx-runtime";import e from"../../external/dayjs/dayjs.min.js";import i from"react";import{concatIds as t,VisuallyHidden as l}from"../../shared/accessibility/index.js";import"../../util/calendar-helper.js";import{DateHelper as a}from"../../util/date-helper.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as n}from"../../util/time-helper.js";import{ROW_INTERVAL as m,ROW_CELL_GAP as s}from"../const.js";import{BlockContainer as d,Wrapper as c,Block as u,BlockTitle as p,BlockDescription as h,Gap as C}from"./row-cell.style.js";import{WithOptionalPopover as v}from"./with-optional-popover.js";const g=i.memo((({id:i,startTime:g,endTime:j,title:$,subtitle:b,status:f,intervalWidth:k,rowBarColor:T,customPopover:y,cellStyleAttributes:w,isFocusable:x,roundedStartTime:H=g,roundedEndTime:B=j,ariaColIndex:A,ariaColSpan:I,rowName:P,onClick:S})=>{const M=0===e(B,"HH:mm").get("minutes"),D=a.getTimeDiffInMinutes(H,B)/m*k-s,E=!!S||y&&"click"===y.trigger,F=t(`${n.formatTimeRange(g,j)}`,P,$,b,`${f}`),N=o=>{S&&S({id:i,startTime:g,endTime:j,status:f,title:$,subtitle:b,customPopover:y},o)};return o(d,{"data-testid":"block-container",$isOnTheHour:M,role:"gridcell","aria-colindex":A,"aria-colspan":I,children:o(v,{customPopover:y,children:r(c,{children:[r(u,{$width:D,$status:f,$mainColor:T.mainColor,$altColor:T.alternateColor,$isClickable:E,$customMainColor:null==w?void 0:w.backgroundColor,$customAltColor:null==w?void 0:w.altBackgroundColor,$customHoverColor:null==w?void 0:w.hoverBackgroundColor,$customAltHoverColor:null==w?void 0:w.altHoverBackgroundColor,$styleType:null==w?void 0:w.styleType,tabIndex:x?0:void 0,onClick:N,children:[o(l,{children:F}),$&&o(p,{weight:"semibold","aria-hidden":!0,children:$}),b&&o(h,{weight:"bold","aria-hidden":!0,children:b})]}),o(C,{})]})})},"block-container-key")}));export{g as RowCell};
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import r from"clsx";import l from"../../external/dayjs/dayjs.min.js";import t,{useRef as i}from"react";import{concatIds as s,VisuallyHidden as a}from"../../shared/accessibility/index.js";import{TimeSlot as n}from"../../shared/time-slot/time-slot.js";import"../../theme/theme-provider/index.js";import{formatUnitValue as m}from"../../theme/utils/css-variable.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as d}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as p}from"../../typography/index.js";import"../../util/calendar-helper.js";import{DateHelper as u}from"../../util/date-helper.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as b}from"../../util/time-helper.js";import{ROW_INTERVAL as C,ROW_CELL_GAP as h}from"../const.js";import{tokens as g,blockContainer as v,blockContainerOnTheHour as y,wrapper as f,block as k,blockTitle as j,blockDescription as T,gap as x}from"./row-cell.styles.js";import{WithOptionalPopover as B}from"./with-optional-popover.js";const w={stripes:"stripes",solid:"default"},N={blocked:{styleType:"stripes",bgColor:d["bg-stronger"],bgColor2:d["bg-strongest"],nonClickableCursor:"not-allowed"},filled:{styleType:"default",bgColor:`var(${g.block.mainColor})`},disabled:{styleType:"default",bgColor:d["bg-disabled"],nonClickableCursor:"not-allowed"},pending:{styleType:"stripes",bgColor:`var(${g.block.mainColor})`,bgColor2:`var(${g.block.altColor})`,nonClickableCursor:"not-allowed"},default:{styleType:"default",bgColor:"transparent",hoverBgColor:d["bg-hover-subtle"]}},S=t.memo((({id:t,startTime:d,endTime:S,title:$,subtitle:H,status:I,intervalWidth:P,rowBarColor:q,customPopover:M,cellStyleAttributes:A,isFocusable:D,roundedStartTime:E=d,roundedEndTime:F=S,ariaColIndex:R,ariaColSpan:W,rowName:X,onClick:z})=>{const G=0===l(F,"HH:mm").get("minutes"),J=u.getTimeDiffInMinutes(E,F)/C*P-h,K=!!z||M&&"click"===M.trigger,L=s(`${b.formatTimeRange(d,S)}`,X,$,H,`${I}`),O=i(null);c(O,{[g.block.width]:m(J,"px"),[g.block.mainColor]:q.mainColor,[g.block.altColor]:q.alternateColor});const Q=o=>{z&&z({id:t,startTime:d,endTime:S,status:I,title:$,subtitle:H,customPopover:M},o)};return o("div",{"data-testid":"block-container",className:r(v,G&&y),role:"gridcell","aria-colindex":R,"aria-colspan":W,children:(()=>{var r;const{styleType:l,bgColor:t,bgColor2:i,hoverBgColor:s,hoverBgColor2:m,nonClickableCursor:d}=N[I],c=null!==(r=null==A?void 0:A.styleType)&&void 0!==r?r:"default",u="default"===c?l:w[c],b=(null==A?void 0:A.backgroundColor)||t,C=(null==A?void 0:A.altBackgroundColor)||i,h=(null==A?void 0:A.hoverBackgroundColor)||s,g=(null==A?void 0:A.altHoverBackgroundColor)||m;return o(B,{customPopover:M,children:e("div",{className:f,children:[e(n,{className:k,ref:O,clickable:K,bgColor:b,bgColor2:C,hoverBgColor:h,hoverBgColor2:g,nonClickableCursor:d,onClick:Q,styleType:u,tabIndex:D?0:void 0,children:[o(a,{children:L}),$&&o(p.BodySM,{className:j,weight:"semibold","aria-hidden":!0,children:$}),H&&o(p.BodyXS,{className:T,weight:"bold","aria-hidden":!0,children:H})]}),o("div",{className:x})]})})})()},"block-container-key")}));export{S as RowCell};
 //# sourceMappingURL=row-cell.js.map

package/timetable/timetable-row/row-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-cell.js","sources":["../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DateHelper } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport {\n    Block,\n    BlockContainer,\n    BlockDescription,\n    BlockTitle,\n    Gap,\n    Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n    containerRef: RefObject<HTMLDivElement>;\n    intervalWidth: number;\n    rowBarColor: RowBarColors;\n    ariaColIndex: number;\n    ariaColSpan: number;\n    rowName: string;\n}\n\nconst Component = ({\n    id,\n    startTime,\n    endTime,\n    title,\n    subtitle,\n    status,\n    intervalWidth,\n    rowBarColor,\n    customPopover,\n    cellStyleAttributes,\n    isFocusable,\n    roundedStartTime = startTime,\n    roundedEndTime = endTime,\n    ariaColIndex,\n    ariaColSpan,\n    rowName,\n    onClick,\n}: RowCellProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n    const numberOfIntervals =\n        DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n        ROW_INTERVAL;\n    const totalCellWidth = numberOfIntervals * intervalWidth;\n    const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n    const isClickable =\n        !!onClick || (customPopover && customPopover.trigger === \"click\");\n    const rowAriaLabel = concatIds(\n        `${TimeHelper.formatTimeRange(startTime, endTime)}`,\n        rowName,\n        title,\n        subtitle,\n        `${status}`\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleCellClick = (event: React.MouseEvent) => {\n        if (onClick) {\n            onClick(\n                {\n                    id,\n                    startTime,\n                    endTime,\n                    status,\n                    title,\n                    subtitle,\n                    customPopover,\n                },\n                event\n            );\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCellContent = () => (\n        <WithOptionalPopover customPopover={customPopover}>\n            <Wrapper>\n                <Block\n                    $width={adjustedCellWidth}\n                    $status={status}\n                    $mainColor={rowBarColor.mainColor}\n                    $altColor={rowBarColor.alternateColor}\n                    $isClickable={isClickable}\n                    $customMainColor={cellStyleAttributes?.backgroundColor}\n                    $customAltColor={cellStyleAttributes?.altBackgroundColor}\n                    $customHoverColor={\n                        cellStyleAttributes?.hoverBackgroundColor\n                    }\n                    $customAltHoverColor={\n                        cellStyleAttributes?.altHoverBackgroundColor\n                    }\n                    $styleType={cellStyleAttributes?.styleType}\n                    tabIndex={isFocusable ? 0 : undefined}\n                    onClick={handleCellClick}\n                >\n                    <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n                    {title && (\n                        <BlockTitle weight={\"semibold\"} aria-hidden>\n                            {title}\n                        </BlockTitle>\n                    )}\n                    {subtitle && (\n                        <BlockDescription weight={\"bold\"} aria-hidden>\n                            {subtitle}\n                        </BlockDescription>\n                    )}\n                </Block>\n                <Gap />\n            </Wrapper>\n        </WithOptionalPopover>\n    );\n\n    return (\n        <BlockContainer\n            key={`block-container-key`}\n            data-testid={`block-container`}\n            $isOnTheHour={isOnTheHour}\n            role=\"gridcell\"\n            aria-colindex={ariaColIndex}\n            aria-colspan={ariaColSpan}\n        >\n            {renderCellContent()}\n        </BlockContainer>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","customPopover","cellStyleAttributes","isFocusable","roundedStartTime","roundedEndTime","ariaColIndex","ariaColSpan","rowName","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","rowAriaLabel","concatIds","TimeHelper","formatTimeRange","handleCellClick","event","_jsx","BlockContainer","$isOnTheHour","role","children","WithOptionalPopover","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","tabIndex","undefined","VisuallyHidden","BlockTitle","weight","BlockDescription","Gap"],"mappings":"2sBA+BA,MAiHaA,EAAUC,EAAMC,MAjHX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,gBACAC,sBACAC,cACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,eACAC,cACAC,UACAC,cAKA,MAAMC,EAAgE,IAAlDC,EAAMN,EAAgB,SAASO,IAAI,WAKjDC,EAHFC,EAAWC,qBAAqBX,EAAkBC,GAClDW,EACuCjB,EACAkB,EACrCC,IACAT,GAAYR,GAA2C,UAA1BA,EAAckB,QAC3CC,EAAeC,EACjB,GAAGC,EAAWC,gBAAgB7B,EAAWC,KACzCa,EACAZ,EACAC,EACA,GAAGC,KAMD0B,EAAmBC,IACjBhB,GACAA,EACI,CACIhB,KACAC,YACAC,UACAG,SACAF,QACAC,WACAI,iBAEJwB,EAER,EA4CJ,OACIC,EAACC,EAAc,CAAA,cAEE,kBAAiBC,aAChBlB,EACdmB,KAAK,2BACUvB,EAAY,eACbC,EAAWuB,SA5C7BJ,EAACK,EAAmB,CAAC9B,cAAeA,EAAa6B,SAC7CE,EAACC,EAAO,CAAAH,SAAA,CACJE,EAACE,EAAK,CAAAC,OACMtB,EAAiBuB,QAChBtC,EAAMuC,WACHrC,EAAYsC,UAASC,UACtBvC,EAAYwC,eAAcC,aACvBvB,EAAWwB,iBACPxC,aAAmB,EAAnBA,EAAqByC,gBAAeC,gBACrC1C,aAAmB,EAAnBA,EAAqB2C,mBAAkBC,kBAEpD5C,aAAmB,EAAnBA,EAAqB6C,qBAAoBC,qBAGzC9C,aAAmB,EAAnBA,EAAqB+C,wBAAuBC,WAEpChD,aAAmB,EAAnBA,EAAqBiD,UACjCC,SAAUjD,EAAc,OAAIkD,EAC5B5C,QAASe,EAAeM,SAAA,CAExBJ,EAAC4B,EAAc,CAAAxB,SAAEV,IAChBxB,GACG8B,EAAC6B,EAAU,CAACC,OAAQ,WAAU,eAAA,EAAA1B,SACzBlC,IAGRC,GACG6B,EAAC+B,EAAgB,CAACD,OAAQ,OAAM,eAAA,EAAA1B,SAC3BjC,OAIb6B,EAACgC,EAAG,CAAA,SAOH,sBAQQ"}
+{"version":3,"file":"row-cell.js","sources":["../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React, { useRef } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport type { SlotStyle, TimeSlotProps } from \"../../shared/time-slot\";\nimport { TimeSlot } from \"../../shared/time-slot\";\nimport { Colour, formatUnitValue, useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableCellType } from \"../types\";\nimport * as styles from \"./row-cell.styles\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n    containerRef: RefObject<HTMLDivElement>;\n    intervalWidth: number;\n    rowBarColor: RowBarColors;\n    ariaColIndex: number;\n    ariaColSpan: number;\n    rowName: string;\n}\n\nconst styleTypeToSlotType: Record<\"solid\" | \"stripes\", SlotStyle> = {\n    stripes: \"stripes\",\n    solid: \"default\",\n};\n\nconst statusToTimeSlotPropsMap: Record<\n    TimeTableCellType,\n    Pick<\n        TimeSlotProps,\n        | \"bgColor\"\n        | \"bgColor2\"\n        | \"hoverBgColor\"\n        | \"hoverBgColor2\"\n        | \"styleType\"\n        | \"nonClickableCursor\"\n    >\n> = {\n    blocked: {\n        styleType: \"stripes\",\n        bgColor: Colour[\"bg-stronger\"],\n        bgColor2: Colour[\"bg-strongest\"],\n        nonClickableCursor: \"not-allowed\",\n    },\n    filled: {\n        styleType: \"default\",\n        bgColor: `var(${styles.tokens.block.mainColor})`,\n    },\n    disabled: {\n        styleType: \"default\",\n        bgColor: Colour[\"bg-disabled\"],\n        nonClickableCursor: \"not-allowed\",\n    },\n    pending: {\n        styleType: \"stripes\",\n        bgColor: `var(${styles.tokens.block.mainColor})`,\n        bgColor2: `var(${styles.tokens.block.altColor})`,\n        nonClickableCursor: \"not-allowed\",\n    },\n    default: {\n        styleType: \"default\",\n        bgColor: \"transparent\",\n        hoverBgColor: Colour[\"bg-hover-subtle\"],\n    },\n};\n\nconst Component = ({\n    id,\n    startTime,\n    endTime,\n    title,\n    subtitle,\n    status,\n    intervalWidth,\n    rowBarColor,\n    customPopover,\n    cellStyleAttributes,\n    isFocusable,\n    roundedStartTime = startTime,\n    roundedEndTime = endTime,\n    ariaColIndex,\n    ariaColSpan,\n    rowName,\n    onClick,\n}: RowCellProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n    const numberOfIntervals =\n        DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n        ROW_INTERVAL;\n    const totalCellWidth = numberOfIntervals * intervalWidth;\n    const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n    const isClickable =\n        !!onClick || (customPopover && customPopover.trigger === \"click\");\n    const rowAriaLabel = concatIds(\n        `${TimeHelper.formatTimeRange(startTime, endTime)}`,\n        rowName,\n        title,\n        subtitle,\n        `${status}`\n    );\n\n    const blockRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(blockRef, {\n        [styles.tokens.block.width]: formatUnitValue(adjustedCellWidth, \"px\"),\n        [styles.tokens.block.mainColor]: rowBarColor.mainColor,\n        [styles.tokens.block.altColor]: rowBarColor.alternateColor,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleCellClick = (event: React.MouseEvent) => {\n        if (onClick) {\n            onClick(\n                {\n                    id,\n                    startTime,\n                    endTime,\n                    status,\n                    title,\n                    subtitle,\n                    customPopover,\n                },\n                event\n            );\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCellContent = () => {\n        const {\n            styleType,\n            bgColor,\n            bgColor2,\n            hoverBgColor,\n            hoverBgColor2,\n            nonClickableCursor,\n        } = statusToTimeSlotPropsMap[status];\n\n        const timetableStyleType = cellStyleAttributes?.styleType ?? \"default\";\n        const timeslotStyleType =\n            timetableStyleType === \"default\"\n                ? styleType\n                : styleTypeToSlotType[timetableStyleType];\n        const customBgColor = cellStyleAttributes?.backgroundColor || bgColor;\n        const customBg2Color =\n            cellStyleAttributes?.altBackgroundColor || bgColor2;\n        const customHoverBgColor =\n            cellStyleAttributes?.hoverBackgroundColor || hoverBgColor;\n        const customHoverBg2Color =\n            cellStyleAttributes?.altHoverBackgroundColor || hoverBgColor2;\n\n        return (\n            <WithOptionalPopover customPopover={customPopover}>\n                <div className={styles.wrapper}>\n                    <TimeSlot\n                        className={styles.block}\n                        ref={blockRef}\n                        clickable={isClickable}\n                        bgColor={customBgColor}\n                        bgColor2={customBg2Color}\n                        hoverBgColor={customHoverBgColor}\n                        hoverBgColor2={customHoverBg2Color}\n                        nonClickableCursor={nonClickableCursor}\n                        onClick={handleCellClick}\n                        styleType={timeslotStyleType}\n                        tabIndex={isFocusable ? 0 : undefined}\n                    >\n                        <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n                        {title && (\n                            <Typography.BodySM\n                                className={styles.blockTitle}\n                                weight=\"semibold\"\n                                aria-hidden\n                            >\n                                {title}\n                            </Typography.BodySM>\n                        )}\n                        {subtitle && (\n                            <Typography.BodyXS\n                                className={styles.blockDescription}\n                                weight=\"bold\"\n                                aria-hidden\n                            >\n                                {subtitle}\n                            </Typography.BodyXS>\n                        )}\n                    </TimeSlot>\n                    <div className={styles.gap} />\n                </div>\n            </WithOptionalPopover>\n        );\n    };\n\n    return (\n        <div\n            key={`block-container-key`}\n            data-testid={`block-container`}\n            className={clsx(\n                styles.blockContainer,\n                isOnTheHour && styles.blockContainerOnTheHour\n            )}\n            role=\"gridcell\"\n            aria-colindex={ariaColIndex}\n            aria-colspan={ariaColSpan}\n        >\n            {renderCellContent()}\n        </div>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["styleTypeToSlotType","stripes","solid","statusToTimeSlotPropsMap","blocked","styleType","bgColor","Colour","bgColor2","nonClickableCursor","filled","styles.tokens","block","mainColor","disabled","pending","altColor","default","hoverBgColor","RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","customPopover","cellStyleAttributes","isFocusable","roundedStartTime","roundedEndTime","ariaColIndex","ariaColSpan","rowName","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","rowAriaLabel","concatIds","TimeHelper","formatTimeRange","blockRef","useRef","useApplyStyle","width","formatUnitValue","alternateColor","handleCellClick","event","_jsx","className","clsx","styles.blockContainer","styles.blockContainerOnTheHour","role","children","hoverBgColor2","timetableStyleType","_a","timeslotStyleType","customBgColor","backgroundColor","customBg2Color","altBackgroundColor","customHoverBgColor","hoverBackgroundColor","customHoverBg2Color","altHoverBackgroundColor","WithOptionalPopover","_jsxs","styles.wrapper","TimeSlot","styles.block","ref","clickable","tabIndex","undefined","VisuallyHidden","Typography","BodySM","styles.blockTitle","weight","BodyXS","styles.blockDescription","styles.gap","renderCellContent"],"mappings":"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"}

package/timetable/timetable-row/row-cell.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const tokens: {
+    block: {
+        mainColor: string;
+        altColor: string;
+        width: string;
+    };
+};
+export declare const blockContainer: import("@linaria/core").LinariaClassName;
+export declare const blockContainerOnTheHour: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const gap: import("@linaria/core").LinariaClassName;
+export declare const block: import("@linaria/core").LinariaClassName;
+export declare const blockTitle: import("@linaria/core").LinariaClassName;
+export declare const blockDescription: import("@linaria/core").LinariaClassName;

package/timetable/timetable-row/row-cell.styles.js

@@ -0,0 +1,2 @@
+import"./row-cell.styles_y1dl5j.css";const l={block:{mainColor:"--fds-internal-timetable-rowCellBlock-mainColor",altColor:"--fds-internal-timetable-rowCellBlock-altColor",width:"--fds-internal-timetable-rowCellBlock-width"}},t="brs2fuo",o="b1tkj60f",e="w3l6hrm",r="g1ly7zml",i="byp749t",b="bhkclis",a="bbb5nib";export{i as block,t as blockContainer,o as blockContainerOnTheHour,a as blockDescription,b as blockTitle,r as gap,l as tokens,e as wrapper};
+//# sourceMappingURL=row-cell.styles.js.map

package/timetable/timetable-row/row-cell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-cell.styles.js","sources":["../../../src/timetable/timetable-row/row-cell.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    block: {\n        mainColor: \"--fds-internal-timetable-rowCellBlock-mainColor\",\n        altColor: \"--fds-internal-timetable-rowCellBlock-altColor\",\n        width: \"--fds-internal-timetable-rowCellBlock-width\",\n    },\n};\n\nexport const blockContainer = css`\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const blockContainerOnTheHour = css`\n    box-shadow: inset -0.5px 0px ${Colour[\"border-primary\"]};\n`;\n\nexport const wrapper = css`\n    display: flex;\n    margin-bottom: 2px;\n    height: 65px;\n`;\n\nexport const gap = css`\n    width: 2px;\n    height: 100%;\n`;\n\nexport const block = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.block.width}: initial;\n    ${tokens.block.mainColor}: initial;\n    ${tokens.block.altColor}: initial;\n\n    height: 100%;\n    width: var(${tokens.block.width});\n    border-radius: ${Radius[\"sm\"]};\n    box-sizing: border-box;\n    padding: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const blockTitle = css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const blockDescription = css`\n    color: ${Colour[\"text-subtler\"]};\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n"],"names":["tokens","block","mainColor","altColor","width","blockContainer","blockContainerOnTheHour","wrapper","gap","blockTitle","blockDescription"],"mappings":"4EAIO,MAAMA,EAAS,CAClBC,MAAO,CACHC,UAAW,kDACXC,SAAU,iDACVC,MAAO,gDAIFC,EAAc,UAIdC,EAAuB,WAIvBC,EAAO,UAMPC,EAAG,WAKHP,EAAK,UAaLQ,EAAU,UAMVC,EAAgB"}

package/timetable/timetable-row/row-cell.styles_y1dl5j.css

@@ -0,0 +1,7 @@
+.brs2fuo{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.b1tkj60f{box-shadow:inset -0.5px 0px var(--fds-colour-border-primary);}
+.w3l6hrm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:2px;height:65px;}
+.g1ly7zml{width:2px;height:100%;}
+.byp749t{--fds-internal-timetable-rowCellBlock-width:initial;--fds-internal-timetable-rowCellBlock-mainColor:initial;--fds-internal-timetable-rowCellBlock-altColor:initial;height:100%;width:var(--fds-internal-timetable-rowCellBlock-width);border-radius:var(--fds-radius-sm);box-sizing:border-box;padding:var(--fds-spacing-4);}
+.bhkclis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.bbb5nib{color:var(--fds-colour-text-subtler);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

package/timetable/timetable-row/with-optional-popover.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"clsx";import"react";import"../../theme/theme-provider/context.js";import"../../typography/typography.js";import"../../card/card.styles_1gh9gs3.css";import"../../markup/markup.js";import"../../modal-v2/index.js";import"../../theme/theme-provider/index.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../popover-v2/popover.styles_lslc72.css";import{PopoverTrigger as r}from"../../popover-v2/popover-trigger.js";import"../../popover-v2/popover-inline/popover-inline.styles_ziag9c.css";const e=({children:e,customPopover:o})=>{if(!o)return e;const i={position:"bottom-start",customOffset:o.offset,children:e,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(r,Object.assign({},i))};export{e as WithOptionalPopover};
+import{jsx as t}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"clsx";import"react";import"../../theme/theme-provider/context.js";import"../../typography/typography.js";import"../../card/card.styles_1gh9gs3.css";import"../../markup/markup.js";import"../../modal-v2/index.js";import"../../theme/theme-provider/index.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as e}from"../../popover/popover-trigger.js";import"../../popover/popover-inline/popover-inline.styles_bkopnt.css";const r=({children:r,customPopover:o})=>{if(!o)return r;const i={position:"bottom-start",customOffset:o.offset,children:r,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(e,Object.assign({},i))};export{r as WithOptionalPopover};
 //# sourceMappingURL=with-optional-popover.js.map

package/timetable/timetable-row/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["WithOptionalPopover","children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"y4BASO,MAAMA,EAAsB,EAC/BC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["WithOptionalPopover","children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"66BASO,MAAMA,EAAsB,EAC/BC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

package/timetable/timetable.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as a,useRef as i,useState as n,useImperativeHandle as l,useEffect as d,createElement as s}from"react";import c from"../external/dayjs/dayjs.min.js";import{l as m}from"../external/lodash/lodash.js";import{useResizeDetector as h}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as u}from"../shared/accessibility/index.js";import{TimeHelper as f}from"../util/time-helper.js";import{ROW_INTERVAL as p,ROW_HEADER_WIDTH as b,MIN_INTERVAL_WIDTH as w,ROW_BAR_COLOR_ALTERNATE_COLOR as g,ROW_BAR_COLOR_SEQUENCE as y}from"./const.js";import{Container as D,EmptyTableContainer as C,NoResultsFound as $,Loader as v,TimeTableContainer as x,TimeTableHeaderRow as T,RowColumnHeader as R,ColumnHeaderRow as S,ColumnHeader as j,ColumnHeaderTitle as k,TimeTableBody as H,TimeTableRow as M,ClickableRowHeaderTitle as P,RowHeaderSubtitle as N,RowHeader as I,LoadingBar as A,LoadingWrapper as L,LoadingCell as O,StyledPopoverTrigger as z}from"./timetable.style.js";import{TimeTableHeader as E}from"./timetable-header/timetable-header.js";import{RowBar as Y}from"./timetable-row/row-bar.js";const F=a(((a,F)=>{const{date:W,emptyContentMessage:_,rowData:B,loading:X,minTime:q="00:00",maxTime:G="23:00",initialScrollTime:J,minDate:K,maxDate:Q,totalRecords:U,showCurrentDateAsToday:V,showDateAsShortForm:Z,onPage:ee,onRefresh:te,onNextDayClick:re,onPreviousDayClick:oe,onCalendarDateSelect:ae,roundInitialScrollTime:ie=!0}=a,ne=e(a,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),le=ne["data-testid"]||"timetable",de=f.roundToNearestInterval(q,60),se=f.roundToNearestInterval(G,60,!0),ce=f.generateHourlyIntervals(de,se),me=Math.ceil(60*ce.length/p),he=`Timetable of resource availability, for ${c(W).format("D MMMM YYYY")}, from ${c(de,"HH:mm").format("ha")} to ${c(se,"HH:mm").format("ha")}`,ue=(U||B.length)+1,fe=me+1,pe=0===U||m.isEmpty(B),be=pe||B.length===U,we=i(null),ge=i(null),[ye,De]=n(!1),[Ce,$e]=n(!1),[ve,xe]=n(0),[Te,Re]=n(!1);l(F,(()=>({resetScroll:ke}))),d((()=>{const e=m.throttle((()=>{if(we.current&&(De(we.current.scrollLeft>0),$e(we.current.scrollTop>0)),Te||!we.current)return;const{scrollTop:e,clientHeight:t,scrollHeight:r}=we.current;Math.ceil(e+t)>=r-1&&!be&&ee&&!X&&(Re(!0),ee())}),100),t=we.current;return t&&t.addEventListener("scroll",e),()=>{t&&t.removeEventListener("scroll",e)}}),[be,Te,X,ee]),d((()=>{Re(!1)}),[B]),d((()=>{ke()}),[J,ve,de,se]);h({onResize:()=>{if(we.current){const e=Math.ceil(60*ce.length/p),t=(we.current.clientWidth-b)/e;xe(t>w?t:w)}},targetRef:we,refreshMode:"debounce",refreshRate:50});const Se=(()=>{let e=0;const t=y.length;return()=>{const r=y[e],o=g[e];return e=(e+1)%t,{mainColor:r,alternateColor:o}}})(),je=(e,t)=>{if(!e.rowHeaderPopover)return t;const r={position:"bottom-start",customOffset:e.rowHeaderPopover.offset,children:t,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return s(z,Object.assign({},r,{key:`${e.id}-popover-trigger`,zIndex:2}),t)},ke=()=>{if(J&&we.current&&ve>0){const e=f.calculateScrollPosition({scrollTime:J,minTime:de,maxTime:se,interval:p,intervalWidth:ve,options:{roundToInterval:ie}});null!==e&&(we.current.scrollLeft=e)}},He=e=>{const a=t(o,{children:[r(P,{$isClickable:!!e.onRowNameClick,onClick:t=>((e,t)=>{e.onRowNameClick&&e.onRowNameClick(e,t)})(e,t),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),r(N,{weight:"bold",$show:!!e.subtitle,"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]});return r(I,{$isScrolled:ye,role:"rowheader","aria-colindex":1,children:je(e,a)},`${e.id}-row-header`)},Me=()=>{if(!X&&Te)return t(M,{children:[r(I,{$isScrolled:ye,children:r(A,{})}),r(L,{"data-testid":"lazy-loader",role:"presentation",children:ce.map(((e,t)=>r(O,{$width:4*ve,children:r(A,{})},`lazy-load-cell-${t}`)))})]})};return t(D,pe?Object.assign({},ne,{"data-testid":le,children:[r(E,{selectedDate:W,loading:X||Te,tableContainerRef:we,minDate:K,maxDate:Q,totalRecords:U,showCurrentDateAsToday:V,showDateAsShortForm:Z,onPreviousDayClick:oe,onNextDayClick:re,onRefresh:te,onCalendarDateSelect:ae}),r(C,{className:"empty-container",tabIndex:0,"aria-live":"polite","aria-atomic":!0,"aria-busy":X,children:X?t(o,{children:[r(u,{children:`Loading ${he}`}),r(v,{$isEmptyContent:pe})]}):r($,{type:"no-item-found",description:_})})]}):Object.assign({},ne,{"data-testid":le,children:[r(E,{"data-id":"timetable-date-navigator",selectedDate:W,loading:X||Te,tableContainerRef:we,minDate:K,maxDate:Q,totalRecords:U,showCurrentDateAsToday:V,showDateAsShortForm:Z,onPreviousDayClick:oe,onNextDayClick:re,onRefresh:te,onCalendarDateSelect:ae}),t(x,{"data-id":"timetable-container","data-testid":"timetable-container",ref:we,$loading:X,$allRecordsLoaded:be||!ee,role:"grid","aria-label":he,"aria-rowcount":ue,"aria-colcount":fe,"aria-busy":Te,tabIndex:0,children:[t(T,{role:"row","aria-rowindex":1,"data-testid":"row-header-column-id",children:[r(R,{$isScrolledY:Ce,$isScrolledX:ye,role:"columnheader","aria-colindex":1,children:r(u,{children:"Resource"})}),r(S,{$numOfColumns:ce.length,$intervalWidth:ve,$isScrolled:Ce,role:"presentation",children:ce.map((e=>r(j,{"data-testid":`${e}-column`,children:r(k,{weight:"semibold",children:e})},`${e}-column-key`)))})]}),X?r(v,{$isEmptyContent:pe}):t(H,{"data-testid":"content-container-id",ref:ge,role:"rowgroup",children:[B.map(((e,o)=>t(M,{role:"row","aria-rowindex":o+2,"aria-label":e.name,children:[He(e),r(Y,Object.assign({timetableMinTime:de,timetableMaxTime:se,rowBarColor:Se(),intervalWidth:ve,containerRef:ge},e),`${o}-row-bar`)]},`${o}-timetable-row`))),Me()]})]})]}))}));export{F as TimeTable};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as a,useRef as i,useState as n,useImperativeHandle as l,useEffect as s,createElement as d}from"react";import m from"clsx";import c from"../external/dayjs/dayjs.min.js";import{l as p}from"../external/lodash/lodash.js";import{useResizeDetector as h}from"../external/react-resize-detector/build/index.esm.js";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as u}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{ErrorDisplay as f}from"../error-display/error-display.js";import{Typography as v}from"../typography/index.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as g}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as y}from"../popover/popover-trigger.js";import"../popover/popover-inline/popover-inline.styles_bkopnt.css";import{VisuallyHidden as b}from"../shared/accessibility/index.js";import{TimeHelper as w}from"../util/time-helper.js";import{ROW_INTERVAL as j,ROW_HEADER_WIDTH as D,MIN_INTERVAL_WIDTH as x,ROW_BAR_COLOR_ALTERNATE_COLOR as C,ROW_BAR_COLOR_SEQUENCE as N}from"./const.js";import{tokens as T,noResultsFound as k,loadingSpinner as R,loadingSpinnerEmptyContent as M,loadingSpinnerHasContent as H,emptyTableContainer as S,timeTableHeaderRow as P,rowColumnHeader as A,rowColumnHeaderScrolled as _,rowColumnHeaderScrolledX as $,rowColumnHeaderScrolledY as I,columnHeaderRow as W,columnHeaderRowScrolled as z,timeTableContainer as L,timeTableContainerNotAllLoaded as O,timeTableContainerLoading as B,columnHeader as F,columnHeaderTitle as Y,timeTableBody as E,timeTableRow as G,clickableRowHeaderTitle as q,clickableRowHeaderTitleClickable as X,rowHeaderSubtitle as J,rowHeaderSubtitleHidden as K,rowHeader as Q,rowHeaderScrolled as U,loadingBar as V,loadingWrapper as Z,loadingCell as ee,popoverTrigger as te}from"./timetable.styles.js";import{TimeTableHeader as re}from"./timetable-header/timetable-header.js";import{RowBar as oe}from"./timetable-row/row-bar.js";const ae=a(((a,ae)=>{const{date:ie,emptyContentMessage:ne,rowData:le,loading:se,minTime:de="00:00",maxTime:me="23:00",initialScrollTime:ce,minDate:pe,maxDate:he,totalRecords:ue,showCurrentDateAsToday:fe,showDateAsShortForm:ve,onPage:ge,onRefresh:ye,onNextDayClick:be,onPreviousDayClick:we,onCalendarDateSelect:je,roundInitialScrollTime:De=!0}=a,xe=e(a,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),Ce=xe["data-testid"]||"timetable",Ne=w.roundToNearestInterval(de,60),Te=w.roundToNearestInterval(me,60,!0),ke=w.generateHourlyIntervals(Ne,Te),Re=Math.ceil(60*ke.length/j),Me=`Timetable of resource availability, for ${c(ie).format("D MMMM YYYY")}, from ${c(Ne,"HH:mm").format("ha")} to ${c(Te,"HH:mm").format("ha")}`,He=(ue||le.length)+1,Se=Re+1,Pe=0===ue||p.isEmpty(le),Ae=Pe||le.length===ue,_e=!Ae&&!!ge,$e=i(null),Ie=i(null),We=i(null),ze=i(null),[Le,Oe]=n(!1),[Be,Fe]=n(!1),[Ye,Ee]=n(0),[Ge,qe]=n(!1);l(ae,(()=>({resetScroll:Ke}))),g(We,{[T.columnHeaderRow.columnWidth]:4*Ye+"px"}),g(ze,{[T.loadingWrapper.cellWidth]:4*Ye+"px"}),s((()=>{const e=p.throttle((()=>{if($e.current&&(Oe($e.current.scrollLeft>0),Fe($e.current.scrollTop>0)),Ge||!$e.current)return;const{scrollTop:e,clientHeight:t,scrollHeight:r}=$e.current;Math.ceil(e+t)>=r-1&&!Ae&&ge&&!se&&(qe(!0),ge())}),100),t=$e.current;return t&&t.addEventListener("scroll",e),()=>{t&&t.removeEventListener("scroll",e)}}),[Ae,Ge,se,ge]),s((()=>{qe(!1)}),[le]),s((()=>{Ke()}),[ce,Ye,Ne,Te]);h({onResize:()=>{if($e.current){const e=Math.ceil(60*ke.length/j),t=($e.current.clientWidth-D)/e;Ee(t>x?t:x)}},targetRef:$e,refreshMode:"debounce",refreshRate:50});const Xe=(()=>{let e=0;const t=N.length;return()=>{const r=N[e],o=C[e];return e=(e+1)%t,{mainColor:r,alternateColor:o}}})(),Je=(e,t)=>{if(!e.rowHeaderPopover)return t;const r={position:"bottom-start",customOffset:e.rowHeaderPopover.offset,children:t,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return d(y,Object.assign({},r,{className:te,key:`${e.id}-popover-trigger`,zIndex:2}),t)},Ke=()=>{if(ce&&$e.current&&Ye>0){const e=w.calculateScrollPosition({scrollTime:ce,minTime:Ne,maxTime:Te,interval:j,intervalWidth:Ye,options:{roundToInterval:De}});null!==e&&($e.current.scrollLeft=e)}},Qe=e=>{const a=t(o,{children:[r(v.BodyMD,{className:m(q,!!e.onRowNameClick&&X),onClick:t=>((e,t)=>{e.onRowNameClick&&e.onRowNameClick(e,t)})(e,t),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),r(v.BodyXS,{weight:"bold",className:m(J,!e.subtitle&&K),"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]});return r("div",{className:m(Q,Le&&U),role:"rowheader","aria-colindex":1,children:Je(e,a)},`${e.id}-row-header`)},Ue=()=>{if(!se&&Ge)return t("div",{className:G,children:[r("div",{className:m(Q,Le&&U),children:r("div",{className:V})}),r("div",{ref:ze,className:Z,"data-testid":"lazy-loader",role:"presentation",children:ke.map(((e,t)=>r("div",{className:ee,children:r("div",{className:V})},`lazy-load-cell-${t}`)))})]})};return t("div",Pe?Object.assign({},xe,{"data-testid":Ce,children:[r(re,{selectedDate:ie,loading:se||Ge,tableContainerRef:$e,minDate:pe,maxDate:he,totalRecords:ue,showCurrentDateAsToday:fe,showDateAsShortForm:ve,onPreviousDayClick:we,onNextDayClick:be,onRefresh:ye,onCalendarDateSelect:je}),r("div",{className:m(S,"empty-container"),tabIndex:0,"aria-live":"polite","aria-atomic":!0,"aria-busy":se,children:se?t(o,{children:[r(b,{children:`Loading ${Me}`}),r(u,{"data-testid":"timetable-loading-spinner",className:m(R,Pe?M:H)})]}):r(f,{className:k,type:"no-item-found",description:ne})})]}):Object.assign({},xe,{"data-testid":Ce,children:[r(re,{"data-id":"timetable-date-navigator",selectedDate:ie,loading:se||Ge,tableContainerRef:$e,minDate:pe,maxDate:he,totalRecords:ue,showCurrentDateAsToday:fe,showDateAsShortForm:ve,onPreviousDayClick:we,onNextDayClick:be,onRefresh:ye,onCalendarDateSelect:je}),t("div",{"data-id":"timetable-container","data-testid":"timetable-container",ref:$e,className:m(L,_e&&O,se&&B),role:"grid","aria-label":Me,"aria-rowcount":He,"aria-colcount":Se,"aria-busy":Ge,tabIndex:0,children:[t("div",{className:P,role:"row","aria-rowindex":1,"data-testid":"row-header-column-id",children:[r("div",{className:m(A,(Le||Be)&&_,Le&&$,Be&&I),role:"columnheader","aria-colindex":1,children:r(b,{children:"Resource"})}),r("div",{ref:We,className:m(W,Be&&z),role:"presentation",children:ke.map((e=>r("div",{className:F,"data-testid":`${e}-column`,children:r(v.BodySM,{className:Y,weight:"semibold",children:e})},`${e}-column-key`)))})]}),se?r(u,{"data-testid":"timetable-loading-spinner",className:m(R,Pe?M:H)}):t("div",{className:E,"data-testid":"content-container-id",ref:Ie,role:"rowgroup",children:[le.map(((e,o)=>t("div",{className:G,role:"row","aria-rowindex":o+2,"aria-label":e.name,children:[Qe(e),r(oe,Object.assign({timetableMinTime:Ne,timetableMaxTime:Te,rowBarColor:Xe(),intervalWidth:Ye,containerRef:Ie},e),`${o}-row-bar`)]},`${o}-timetable-row`))),Ue()]})]})]}))}));export{ae as TimeTable};
 //# sourceMappingURL=timetable.js.map

package/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../src/timetable/timetable.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { PopoverV2TriggerProps } from \"../popover-v2\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport {\n    ClickableRowHeaderTitle,\n    ColumnHeader,\n    ColumnHeaderRow,\n    ColumnHeaderTitle,\n    Container,\n    EmptyTableContainer,\n    Loader,\n    LoadingBar,\n    LoadingCell,\n    LoadingWrapper,\n    NoResultsFound,\n    RowColumnHeader,\n    RowHeader,\n    RowHeaderSubtitle,\n    StyledPopoverTrigger,\n    TimeTableBody,\n    TimeTableContainer,\n    TimeTableHeaderRow,\n    TimeTableRow,\n} from \"./timetable.style\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverV2TriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <StyledPopoverTrigger\n                {...popoverTriggerProps}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </StyledPopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <ClickableRowHeaderTitle\n                    $isClickable={!!data.onRowNameClick}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </ClickableRowHeaderTitle>\n\n                <RowHeaderSubtitle\n                    weight=\"bold\"\n                    $show={!!data.subtitle}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </RowHeaderSubtitle>\n            </>\n        );\n\n        return (\n            <RowHeader\n                $isScrolled={isScrolledX}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </RowHeader>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <ColumnHeader\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <ColumnHeaderTitle weight={\"semibold\"}>\n                    {columnHeader}\n                </ColumnHeaderTitle>\n            </ColumnHeader>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n        return (\n            <TimeTableBody\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <TimeTableRow\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </TimeTableRow>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </TimeTableBody>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <TimeTableRow>\n                <RowHeader $isScrolled={isScrolledX}>\n                    <LoadingBar />\n                </RowHeader>\n                <LoadingWrapper data-testid=\"lazy-loader\" role=\"presentation\">\n                    {hourlyIntervals.map((_, index) => (\n                        <LoadingCell\n                            key={`lazy-load-cell-${index}`}\n                            $width={intervalWidth * 4}\n                        >\n                            <LoadingBar />\n                        </LoadingCell>\n                    ))}\n                </LoadingWrapper>\n            </TimeTableRow>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <EmptyTableContainer\n                    className=\"empty-container\"\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <NoResultsFound\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <Loader $isEmptyContent={isEmptyContent}></Loader>\n                        </>\n                    )}\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n\n    return (\n        <Container {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <TimeTableContainer\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                $loading={loading}\n                $allRecordsLoaded={allRecordsLoaded || !onPage}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <TimeTableHeaderRow\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <RowColumnHeader\n                        $isScrolledY={isScrolledY}\n                        $isScrolledX={isScrolledX}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </RowColumnHeader>\n                    <ColumnHeaderRow\n                        $numOfColumns={hourlyIntervals.length}\n                        $intervalWidth={intervalWidth}\n                        $isScrolled={isScrolledY}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </ColumnHeaderRow>\n                </TimeTableHeaderRow>\n                {renderRows()}\n            </TimeTableContainer>\n        </Container>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","Object","assign","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","ClickableRowHeaderTitle","$isClickable","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","subtitle","RowHeader","$isScrolled","role","renderLazyLoadRow","TimeTableRow","LoadingBar","LoadingWrapper","map","_","index","LoadingCell","$width","Container","TimeTableHeader","selectedDate","EmptyTableContainer","className","tabIndex","VisuallyHidden","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","TimeTableHeaderRow","RowColumnHeader","$isScrolledY","$isScrolledX","ColumnHeaderRow","$numOfColumns","$intervalWidth","columnHeader","ColumnHeader","ColumnHeaderTitle","TimeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}
+{"version":3,"file":"timetable.js","sources":["../../src/timetable/timetable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport type { PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport * as styles from \"./timetable.styles\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const hasLazyLoad = !allRecordsLoaded && !!onPage;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const columnHeaderRowRef = useRef<HTMLDivElement>(null);\n    const loadingWrapperRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    useApplyStyle(columnHeaderRowRef, {\n        [styles.tokens.columnHeaderRow.columnWidth]: `${intervalWidth * 4}px`,\n    });\n\n    useApplyStyle(loadingWrapperRef, {\n        [styles.tokens.loadingWrapper.cellWidth]: `${intervalWidth * 4}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverTriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <PopoverTrigger\n                {...popoverTriggerProps}\n                className={styles.popoverTrigger}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </PopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <Typography.BodyMD\n                    className={clsx(\n                        styles.clickableRowHeaderTitle,\n                        !!data.onRowNameClick &&\n                            styles.clickableRowHeaderTitleClickable\n                    )}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </Typography.BodyMD>\n\n                <Typography.BodyXS\n                    weight=\"bold\"\n                    className={clsx(\n                        styles.rowHeaderSubtitle,\n                        !data.subtitle && styles.rowHeaderSubtitleHidden\n                    )}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </Typography.BodyXS>\n            </>\n        );\n\n        return (\n            <div\n                className={clsx(\n                    styles.rowHeader,\n                    isScrolledX && styles.rowHeaderScrolled\n                )}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </div>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <div\n                className={styles.columnHeader}\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <Typography.BodySM\n                    className={styles.columnHeaderTitle}\n                    weight={\"semibold\"}\n                >\n                    {columnHeader}\n                </Typography.BodySM>\n            </div>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) {\n            return (\n                <LoadingDotsSpinner\n                    data-testid=\"timetable-loading-spinner\"\n                    className={clsx(\n                        styles.loadingSpinner,\n                        isEmptyContent\n                            ? styles.loadingSpinnerEmptyContent\n                            : styles.loadingSpinnerHasContent\n                    )}\n                />\n            );\n        }\n\n        return (\n            <div\n                className={styles.timeTableBody}\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <div\n                            className={styles.timeTableRow}\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </div>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </div>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <div className={styles.timeTableRow}>\n                <div\n                    className={clsx(\n                        styles.rowHeader,\n                        isScrolledX && styles.rowHeaderScrolled\n                    )}\n                >\n                    <div className={styles.loadingBar} />\n                </div>\n                <div\n                    ref={loadingWrapperRef}\n                    className={styles.loadingWrapper}\n                    data-testid=\"lazy-loader\"\n                    role=\"presentation\"\n                >\n                    {hourlyIntervals.map((_, index) => (\n                        <div\n                            className={styles.loadingCell}\n                            key={`lazy-load-cell-${index}`}\n                        >\n                            <div className={styles.loadingBar} />\n                        </div>\n                    ))}\n                </div>\n            </div>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <div {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <div\n                    className={clsx(\n                        styles.emptyTableContainer,\n                        \"empty-container\"\n                    )}\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <ErrorDisplay\n                            className={styles.noResultsFound}\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <LoadingDotsSpinner\n                                data-testid=\"timetable-loading-spinner\"\n                                className={clsx(\n                                    styles.loadingSpinner,\n                                    isEmptyContent\n                                        ? styles.loadingSpinnerEmptyContent\n                                        : styles.loadingSpinnerHasContent\n                                )}\n                            />\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <div\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                className={clsx(\n                    styles.timeTableContainer,\n                    hasLazyLoad && styles.timeTableContainerNotAllLoaded,\n                    loading && styles.timeTableContainerLoading\n                )}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <div\n                    className={styles.timeTableHeaderRow}\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.rowColumnHeader,\n                            (isScrolledX || isScrolledY) &&\n                                styles.rowColumnHeaderScrolled,\n                            isScrolledX && styles.rowColumnHeaderScrolledX,\n                            isScrolledY && styles.rowColumnHeaderScrolledY\n                        )}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </div>\n                    <div\n                        ref={columnHeaderRowRef}\n                        className={clsx(\n                            styles.columnHeaderRow,\n                            isScrolledY && styles.columnHeaderRowScrolled\n                        )}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </div>\n                </div>\n                {renderRows()}\n            </div>\n        </div>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","hasLazyLoad","tableContainerRef","useRef","contentContainerRef","columnHeaderRowRef","loadingWrapperRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useApplyStyle","styles.tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","PopoverTrigger","Object","assign","className","styles.popoverTrigger","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","Typography","BodyMD","clsx","styles.clickableRowHeaderTitle","onRowNameClick","styles.clickableRowHeaderTitleClickable","onClick","event","handleRowNameClick","weight","name","BodyXS","styles.rowHeaderSubtitle","subtitle","styles.rowHeaderSubtitleHidden","styles.rowHeader","styles.rowHeaderScrolled","role","renderLazyLoadRow","styles.timeTableRow","styles.loadingBar","styles.loadingWrapper","map","_","index","styles.loadingCell","TimeTableHeader","selectedDate","styles.emptyTableContainer","tabIndex","VisuallyHidden","LoadingDotsSpinner","styles.loadingSpinner","styles.loadingSpinnerEmptyContent","styles.loadingSpinnerHasContent","ErrorDisplay","styles.noResultsFound","type","description","styles.timeTableContainer","styles.timeTableContainerNotAllLoaded","styles.timeTableContainerLoading","styles.timeTableHeaderRow","styles.rowColumnHeader","styles.rowColumnHeaderScrolled","styles.rowColumnHeaderScrolledX","styles.rowColumnHeaderScrolledY","styles.columnHeaderRow","styles.columnHeaderRowScrolled","columnHeader","styles.columnHeader","BodySM","styles.columnHeaderTitle","styles.timeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}

package/timetable/timetable.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const tokens: {
+    rowColumnHeader: {
+        clipRight: string;
+        clipBottom: string;
+    };
+    columnHeaderRow: {
+        columnWidth: string;
+    };
+    loadingWrapper: {
+        cellWidth: string;
+    };
+};
+export declare const emptyTableContainer: import("@linaria/core").LinariaClassName;
+export declare const timeTableContainer: import("@linaria/core").LinariaClassName;
+export declare const timeTableContainerNotAllLoaded: import("@linaria/core").LinariaClassName;
+export declare const timeTableContainerLoading: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeader: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeaderScrolled: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeaderScrolledX: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeaderScrolledY: import("@linaria/core").LinariaClassName;
+export declare const timeTableHeaderRow: import("@linaria/core").LinariaClassName;
+export declare const columnHeaderRow: import("@linaria/core").LinariaClassName;
+export declare const columnHeaderRowScrolled: import("@linaria/core").LinariaClassName;
+export declare const columnHeader: import("@linaria/core").LinariaClassName;
+export declare const columnHeaderTitle: import("@linaria/core").LinariaClassName;
+export declare const timeTableBody: import("@linaria/core").LinariaClassName;
+export declare const timeTableRow: import("@linaria/core").LinariaClassName;
+export declare const rowHeader: import("@linaria/core").LinariaClassName;
+export declare const rowHeaderScrolled: import("@linaria/core").LinariaClassName;
+export declare const clickableRowHeaderTitle: import("@linaria/core").LinariaClassName;
+export declare const clickableRowHeaderTitleClickable: import("@linaria/core").LinariaClassName;
+export declare const rowHeaderSubtitle: import("@linaria/core").LinariaClassName;
+export declare const rowHeaderSubtitleHidden: import("@linaria/core").LinariaClassName;
+export declare const loadingSpinner: import("@linaria/core").LinariaClassName;
+export declare const loadingSpinnerEmptyContent: import("@linaria/core").LinariaClassName;
+export declare const loadingSpinnerHasContent: import("@linaria/core").LinariaClassName;
+export declare const noResultsFound: import("@linaria/core").LinariaClassName;
+export declare const loadingWrapper: import("@linaria/core").LinariaClassName;
+export declare const loadingCell: import("@linaria/core").LinariaClassName;
+export declare const loadingBar: import("@linaria/core").LinariaClassName;
+export declare const popoverTrigger: import("@linaria/core").LinariaClassName;

package/timetable/timetable.styles.js

@@ -0,0 +1,2 @@
+import"./timetable.styles_7rp8kz.css";const l={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}},t="erxhy6s",e="t1e3v70i",r="t1rmyx7n",c="t1gzwlj3",i="rlj7vfj",n="r1wcbob7",d="rwd1dpu",o="r14gjl6n",a="tvbecqk",b="club8pr",p="c1ww0xmb",w="cu00ucx",m="c78q521",u="t12ob72k",s="tcjynx9",x="r1bl65p4",y="r18q97gy",g="c1wixfzv",j="c1ydv4q1",q="r1g67qip",v="rr9vcmw",W="lywjuzz",h="l1x75bdd",z="l1c8n8nw",f="n1c42c7o",k="l5bp49u",_="l1gsk7y7",H="lwaowax",A="p1l2dqit";export{g as clickableRowHeaderTitle,j as clickableRowHeaderTitleClickable,w as columnHeader,b as columnHeaderRow,p as columnHeaderRowScrolled,m as columnHeaderTitle,t as emptyTableContainer,H as loadingBar,_ as loadingCell,W as loadingSpinner,h as loadingSpinnerEmptyContent,z as loadingSpinnerHasContent,k as loadingWrapper,f as noResultsFound,A as popoverTrigger,i as rowColumnHeader,n as rowColumnHeaderScrolled,d as rowColumnHeaderScrolledX,o as rowColumnHeaderScrolledY,x as rowHeader,y as rowHeaderScrolled,q as rowHeaderSubtitle,v as rowHeaderSubtitleHidden,u as timeTableBody,e as timeTableContainer,c as timeTableContainerLoading,r as timeTableContainerNotAllLoaded,a as timeTableHeaderRow,s as timeTableRow,l as tokens};
+//# sourceMappingURL=timetable.styles.js.map

package/timetable/timetable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable.styles.js","sources":["../../src/timetable/timetable.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow, Spacing } from \"../theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\nexport const tokens = {\n    rowColumnHeader: {\n        clipRight: \"--fds-internal-timetable-rowColumnHeader-clipRight\",\n        clipBottom: \"--fds-internal-timetable-rowColumnHeader-clipBottom\",\n    },\n    columnHeaderRow: {\n        columnWidth: \"--fds-internal-timetable-columnHeaderRow-columnWidth\",\n    },\n    loadingWrapper: {\n        cellWidth: \"--fds-internal-timetable-loadingWrapper-cellWidth\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// TABLE\n// -----------------------------------------------------------------------------\n\nexport const emptyTableContainer = css`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const timeTableContainer = css`\n    display: grid;\n    align-content: start;\n    overflow: scroll;\n    position: relative;\n    isolation: isolate;\n`;\n\nexport const timeTableContainerNotAllLoaded = css`\n    padding-bottom: 128px;\n`;\n\nexport const timeTableContainerLoading = css`\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE HEADER\n// -----------------------------------------------------------------------------\n\nexport const rowColumnHeader = css`\n    ${tokens.rowColumnHeader.clipRight}: 0;\n    ${tokens.rowColumnHeader.clipBottom}: 0;\n\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    z-index: 2;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    box-shadow: none;\n    clip-path: inset(0);\n    transition: box-shadow 0.5s ease-in-out, clip-path 0.5s ease-in-out;\n`;\n\nexport const rowColumnHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(\n        0 var(${tokens.rowColumnHeader.clipRight})\n            var(${tokens.rowColumnHeader.clipBottom}) 0\n    );\n`;\n\nexport const rowColumnHeaderScrolledX = css`\n    ${tokens.rowColumnHeader.clipRight}: -0.12px;\n`;\n\nexport const rowColumnHeaderScrolledY = css`\n    ${tokens.rowColumnHeader.clipBottom}: -0.12px;\n`;\n\nexport const timeTableHeaderRow = css`\n    display: grid;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    background-color: ${Colour[\"bg\"]};\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const columnHeaderRow = css`\n    display: grid;\n    background-color: ${Colour[\"bg\"]};\n    height: ${ROW_HEIGHT}px;\n    grid-auto-flow: column;\n    grid-auto-columns: max(\n        var(${tokens.columnHeaderRow.columnWidth}),\n        ${MIN_HOURLY_INTERVAL_WIDTH}px\n    );\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const columnHeaderRowScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const columnHeader = css`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const columnHeaderTitle = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE BODY\n// -----------------------------------------------------------------------------\n\nexport const timeTableBody = css`\n    width: max-content;\n    min-width: 100%;\n`;\n\nexport const timeTableRow = css`\n    display: grid;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const rowHeader = css`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    z-index: 3;\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-32\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    border-left: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const rowHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n\nexport const clickableRowHeaderTitle = css`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const clickableRowHeaderTitleClickable = css`\n    &:hover {\n        cursor: pointer;\n    }\n`;\n\nexport const rowHeaderSubtitle = css`\n    display: inline-flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const rowHeaderSubtitleHidden = css`\n    display: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING AND ERROR\n// -----------------------------------------------------------------------------\n\nexport const loadingSpinner = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const loadingSpinnerEmptyContent = css`\n    grid-column: 1 / -1;\n`;\n\nexport const loadingSpinnerHasContent = css`\n    grid-column: 2 / -1;\n`;\n\nexport const noResultsFound = css`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n\n// -----------------------------------------------------------------------------\n// LAZY LOADING\n// -----------------------------------------------------------------------------\n\nexport const loadingWrapper = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.loadingWrapper.cellWidth}: initial;\n\n    display: flex;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const loadingCell = css`\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    width: var(${tokens.loadingWrapper.cellWidth});\n    height: 100%;\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-12\"]};\n`;\n\nexport const loadingBar = css`\n    @keyframes timetable-loading-gradient {\n        0% {\n            background-position: -468px 0;\n        }\n        100% {\n            background-position: 468px 0;\n        }\n    }\n\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${Colour.Primitive[\"neutral-95\"]} 8%,\n        ${Colour.Primitive[\"neutral-100\"]} 18%,\n        ${Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: timetable-loading-gradient 1.5s forwards infinite;\n`;\n\n// -----------------------------------------------------------------------------\n// MISCELLANEOUS\n// -----------------------------------------------------------------------------\n\nexport const popoverTrigger = css`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","emptyTableContainer","timeTableContainer","timeTableContainerNotAllLoaded","timeTableContainerLoading","rowColumnHeader","rowColumnHeaderScrolled","rowColumnHeaderScrolledX","rowColumnHeaderScrolledY","timeTableHeaderRow","columnHeaderRowScrolled","columnHeader","columnHeaderTitle","timeTableBody","timeTableRow","rowHeader","rowHeaderScrolled","clickableRowHeaderTitle","clickableRowHeaderTitleClickable","rowHeaderSubtitle","rowHeaderSubtitleHidden","loadingSpinner","loadingSpinnerEmptyContent","loadingSpinnerHasContent","noResultsFound","loadingCell","loadingBar","popoverTrigger"],"mappings":"+DASO,MAAMA,EAAS,CAKlBC,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW,sDAQNC,EAAmB,UAOnBC,EAAkB,WAQlBC,EAA8B,WAI9BC,EAAyB,WAUzBC,EAAe,UAiBfC,EAAuB,WAQvBC,EAAwB,UAIxBC,EAAwB,WAIxBC,EAAkB,UAYlBZ,EAAe,UAafa,EAAuB,WAIvBC,EAAY,UAOZC,EAAiB,UAQjBC,EAAa,WAKbC,EAAY,UAQZC,EAAS,WAoBTC,EAAiB,WAKjBC,EAAuB,WASvBC,EAAgC,WAMhCC,EAAiB,WAOjBC,EAAuB,UAQvBC,EAAc,UASdC,EAA0B,WAI1BC,EAAwB,WAIxBC,EAAc,WAUdzB,EAAc,UAQd0B,EAAW,WAQXC,EAAU,UA0BVC,EAAc"}

package/timetable/timetable.styles_7rp8kz.css

@@ -0,0 +1,46 @@
+.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
+.t1e3v70i{display:-ms-grid;display:grid;-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;overflow:scroll;position:relative;isolation:isolate;}
+.t1rmyx7n{padding-bottom:128px;}
+.t1gzwlj3:hover{cursor:not-allowed;}
+.rlj7vfj{--fds-internal-timetable-rowColumnHeader-clipRight:0;--fds-internal-timetable-rowColumnHeader-clipBottom:0;position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--fds-colour-bg);width:252px;height:68px;z-index:2;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);box-shadow:none;-webkit-clip-path:inset(0);clip-path:inset(0);-webkit-transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;}
+.r1wcbob7{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );}
+.rwd1dpu{--fds-internal-timetable-rowColumnHeader-clipRight:-0.12px;}
+.r14gjl6n{--fds-internal-timetable-rowColumnHeader-clipBottom:-0.12px;}
+.tvbecqk{display:-ms-grid;display:grid;position:-webkit-sticky;position:sticky;top:0;z-index:4;background-color:var(--fds-colour-bg);-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.club8pr{display:-ms-grid;display:grid;background-color:var(--fds-colour-bg);height:68px;-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.c1ww0xmb{box-shadow:var(--fds-shadow-md-subtle);}
+.cu00ucx{min-width:84px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding-bottom:var(--fds-spacing-4);}
+.c78q521{color:var(--fds-colour-text-subtler);}
+.t12ob72k{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;}
+.tcjynx9{display:-ms-grid;display:grid;-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.r1bl65p4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:-webkit-sticky;position:sticky;left:0;background-color:var(--fds-colour-bg);z-index:3;width:252px;height:68px;text-align:right;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-32);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.r18q97gy{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}
+.c1wixfzv{display:inline-block;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;color:var(--fds-colour-text-primary);}
+.c1ydv4q1:hover{cursor:pointer;}
+.r1g67qip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:var(--fds-spacing-4);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text-subtler);}
+.rr9vcmw{display:none;}
+.lywjuzz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-grid-row:2;grid-row:2;width:100%;height:100%;}
+.l1x75bdd{-ms-grid-column:1/-1;grid-column:1/-1;}
+.l1c8n8nw{-ms-grid-column:2/-1;grid-column:2/-1;}
+.n1c42c7o{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}
+.l5bp49u{--fds-internal-timetable-loadingWrapper-cellWidth:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.l1gsk7y7{border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);width:var(--fds-internal-timetable-loadingWrapper-cellWidth);height:100%;padding:var(--fds-spacing-20) var(--fds-spacing-12);}
+.lwaowax{height:28px;width:100%;background:linear-gradient(
+        to right,
+        var(--fds-colour-neutral-95) 8%,
+        var(--fds-colour-neutral-100) 18%,
+        var(--fds-colour-neutral-95) 33%
+    );-webkit-background-size:800px 104px;background-size:800px 104px;-webkit-animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;}@-webkit-keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}@keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}
+.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}