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

package/cjs/timetable/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n    \"#FFE6BB\",\n    \"#D8EFEB\",\n    \"#E6EAFE\",\n    \"#FAE4E5\",\n    \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n    \"#FFF2DD\",\n    \"#EBF7F5\",\n    \"#F2F4FE\",\n    \"#FCF1F2\",\n    \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n    (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":[],"mappings":"+CAayC,8BAHP,yCAIW,CACzC,UACA,UACA,UACA,UACA,0CAnBkC,CAClC,UACA,UACA,UACA,UACA,gCAGwB,2BAGI,uBACN,wBAHE"}
+{"version":3,"file":"const.js","sources":["../../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n    \"#FFE6BB\",\n    \"#D8EFEB\",\n    \"#E6EAFE\",\n    \"#FAE4E5\",\n    \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n    \"#FFF2DD\",\n    \"#EBF7F5\",\n    \"#F2F4FE\",\n    \"#FCF1F2\",\n    \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n    (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":[],"mappings":"wCAUkC,yCAIW,CACzC,UACA,UACA,UACA,UACA,0CAnBkC,CAClC,UACA,UACA,UACA,UACA,gCAGwB,2BAGI,yBAFJ"}

package/cjs/timetable/timetable-header/timetable-header.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("./timetable-header.style.js");exports.TimeTableHeader=l=>{var{selectedDate:s,loading:i,tableContainerRef:n,totalRecords:o,onPreviousDayClick:d,onNextDayClick:c,onRefresh:u,onCalendarDateSelect:g}=l,h=e.__rest(l,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const b=()=>{n.current&&(n.current.scrollTop=0)},x=()=>{u&&(b(),u())};return t.jsxs(a.NavigationHeaderWrapper,{children:[t.jsx(a.StyledDateNavigator,Object.assign({selectedDate:s,loading:i},h,{onRightArrowClick:e=>{b(),c(e)},onLeftArrowClick:e=>{b(),d(e)},onCalendarDateSelect:g})),void 0===o?t.jsx(t.Fragment,{}):t.jsxs(a.NavigationHeaderSubtitleWrapper,{children:[t.jsxs(a.StyledResultText,{"data-testid":"timetable-records-results",weight:"semibold",children:[o," results found"]}),u&&t.jsx(a.StyledRefreshButton,{"data-testid":"timetable-records-refresh-btn",styleType:"light",sizeType:"small",disabled:i,onClick:x,$loading:i,children:t.jsx(r.RefreshIcon,{})})]})]})};
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("clsx"),s=require("../../button/button.js"),i=require("../../date-navigator/date-navigator.js"),l=require("../../typography/index.js"),o=require("./timetable-header.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(a);exports.TimeTableHeader=a=>{var{selectedDate:n,loading:c,tableContainerRef:u,totalRecords:g,onPreviousDayClick:b,onNextDayClick:f,onRefresh:h,onCalendarDateSelect:j}=a,v=e.__rest(a,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const m=()=>{u.current&&(u.current.scrollTop=0)},x=()=>{h&&(m(),h())};return t.jsxs("div",{className:o.navigationHeaderWrapper,children:[t.jsx(i.DateNavigator,Object.assign({className:o.dateNavigator,selectedDate:n,loading:c},v,{onRightArrowClick:e=>{m(),f(e)},onLeftArrowClick:e=>{m(),b(e)},onCalendarDateSelect:j})),void 0===g?t.jsx(t.Fragment,{}):t.jsxs("div",{className:o.navigationHeaderSubtitleWrapper,children:[t.jsxs(l.Typography.BodySM,{className:o.resultText,"data-testid":"timetable-records-results",weight:"semibold",children:[g," result",1!==g?"s":""," found"]}),h&&t.jsx(s.Button,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:c,onClick:x,className:d.default(o.refreshButton,c&&o.refreshButtonLoading),icon:t.jsx(r.RefreshIcon,{})})]})]})};
 //# sourceMappingURL=timetable-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\n    NavigationHeaderSubtitleWrapper,\n    NavigationHeaderWrapper,\n    StyledDateNavigator,\n    StyledRefreshButton,\n    StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n    selectedDate: string;\n    loading: boolean;\n    tableContainerRef: RefObject<HTMLDivElement>;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    totalRecords?: number | undefined;\n    showDateAsShortForm?: boolean | undefined;\n    showCurrentDateAsToday?: boolean | undefined;\n    onPreviousDayClick: (currentDate: string) => void | undefined;\n    onNextDayClick: (currentDate: string) => void | undefined;\n    onRefresh?: (() => void) | undefined;\n    onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n    selectedDate,\n    loading,\n    tableContainerRef,\n    totalRecords,\n    onPreviousDayClick,\n    onNextDayClick,\n    onRefresh,\n    onCalendarDateSelect,\n    ...otherProps\n}: TimeTableHeaderProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const scrollToTop = () => {\n        if (tableContainerRef.current) {\n            tableContainerRef.current.scrollTop = 0;\n        }\n    };\n\n    const handleRefresh = () => {\n        if (!onRefresh) return;\n        scrollToTop();\n        onRefresh();\n    };\n\n    const handleRightArrowClick = (date: string) => {\n        scrollToTop();\n        onNextDayClick(date);\n    };\n\n    const handleLeftArrowClick = (date: string) => {\n        scrollToTop();\n        onPreviousDayClick(date);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRecordsSection = () => {\n        if (totalRecords === undefined) return <></>;\n        return (\n            <NavigationHeaderSubtitleWrapper>\n                <StyledResultText\n                    data-testid=\"timetable-records-results\"\n                    weight={\"semibold\"}\n                >\n                    {totalRecords} results found\n                </StyledResultText>\n                {onRefresh && (\n                    <StyledRefreshButton\n                        data-testid=\"timetable-records-refresh-btn\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        $loading={loading}\n                    >\n                        <RefreshIcon />\n                    </StyledRefreshButton>\n                )}\n            </NavigationHeaderSubtitleWrapper>\n        );\n    };\n\n    return (\n        <NavigationHeaderWrapper>\n            <StyledDateNavigator\n                selectedDate={selectedDate}\n                loading={loading}\n                {...otherProps}\n                onRightArrowClick={handleRightArrowClick}\n                onLeftArrowClick={handleLeftArrowClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            {renderRecordsSection()}\n        </NavigationHeaderWrapper>\n    );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","RefreshIcon"],"mappings":"wLA0BgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,OAACC,EAAAA,wBAAuB,CAAAC,SAAA,CACpBC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA7CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA4CZC,iBAzCkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAwChBf,qBAAsBA,UAjCTiB,IAAjBrB,EAAmCc,EAAAA,mBAEnCH,EAAAA,KAACW,EAAAA,gCAA+B,CAAAT,SAAA,CAC5BF,EAAAA,KAACY,EAAAA,iBAAgB,CAAA,cACD,4BACZC,OAAQ,WAAUX,SAAA,CAEjBb,sBAEJG,GACGW,EAAAA,IAACW,EAAAA,oBAAmB,CAAA,cACJ,gCACZC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EAAOe,SAEjBC,MAACiB,EAAAA,uBAkBS"}
+{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { RefObject } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { Typography } from \"../../typography\";\nimport * as styles from \"./timetable-header.styles\";\n\ninterface TimeTableHeaderProps {\n    selectedDate: string;\n    loading: boolean;\n    tableContainerRef: RefObject<HTMLDivElement>;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    totalRecords?: number | undefined;\n    showDateAsShortForm?: boolean | undefined;\n    showCurrentDateAsToday?: boolean | undefined;\n    onPreviousDayClick: (currentDate: string) => void | undefined;\n    onNextDayClick: (currentDate: string) => void | undefined;\n    onRefresh?: (() => void) | undefined;\n    onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n    selectedDate,\n    loading,\n    tableContainerRef,\n    totalRecords,\n    onPreviousDayClick,\n    onNextDayClick,\n    onRefresh,\n    onCalendarDateSelect,\n    ...otherProps\n}: TimeTableHeaderProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const scrollToTop = () => {\n        if (tableContainerRef.current) {\n            tableContainerRef.current.scrollTop = 0;\n        }\n    };\n\n    const handleRefresh = () => {\n        if (!onRefresh) return;\n        scrollToTop();\n        onRefresh();\n    };\n\n    const handleRightArrowClick = (date: string) => {\n        scrollToTop();\n        onNextDayClick(date);\n    };\n\n    const handleLeftArrowClick = (date: string) => {\n        scrollToTop();\n        onPreviousDayClick(date);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRecordsSection = () => {\n        if (totalRecords === undefined) return <></>;\n        return (\n            <div className={styles.navigationHeaderSubtitleWrapper}>\n                <Typography.BodySM\n                    className={styles.resultText}\n                    data-testid=\"timetable-records-results\"\n                    weight={\"semibold\"}\n                >\n                    {totalRecords} result{totalRecords !== 1 ? \"s\" : \"\"} found\n                </Typography.BodySM>\n                {onRefresh && (\n                    <Button\n                        data-testid=\"timetable-records-refresh-btn\"\n                        aria-label=\"Refresh timetable records\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        className={clsx(\n                            styles.refreshButton,\n                            loading && styles.refreshButtonLoading\n                        )}\n                        icon={<RefreshIcon />}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.navigationHeaderWrapper}>\n            <DateNavigator\n                className={styles.dateNavigator}\n                selectedDate={selectedDate}\n                loading={loading}\n                {...otherProps}\n                onRightArrowClick={handleRightArrowClick}\n                onLeftArrowClick={handleLeftArrowClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            {renderRecordsSection()}\n        </div>\n    );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","className","styles.navigationHeaderWrapper","_jsx","DateNavigator","styles.dateNavigator","onRightArrowClick","date","onLeftArrowClick","undefined","styles.navigationHeaderSubtitleWrapper","children","Typography","BodySM","styles.resultText","weight","Button","styleType","sizeType","disabled","onClick","clsx","styles.refreshButton","styles.refreshButtonLoading","icon","RefreshIcon"],"mappings":"6ZAwBgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA8Cf,OACIQ,EAAAA,YAAKC,UAAWC,EAAAA,kCACZC,MAACC,EAAAA,6BACGH,UAAWI,EAAAA,cACXnB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACdY,kBAlDmBC,IAC3BX,IACAL,EAAegB,EAAK,EAiDZC,iBA9CkBD,IAC1BX,IACAN,EAAmBiB,EAAK,EA6ChBd,qBAAsBA,UAtCTgB,IAAjBpB,EAAmCc,EAAAA,mBAEnCH,OAAA,MAAA,CAAKC,UAAWS,EAAAA,gCAAsCC,SAAA,CAClDX,EAAAA,KAACY,EAAAA,WAAWC,QACRZ,UAAWa,EAAAA,yBACC,4BACZC,OAAQ,qBAEP1B,EAAY,UAA0B,IAAjBA,EAAqB,IAAM,GAAE,YAEtDG,GACGW,EAAAA,IAACa,EAAAA,OAAM,CAAA,cACS,6CACD,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAUhC,EACViC,QAASrB,EACTE,UAAWoB,EAAAA,QACPC,EAAAA,cACAnC,GAAWoC,EAAAA,sBAEfC,KAAMrB,EAAAA,IAACsB,EAAAA,YAAW,CAAA,UAmB5B"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./timetable-header.styles_11gl1h4.css");exports.dateNavigator="d13zs1sk",exports.navigationHeaderSubtitleWrapper="n1oy278s",exports.navigationHeaderWrapper="n17unxsd",exports.refreshButton="r1dkvl6z",exports.refreshButtonLoading="r1u01cjw",exports.resultText="r64l2hv";
+//# sourceMappingURL=timetable-header.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-header.styles.js","sources":["../../../../src/timetable/timetable-header/timetable-header.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../../theme\";\n\nexport const refreshButton = css`\n    color: ${Colour[\"icon\"]};\n\n    @keyframes timetable-refresh-icon-spin {\n        100% {\n            -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nexport const refreshButtonLoading = css`\n    svg {\n        animation: timetable-refresh-icon-spin 4s linear infinite;\n    }\n`;\n\nexport const navigationHeaderWrapper = css`\n    display: flex;\n    padding-bottom: ${Spacing[\"spacing-16\"]};\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const navigationHeaderSubtitleWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const resultText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dateNavigator = css`\n    width: 400px;\n`;\n"],"names":[],"mappings":"8HAuC0B,mDAXkB,2CAPR,iCAjBV,wCAWO,8BAoBV"}

package/cjs/timetable/timetable-header/timetable-header.styles_11gl1h4.css

@@ -0,0 +1,6 @@
+.r1dkvl6z{color:var(--fds-colour-icon);}@-webkit-keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.r1u01cjw svg{-webkit-animation:timetable-refresh-icon-spin 4s linear infinite;animation:timetable-refresh-icon-spin 4s linear infinite;}
+.n17unxsd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-bottom:var(--fds-spacing-16);-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
+.n1oy278s{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;gap:var(--fds-spacing-8);}
+.r64l2hv{color:var(--fds-colour-text-subtler);}
+.d13zs1sk{width:400px;}

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

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

package/cjs/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    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 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({ ...cell, roundedStartTime, roundedEndTime });\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\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["id","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","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","children","map","RowCell"],"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":["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/cjs/timetable/timetable-row/row-bar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./row-bar.styles_1x0vrsz.css");exports.rowCellContainer="r1vzjzkv";
+//# sourceMappingURL=row-bar.styles.js.map

package/cjs/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":[],"mappings":"qHAE6B"}

package/cjs/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/cjs/timetable/timetable-row/row-cell.js

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

package/cjs/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 { DateHelper } from \"../../util\";\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}\n\nconst Component = ({\n    id,\n    startTime,\n    endTime,\n    title,\n    subtitle,\n    status,\n    intervalWidth,\n    rowBarColor,\n    containerRef,\n    customPopover,\n    cellStyleAttributes,\n    roundedStartTime = startTime,\n    roundedEndTime = endTime,\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\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    return (\n        <WithOptionalPopover\n            containerRef={containerRef}\n            customPopover={customPopover}\n        >\n            <BlockContainer\n                key={`block-container-key`}\n                data-testid={`block-container`}\n                $isOnTheHour={isOnTheHour}\n            >\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={\n                            cellStyleAttributes?.altBackgroundColor\n                        }\n                        $customHoverColor={\n                            cellStyleAttributes?.hoverBackgroundColor\n                        }\n                        $customAltHoverColor={\n                            cellStyleAttributes?.altHoverBackgroundColor\n                        }\n                        $styleType={cellStyleAttributes?.styleType}\n                        onClick={handleCellClick}\n                    >\n                        {title && (\n                            <BlockTitle weight={\"semibold\"}>{title}</BlockTitle>\n                        )}\n                        {subtitle && (\n                            <BlockDescription weight={\"bold\"}>\n                                {subtitle}\n                            </BlockDescription>\n                        )}\n                    </Block>\n                    <Gap />\n                </Wrapper>\n            </BlockContainer>\n        </WithOptionalPopover>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","containerRef","customPopover","cellStyleAttributes","roundedStartTime","roundedEndTime","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","_jsx","WithOptionalPopover","children","BlockContainer","$isOnTheHour","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","event","BlockTitle","weight","BlockDescription","Gap"],"mappings":"2ZA0BA,MAiGaA,OAAUC,QAAMC,MAjGX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,eACAC,gBACAC,sBACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,cAKA,MAAMC,EAAgE,IAAlDC,EAAAA,QAAMH,EAAgB,SAASI,IAAI,WAKjDC,EAHFC,EAAAA,WAAWC,qBAAqBR,EAAkBC,GAClDQ,EAAAA,aACuCd,EACAe,EAAAA,aACrCC,IACAT,GAAYJ,GAA2C,UAA1BA,EAAcc,QAyBjD,OACIC,MAACC,EAAAA,oBAAmB,CAChBjB,aAAcA,EACdC,cAAeA,EAAaiB,SAE5BF,EAAAA,IAACG,iBAAc,CAAA,cAEE,kBAAiBC,aAChBd,EAAWY,SAEzBG,EAAAA,KAACC,EAAAA,QAAO,CAAAJ,SAAA,CACJG,EAAAA,KAACE,EAAAA,MAAK,CAAAC,OACMf,EAAiBgB,QAChB5B,EAAM6B,WACH3B,EAAY4B,UAASC,UACtB7B,EAAY8B,eAAcC,aACvBhB,EAAWiB,iBACP7B,aAAmB,EAAnBA,EAAqB8B,gBAAeC,gBAElD/B,aAAmB,EAAnBA,EAAqBgC,mBAAkBC,kBAGvCjC,aAAmB,EAAnBA,EAAqBkC,qBAAoBC,qBAGzCnC,aAAmB,EAAnBA,EAAqBoC,wBAAuBC,WAEpCrC,aAAmB,EAAnBA,EAAqBsC,UACjCnC,QAhDKoC,IACjBpC,GACAA,EACI,CACIb,KACAC,YACAC,UACAG,SACAF,QACAC,WACAK,iBAEJwC,EAER,EAkCwCvB,SAAA,CAEvBvB,GACGqB,EAAAA,IAAC0B,EAAAA,WAAU,CAACC,OAAQ,WAAUzB,SAAGvB,IAEpCC,GACGoB,EAAAA,IAAC4B,EAAAA,iBAAgB,CAACD,OAAQ,OAAMzB,SAC3BtB,OAIboB,EAAAA,IAAC6B,EAAAA,IAAG,QAjCH,wBAoCS"}
+{"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/cjs/timetable/timetable-row/row-cell.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./row-cell.styles_y1dl5j.css");exports.block="byp749t",exports.blockContainer="brs2fuo",exports.blockContainerOnTheHour="b1tkj60f",exports.blockDescription="bbb5nib",exports.blockTitle="bhkclis",exports.gap="g1ly7zml",exports.tokens={block:{mainColor:"--fds-internal-timetable-rowCellBlock-mainColor",altColor:"--fds-internal-timetable-rowCellBlock-altColor",width:"--fds-internal-timetable-rowCellBlock-width"}},exports.wrapper="w3l6hrm";
+//# sourceMappingURL=row-cell.styles.js.map

package/cjs/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":["block","mainColor","altColor","width"],"mappings":"0GA+BkB,iCAnBS,0CAIS,oCAkCP,6BANN,sBAlBP,0BAtBM,CAClBA,MAAO,CACHC,UAAW,kDACXC,SAAU,iDACVC,MAAO,gEAYK"}

package/cjs/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/cjs/timetable/timetable-row/with-optional-popover.js

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

package/cjs/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 { RefObject } from \"react\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\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":["containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"qbAYmC,EAC/BA,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKZ,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":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"ggCASmC,EAC/BA,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,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

package/cjs/timetable/timetable.js

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

package/cjs/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import { 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 { 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    ContentContainer,\n    EmptyTableContainer,\n    Loader,\n    LoadingBar,\n    LoadingCell,\n    LoadingWrapper,\n    NoResultsFound,\n    RowColumnHeader,\n    RowHeader,\n    RowHeaderColumn,\n    RowHeaderSubtitle,\n    StyledPopoverTrigger,\n    TimeTableContainer,\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\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            rootNode: tableContainerRef,\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\n    const ConditionalCellWrapper = ({\n        wrapper,\n        children,\n    }: {\n        wrapper: (child: JSX.Element) => JSX.Element;\n        children: JSX.Element;\n    }) => {\n        return wrapper(children);\n    };\n\n    const renderRowHeaderColumn = () => {\n        return (\n            <>\n                {rowData.map((data, index) => {\n                    return (\n                        <ConditionalCellWrapper\n                            key={index}\n                            wrapper={(child: JSX.Element) =>\n                                buildPopoverTrigger(data, child)\n                            }\n                        >\n                            <RowHeader\n                                $isScrolled={isScrolledX}\n                                key={`${data.id}-row-header`}\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                            </RowHeader>\n                        </ConditionalCellWrapper>\n                    );\n                })}\n                {renderRowHeaderColumnLazyLoad()}\n            </>\n        );\n    };\n\n    const renderRowHeaderColumnLazyLoad = () => {\n        if (loading || !loadMore) return;\n        return (\n            <RowHeader $isScrolled={isScrolledX}>\n                <LoadingBar />\n            </RowHeader>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n        return hourlyIntervals.map((columnHeader: string) => {\n            return (\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\n    const renderRowBarData = () => {\n        if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n        return (\n            <ContentContainer\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                $numOfRows={rowData.length}\n            >\n                {rowData.map((data, index) => {\n                    return (\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                    );\n                })}\n                {renderRowDataLazyLoad()}\n            </ContentContainer>\n        );\n    };\n\n    const renderRowDataLazyLoad = () => {\n        if (loading || !loadMore) return;\n        return (\n            <LoadingWrapper data-testid=\"lazy-loader\">\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        );\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 className=\"empty-container\">\n                    {!loading ? (\n                        <NoResultsFound\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <Loader $isEmptyContent={isEmptyContent}></Loader>\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            >\n                <RowColumnHeader\n                    $isScrolledY={isScrolledY}\n                    $isScrolledX={isScrolledX}\n                ></RowColumnHeader>\n                <RowHeaderColumn\n                    $numOfRows={rowData.length}\n                    $isScrolled={isScrolledX}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    {renderRowHeaderColumn()}\n                </RowHeaderColumn>\n                <ColumnHeaderRow\n                    $numOfColumns={hourlyIntervals.length}\n                    $isScrolled={isScrolledY}\n                >\n                    {renderColumnHeaders()}\n                </ColumnHeaderRow>\n                {renderRowBarData()}\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","isEmptyContent","isEmpty","allRecordsLoaded","length","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","Math","ceil","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","ROW_INTERVAL","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","ConditionalCellWrapper","wrapper","children","renderRowHeaderColumnLazyLoad","_jsx","RowHeader","$isScrolled","LoadingBar","renderRowDataLazyLoad","LoadingWrapper","map","_","index","LoadingCell","_jsxs","Container","Object","assign","TimeTableHeader","selectedDate","EmptyTableContainer","className","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","RowColumnHeader","$isScrolledY","$isScrolledX","RowHeaderColumn","$numOfRows","_Fragment","data","child","rowHeaderPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","key","id","zIndex","buildPopoverTrigger","ClickableRowHeaderTitle","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","$show","subtitle","ColumnHeaderRow","$numOfColumns","columnHeader","ColumnHeader","ColumnHeaderTitle","ContentContainer","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","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/cjs/timetable/timetable.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./timetable.styles_7rp8kz.css");exports.clickableRowHeaderTitle="c1wixfzv",exports.clickableRowHeaderTitleClickable="c1ydv4q1",exports.columnHeader="cu00ucx",exports.columnHeaderRow="club8pr",exports.columnHeaderRowScrolled="c1ww0xmb",exports.columnHeaderTitle="c78q521",exports.emptyTableContainer="erxhy6s",exports.loadingBar="lwaowax",exports.loadingCell="l1gsk7y7",exports.loadingSpinner="lywjuzz",exports.loadingSpinnerEmptyContent="l1x75bdd",exports.loadingSpinnerHasContent="l1c8n8nw",exports.loadingWrapper="l5bp49u",exports.noResultsFound="n1c42c7o",exports.popoverTrigger="p1l2dqit",exports.rowColumnHeader="rlj7vfj",exports.rowColumnHeaderScrolled="r1wcbob7",exports.rowColumnHeaderScrolledX="rwd1dpu",exports.rowColumnHeaderScrolledY="r14gjl6n",exports.rowHeader="r1bl65p4",exports.rowHeaderScrolled="r18q97gy",exports.rowHeaderSubtitle="r1g67qip",exports.rowHeaderSubtitleHidden="rr9vcmw",exports.timeTableBody="t12ob72k",exports.timeTableContainer="t1e3v70i",exports.timeTableContainerLoading="t1gzwlj3",exports.timeTableContainerNotAllLoaded="t1rmyx7n",exports.timeTableHeaderRow="tvbecqk",exports.timeTableRow="tcjynx9",exports.tokens={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}};
+//# sourceMappingURL=timetable.styles.js.map

package/cjs/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":["columnHeaderRow","columnWidth","loadingWrapper","cellWidth"],"mappings":"+GA0KoC,oDASS,gCA9DpB,kCAjBG,0CAaQ,qCAWN,sCAlGE,6BAyNT,8BARC,kCAnCG,6CASY,4CAIF,kCAcV,iCAVA,kCAoDA,mCAtNC,0CAiBQ,4CAQC,2CAIA,6BA6Df,qCAoBQ,qCAoBA,2CAOM,gCA5DV,sCAnGK,6CAYO,kDAJK,sCA+CZ,+BAiDN,yBAhIH,CAKlBA,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW"}

package/cjs/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;}