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

package/time-slot-week-view/time-slot-week-days.style.js

@@ -1,4 +1,4 @@
-import e,{css as t}from"styled-components";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as i}from"../theme/tokens/colour.js";import{Font as r}from"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeSlot as o}from"../time-slot-bar/time-slot-bar.styles.js";const m=e.div`
+import e,{css as t}from"styled-components";import{TimeSlot as i}from"../shared/time-slot/time-slot.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as r}from"../theme/tokens/colour.js";import{Font as o}from"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";const m=e.div`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -10,11 +10,11 @@ import e,{css as t}from"styled-components";import"../theme/theme-provider/index.
     display: grid;
     grid-template-columns: repeat(7, 1fr);
 `,s=e.div`
-    ${r["body-xs-semibold"]}
-    color:${i.text};
+    ${o["body-xs-semibold"]}
+    color:${r.text};
 
     ${e=>e.$disabled&&t`
-            color: ${i["text-disabled-subtlest"]};
+            color: ${r["text-disabled-subtlest"]};
         `};
 `,n=e.div`
     width: 100%;
@@ -25,22 +25,28 @@ import e,{css as t}from"styled-components";import"../theme/theme-provider/index.
     display: flex;
     min-height: 7.625rem;
 `,p=e.div`
-    ${r["body-xs-semibold"]}
+    ${o["body-xs-semibold"]}
     margin: 1rem 0rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     max-width: 2.5rem;
-    color: ${i.text};
+    color: ${r.text};
     span {
         display: block;
     }
-`,a=e(o)`
+`,a=e(i)`
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 1px 0px;
     position: relative;
 
     &:focus-within {
-        outline: 2px solid ${i["focus-ring"]};
+        outline: 2px solid ${r["focus-ring"]};
         outline-offset: 2px;
         z-index: 1;
     }

package/time-slot-week-view/time-slot-week-days.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.style.js","sources":["../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Colour, Font } from \"../theme\";\nimport { TimeSlot } from \"../time-slot-bar/time-slot-bar.styles\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const HeaderRow = styled.div`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${Font[\"body-xs-semibold\"]}\n    color:${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${Colour[\"text\"]};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)`\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","HeaderRow","DayLabel","Font","Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","TimeSlotComponent","TimeSlot","TimeSlotWrapper"],"mappings":"ijBAeO,MAAMA,EAAiBC,EAAOC,GAAG;;;;;;;EAS3BC,EAAYF,EAAOC,GAAG;;;;EAMtBE,EAAWH,EAAOC,GAAoB;MAC7CG,EAAK;YACCC,EAAa;;MAElBC,GACCA,EAAMC,WACNC,CAAG;qBACUH,EAAO;;EAIfI,EAAUT,EAAOC,GAAG;;;;EAMpBS,EAAiBV,EAAOC,GAAG;;;;EAM3BU,EAAeX,EAAOC,GAAG;MAChCG,EAAK;;;;;;;aAOEC,EAAa;;;;EAMbO,EAAoBZ,EAAOa,EAAS;;;;6BAIpBR,EAAO;;;;EAMvBS,EAAkBd,EAAOC,GAAG;;;;;"}
+{"version":3,"file":"time-slot-week-days.style.js","sources":["../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const HeaderRow = styled.div`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${Font[\"body-xs-semibold\"]}\n    color:${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${Colour[\"text\"]};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin: 1px 0px;\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","HeaderRow","DayLabel","Font","Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","TimeSlotComponent","TimeSlot","TimeSlotWrapper"],"mappings":"mlBAeO,MAAMA,EAAiBC,EAAOC,GAAG;;;;;;;EAS3BC,EAAYF,EAAOC,GAAG;;;;EAMtBE,EAAWH,EAAOC,GAAoB;MAC7CG,EAAK;YACCC,EAAa;;MAElBC,GACCA,EAAMC,WACNC,CAAG;qBACUH,EAAO;;EAIfI,EAAUT,EAAOC,GAAG;;;;EAMpBS,EAAiBV,EAAOC,GAAG;;;;EAM3BU,EAAeX,EAAOC,GAAG;MAChCG,EAAK;;;;;;;aAOEC,EAAa;;;;EAMbO,EAAoBZ,EAAOa,EAAS;;;;;;;;;;6BAUpBR,EAAO;;;;EAMvBS,EAAkBd,EAAOC,GAAG;;;;;"}

package/timeline/timeline.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"react";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{Typography as s}from"../typography/index.js";import{TimelineWrapper as l,TimelineTitle as d,TimelineItem as o,TimelineIndicators as m,CircleIndicator as p,LineIndicator as u,TimelineItemContent as h,TimelinePills as f,TimelineItemTitle as v,TimelinePill as g}from"./timeline.style.js";const y=({items:y,className:$,id:b,title:w,startCol:N,colSpan:j,"data-base-indicator-testid":x,"data-testid":C="timeline",headingLevel:S=2,counterOffset:A=0})=>{const O=e=>"string"==typeof e?i(s.BodyMD,{className:"timeline-item-content-text",children:e}):i(r,{children:e}),U=(e,t)=>"string"==typeof e?i(v,{forwardedAs:"h3","aria-level":t,weight:"semibold",className:"timeline-item-title",children:e}):i(r,{children:e}),_=t=>t.slice(0,2).map(((t,i)=>e(g,Object.assign({},t,{type:t.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),t.children))),k=(e,t)=>{switch(e){case"completed":return i(n,{"aria-hidden":!0});case"error":return i(a,{"aria-hidden":!0});case"numeric":return i("span",{"aria-hidden":!0,children:t+1+A});default:return null}},q=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+A}`;default:return""}};return t(l,{className:$,id:b,"data-testid":C,$startCol:N,$colSpan:j,children:[i(d,{forwardedAs:"h2","aria-level":S,"data-testid":"timeline-title",weight:"bold",children:w}),i("div",{role:"list",children:y.map(((e,r)=>{const{title:a,content:n,statuses:s,variant:l}=e,d=l||(0===r?"current":"upcoming-active");return t(o,{role:"listitem",children:[t(m,{children:[t(p,{"data-testid":x?`circleindicator${r+1}_div_${x}`:"circleindicator",$variant:d,children:[i(c,{children:q(d,r)}),k(d,r)]}),i(u,{$variant:d})]}),t(h,{className:"timeline-item-content",children:[U(a,S+1),s&&i(f,{children:_(s)}),O(n)]})]},`timeline-item-${r}`)}))})]})};export{y as Timeline};
+import{useRef as e,createElement as t}from"react";import{jsxs as i,jsx as r,Fragment as s}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import l from"clsx";import{Pill as c}from"../pill/pill.js";import{VisuallyHidden as m}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as d}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as o}from"../typography/index.js";import{tokens as p,timelineTitle as u,timelineWrapper as h,timelineItem as v,timelineIndicators as f,circleIndicator as g,lineIndicator as j,timelinePills as y,timelineItemContent as N,timelineItemTitle as b}from"./timeline.styles.js";const x=({items:x,className:w,id:k,title:C,startCol:S,colSpan:$,"data-base-indicator-testid":q,"data-testid":H="timeline",headingLevel:M=2,counterOffset:O=0})=>{const U=e(null);d(U,{[p.wrapper.startCol]:S,[p.wrapper.colSpan]:$});const _=e=>"string"==typeof e?r(o.BodyMD,{className:"timeline-item-content-text",children:e}):r(s,{children:e}),B=(e,t)=>"string"==typeof e?r(o.HeadingXS,{as:"h3","aria-level":t,weight:"semibold",className:l(b,"timeline-item-title"),children:e}):r(s,{children:e}),D=e=>e.slice(0,2).map(((e,i)=>t(c,Object.assign({},e,{type:e.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),e.children))),I=(e,t)=>{switch(e){case"completed":return r(n,{"aria-hidden":!0});case"error":return r(a,{"aria-hidden":!0});case"numeric":return r("span",{"aria-hidden":!0,children:t+1+O});default:return null}},L=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+O}`;default:return""}};return i("div",{ref:U,className:l(h,w),id:k,"data-testid":H,children:[r(o.HeadingSM,{as:"h2","aria-level":M,"data-testid":"timeline-title",weight:"bold",className:u,children:C}),r("div",{role:"list",children:x.map(((e,t)=>{const{title:s,content:a,statuses:n,variant:c}=e,d=c||(0===t?"current":"upcoming-active");return i("div",{role:"listitem",className:v,children:[i("div",{className:f,children:[i("div",{"data-testid":q?`circleindicator${t+1}_div_${q}`:"circleindicator",className:g,"data-variant":d,children:[r(m,{children:L(d,t)}),I(d,t)]}),r("div",{className:j,"data-variant":d})]}),i("div",{className:l(N,"timeline-item-content"),children:[B(s,M+1),n&&r("div",{className:y,children:D(n)}),_(a)]})]},`timeline-item-${t}`)}))})]})};export{x as Timeline};
 //# sourceMappingURL=timeline.js.map

package/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\n\nimport type { PillProps } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport {\n    CircleIndicator,\n    LineIndicator,\n    TimelineIndicators,\n    TimelineItem,\n    TimelineItemContent,\n    TimelineItemTitle,\n    TimelinePill,\n    TimelinePills,\n    TimelineTitle,\n    TimelineWrapper,\n} from \"./timeline.style\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <TimelineItemTitle\n                    forwardedAs=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className=\"timeline-item-title\"\n                >\n                    {title}\n                </TimelineItemTitle>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <TimelinePill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </TimelinePill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <TimelineItem key={`timeline-item-${index}`} role=\"listitem\">\n                    <TimelineIndicators>\n                        <CircleIndicator\n                            data-testid={circleIndicatorTestId}\n                            $variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </CircleIndicator>\n                        <LineIndicator $variant={variant} />\n                    </TimelineIndicators>\n                    <TimelineItemContent className=\"timeline-item-content\">\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <TimelinePills>\n                                {renderStatusPills(statuses)}\n                            </TimelinePills>\n                        )}\n                        {renderContent(content)}\n                    </TimelineItemContent>\n                </TimelineItem>\n            );\n        });\n\n    return (\n        <TimelineWrapper\n            className={className}\n            id={id}\n            data-testid={testId}\n            $startCol={startCol}\n            $colSpan={colSpan}\n        >\n            <TimelineTitle\n                forwardedAs=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n            >\n                {title}\n            </TimelineTitle>\n            <div role=\"list\">{renderItems()}</div>\n        </TimelineWrapper>\n    );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","TimelineItemTitle","forwardedAs","weight","renderStatusPills","statuses","slice","map","status","index","_createElement","TimelinePill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","TimelineWrapper","$colSpan","TimelineTitle","role","item","_variant","TimelineItem","TimelineIndicators","CircleIndicator","$variant","VisuallyHidden","LineIndicator","TimelineItemContent","TimelinePills"],"mappings":"0hBAmBO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAKhB,MAAMC,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAACb,UAAU,6BAA4Bc,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBd,EACAe,IAEqB,iBAAVf,EAEHS,EAACO,EAAiB,CACdC,YAAY,kBACAF,EACZG,OAAO,WACPpB,UAAU,sBAAqBc,SAE9BZ,IAKNS,EAAAI,EAAA,CAAAD,SAAGZ,IAGRmB,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAYC,OAAAC,OAAA,GACLL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZ1B,UAAU,yBAETyB,EAAOX,YAMlBmB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOvB,EAACwB,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAOxB,EAACyB,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAOzB,oCAAmBe,EAAQ,EAAIlB,IAC1C,QACI,OAAO,OAIb6B,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIlB,IACtC,QACI,MAAO,KAwCnB,OACI8B,EAACC,EAAe,CACZvC,UAAWA,EACXC,GAAIA,EAAE,cACOK,YACFH,EAAQqC,SACTpC,EAAOU,SAAA,CAEjBH,EAAC8B,EAAa,CACVtB,YAAY,KAAI,aACJZ,gBACA,iBACZa,OAAO,gBAENlB,IAELS,EAAA,MAAA,CAAK+B,KAAK,OAAM5B,SAnDpBf,EAAMyB,KAAI,CAACmB,EAAyBjB,KAChC,MAAMxB,MAAEA,EAAKQ,QAAEA,EAAOY,SAAEA,EAAUY,QAASU,GAAaD,EAIlDT,EACFU,IAAuB,IAAVlB,EAAc,UAAY,mBAE3C,OACIY,EAACO,GAA4CH,KAAK,WAAU5B,SAAA,CACxDwB,EAACQ,EAAkB,CAAAhC,SAAA,CACfwB,EAACS,EAAe,CAAA,cATE1C,EACxB,kBAAkBqB,EAAQ,SAASrB,IACnC,kBAQ4C2C,SACxBd,YAEVvB,EAACsC,EAAc,CAAAnC,SACVuB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBf,EAACuC,YAAwBhB,OAE7BI,EAACa,EAAmB,CAACnD,UAAU,kCAC1BgB,EAAYd,EAAOK,EAAe,GAClCe,GACGX,EAACyC,EAAa,CAAAtC,SACTO,EAAkBC,KAG1Bb,EAAcC,QApBJ,iBAAiBgB,IAsBrB,QAqBL"}
+{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.startCol]: startCol,\n        [styles.tokens.wrapper.colSpan]: colSpan,\n    });\n\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <Typography.HeadingXS\n                    as=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.timelineItemTitle,\n                        \"timeline-item-title\"\n                    )}\n                >\n                    {title}\n                </Typography.HeadingXS>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <Pill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </Pill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <div\n                    key={`timeline-item-${index}`}\n                    role=\"listitem\"\n                    className={styles.timelineItem}\n                >\n                    <div className={styles.timelineIndicators}>\n                        <div\n                            data-testid={circleIndicatorTestId}\n                            className={styles.circleIndicator}\n                            data-variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </div>\n                        <div\n                            className={styles.lineIndicator}\n                            data-variant={variant}\n                        />\n                    </div>\n                    <div\n                        className={clsx(\n                            styles.timelineItemContent,\n                            \"timeline-item-content\"\n                        )}\n                    >\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <div className={styles.timelinePills}>\n                                {renderStatusPills(statuses)}\n                            </div>\n                        )}\n                        {renderContent(content)}\n                    </div>\n                </div>\n            );\n        });\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.timelineWrapper, className)}\n            id={id}\n            data-testid={testId}\n        >\n            <Typography.HeadingSM\n                as=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n                className={styles.timelineTitle}\n            >\n                {title}\n            </Typography.HeadingSM>\n            <div role=\"list\">{renderItems()}</div>\n        </div>\n    );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"w6BAYO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAEhB,MAAMC,EAAaC,EAAuB,MAE1CC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQV,UAAWA,EAClC,CAACS,EAAcC,QAAQT,SAAUA,IAMrC,MAAMU,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAAClB,UAAU,6BAA4BmB,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBnB,EACAoB,IAEqB,iBAAVpB,EAEHc,EAACC,EAAWM,UAAS,CACjBC,GAAG,KAAI,aACKF,EACZG,OAAO,WACPzB,UAAW0B,EACPC,EACA,uBACHR,SAEAjB,IAKNc,EAAAI,EAAA,CAAAD,SAAGjB,IAGR0B,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAIC,OAAAC,OAAA,GACGL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZjC,UAAU,yBAETgC,EAAOb,YAMlBqB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOzB,EAAC0B,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAO1B,EAAC2B,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAO3B,oCAAmBiB,EAAQ,EAAIzB,IAC1C,QACI,OAAO,OAIboC,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIzB,IACtC,QACI,MAAO,KAqDnB,OACIqC,EAAA,MAAA,CACIC,IAAKrC,EACLT,UAAW0B,EAAKqB,EAAwB/C,GACxCC,GAAIA,EAAE,cACOK,EAAMa,SAAA,CAEnBH,EAACC,EAAW+B,UAAS,CACjBxB,GAAG,KAAI,aACKjB,EAAY,cACZ,iBACZkB,OAAO,OACPzB,UAAWiD,EAAoB9B,SAE9BjB,IAELc,EAAA,MAAA,CAAKkC,KAAK,OAAM/B,SAhEpBpB,EAAMgC,KAAI,CAACoB,EAAyBlB,KAChC,MAAM/B,MAAEA,EAAKa,QAAEA,EAAOc,SAAEA,EAAUY,QAASW,GAAaD,EAIlDV,EACFW,IAAuB,IAAVnB,EAAc,UAAY,mBAE3C,OACIY,EAAA,MAAA,CAEIK,KAAK,WACLlD,UAAWqD,EAAmBlC,SAAA,CAE9B0B,SAAK7C,UAAWsD,EAAyBnC,SAAA,CACrC0B,uBAbkBxC,EACxB,kBAAkB4B,EAAQ,SAAS5B,IACnC,kBAaUL,UAAWuD,EAAsB,eACnBd,EAAOtB,SAAA,CAErBH,EAACwC,EAAc,CAAArC,SACVyB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBjB,EAAA,MAAA,CACIhB,UAAWyD,EAAoB,eACjBhB,OAGtBI,EAAA,MAAA,CACI7C,UAAW0B,EACPgC,EACA,yBACHvC,SAAA,CAEAE,EAAYnB,EAAOK,EAAe,GAClCsB,GACGb,EAAA,MAAA,CAAKhB,UAAW2D,EAAoBxC,SAC/BS,EAAkBC,KAG1Bf,EAAcC,QAhCd,iBAAiBkB,IAkCpB,QAqBR"}

package/timeline/timeline.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    readonly wrapper: {
+        readonly startCol: "--fds-internal-timeline-wrapper-startCol";
+        readonly colSpan: "--fds-internal-timeline-wrapper-colSpan";
+    };
+};
+export declare const circleIndicator: import("@linaria/core").LinariaClassName;
+export declare const lineIndicator: import("@linaria/core").LinariaClassName;
+export declare const timelineIndicators: import("@linaria/core").LinariaClassName;
+export declare const timelineWrapper: import("@linaria/core").LinariaClassName;
+export declare const timelineTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItemTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItem: import("@linaria/core").LinariaClassName;
+export declare const timelineItemContent: import("@linaria/core").LinariaClassName;
+export declare const timelinePills: import("@linaria/core").LinariaClassName;

package/timeline/timeline.styles.js

@@ -0,0 +1,2 @@
+import"./timeline.styles_1wcnzot.css";const t={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}},e="c1epf9wu",p="l1ff2pyq",l="t1qzwom7",a="tuaspcp",n="tfsmff8",r="t1qpo82v",i="t1d2q33u",s="tvlbvjk",o="t1afag3x";export{e as circleIndicator,p as lineIndicator,l as timelineIndicators,i as timelineItem,s as timelineItemContent,r as timelineItemTitle,o as timelinePills,n as timelineTitle,a as timelineWrapper,t as tokens};
+//# sourceMappingURL=timeline.styles.js.map

package/timeline/timeline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.styles.js","sources":["../../src/timeline/timeline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    wrapper: {\n        startCol: \"--fds-internal-timeline-wrapper-startCol\",\n        colSpan: \"--fds-internal-timeline-wrapper-colSpan\",\n    },\n} as const;\n\nexport const circleIndicator = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 100%;\n\n    &[data-variant=\"current\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-active\"] {\n        border: 4px solid ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        border: 4px solid ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n\n        svg {\n            color: ${Colour[\"icon-inverse\"]};\n        }\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n        color: ${Colour[\"text-inverse\"]};\n        ${Font[\"body-sm-bold\"]}\n    }\n\n    &[data-variant=\"error\"] {\n        width: 1.8rem;\n        height: 1.8rem;\n        margin: -0.15rem 0 -0.15rem -0.15rem;\n\n        svg {\n            color: ${Colour[\"icon-error\"]};\n            height: 100%;\n            width: 100%;\n        }\n    }\n`;\n\nexport const lineIndicator = css`\n    width: 4px;\n    flex-grow: 1;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    border-radius: ${Radius[\"full\"]};\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-variant=\"current\"],\n    &[data-variant=\"upcoming-active\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        background-color: ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n    }\n\n    &[data-variant=\"error\"] {\n        margin-left: -0.15rem;\n        background-color: ${Colour[\"icon-error\"]};\n    }\n`;\n\nexport const timelineIndicators = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-right: 1rem;\n`;\n\nexport const timelineWrapper = css`\n    ${tokens.wrapper.startCol}: initial;\n    ${tokens.wrapper.colSpan}: initial;\n    grid-column: var(${tokens.wrapper.startCol}, 3) / span\n        var(${tokens.wrapper.colSpan}, 8);\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-column: span 8;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: span 8;\n    }\n`;\n\nexport const timelineTitle = css`\n    margin-bottom: 1rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-bottom: 1.5rem;\n    }\n`;\n\nexport const timelineItemTitle = css`\n    margin-top: -0.125rem;\n    margin-bottom: 0.5rem;\n`;\n\n// default is 2-8-2 on desktop\nexport const timelineItem = css`\n    display: flex;\n\n    &:last-of-type .${lineIndicator} {\n        margin-bottom: 0;\n    }\n`;\n\nexport const timelineItemContent = css`\n    margin-bottom: 2rem;\n    width: 100%;\n`;\n\nexport const timelinePills = css`\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n    gap: 0.5rem;\n`;\n"],"names":["tokens","wrapper","startCol","colSpan","circleIndicator","lineIndicator","timelineIndicators","timelineWrapper","timelineTitle","timelineItemTitle","timelineItem","timelineItemContent","timelinePills"],"mappings":"8DAOO,MAAMA,EAAS,CAClBC,QAAS,CACLC,SAAU,2CACVC,QAAS,4CAIJC,EAAe,WAmDfC,EAAa,WAkCbC,EAAkB,WAOlBC,EAAe,UAefC,EAAa,UAQbC,EAAiB,WAMjBC,EAAY,WAQZC,EAAmB,UAKnBC,EAAa"}

package/timeline/timeline.styles_1wcnzot.css

@@ -0,0 +1,9 @@
+.c1epf9wu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1.5rem;height:1.5rem;border-radius:100%;}.c1epf9wu[data-variant="current"]{background-color:var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-active"]{border:4px solid var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-inactive"]{border:4px solid var(--fds-colour-icon-subtle);}.c1epf9wu[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.c1epf9wu[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.c1epf9wu[data-variant="completed"] svg{color:var(--fds-colour-icon-inverse);}.c1epf9wu[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);color:var(--fds-colour-text-inverse);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}.c1epf9wu[data-variant="error"]{width:1.8rem;height:1.8rem;margin:-0.15rem 0 -0.15rem -0.15rem;}.c1epf9wu[data-variant="error"] svg{color:var(--fds-colour-icon-error);height:100%;width:100%;}
+.l1ff2pyq{width:4px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:0.5rem;margin-bottom:0.5rem;border-radius:var(--fds-radius-full);}.l1ff2pyq[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.l1ff2pyq[data-variant="current"],.l1ff2pyq[data-variant="upcoming-active"]{background-color:var(--fds-colour-icon-primary-subtle);}.l1ff2pyq[data-variant="upcoming-inactive"]{background-color:var(--fds-colour-icon-subtle);}.l1ff2pyq[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.l1ff2pyq[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);}.l1ff2pyq[data-variant="error"]{margin-left:-0.15rem;background-color:var(--fds-colour-icon-error);}
+.t1qzwom7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:1rem;}
+.tuaspcp{--fds-internal-timeline-wrapper-startCol:initial;--fds-internal-timeline-wrapper-colSpan:initial;grid-column:var(--fds-internal-timeline-wrapper-startCol, 3)/span var(--fds-internal-timeline-wrapper-colSpan, 8);}:where(body.fds-breakpoint-lg-max) .tuaspcp{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .tuaspcp{grid-column:span 8;}
+.tfsmff8{margin-bottom:1rem;}:where(body.fds-breakpoint-lg-max) .tfsmff8{margin-bottom:1.5rem;}
+.t1qpo82v{margin-top:-0.125rem;margin-bottom:0.5rem;}
+.t1d2q33u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.t1d2q33u:last-of-type .l1ff2pyq{margin-bottom:0;}
+.tvlbvjk{margin-bottom:2rem;width:100%;}
+.t1afag3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem;gap:0.5rem;}

package/timetable/const.js

@@ -1,2 +1,2 @@
-const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=68,A=84,C=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{A as MIN_HOURLY_INTERVAL_WIDTH,B as MIN_INTERVAL_WIDTH,C as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,t as ROW_HEIGHT,D as ROW_INTERVAL};
+const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{B as MIN_INTERVAL_WIDTH,t as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,D as ROW_INTERVAL};
 //# sourceMappingURL=const.js.map

package/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":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_HEIGHT","MIN_HOURLY_INTERVAL_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IACnBC,EAAa,GACbC,EAA4B,GAC5BC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}
+{"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":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IAGnBC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}

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

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

package/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                        aria-label=\"Refresh timetable records\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        $loading={loading}\n                        icon={<RefreshIcon />}\n                    />\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":["TimeTableHeader","_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","icon","RefreshIcon"],"mappings":"uVA0BO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,EAACC,EAAuB,CAAAC,SAAA,CACpBC,EAACC,EAAmBC,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,QAEnCH,EAACW,EAA+B,CAAAT,SAAA,CAC5BF,EAACY,EAAgB,CAAA,cACD,4BACZC,OAAQ,qBAEPxB,EAAY,oBAEhBG,GACGW,EAACW,EAAmB,CAAA,cACJ,gCAA+B,aAChC,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EACViC,KAAMjB,EAACkB,EAAW,WAkBR"}
+{"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":["TimeTableHeader","_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":"kiBAwBO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA8Cf,OACIQ,SAAKC,UAAWC,YACZC,EAACC,iBACGH,UAAWI,EACXnB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACdY,kBAlDmBC,IAC3BX,IACAL,EAAegB,EAAK,EAiDZC,iBA9CkBD,IAC1BX,IACAN,EAAmBiB,EAAK,EA6ChBd,qBAAsBA,UAtCTgB,IAAjBpB,EAAmCc,QAEnCH,EAAA,MAAA,CAAKC,UAAWS,EAAsCC,SAAA,CAClDX,EAACY,EAAWC,QACRZ,UAAWa,gBACC,4BACZC,OAAQ,qBAEP1B,EAAY,UAA0B,IAAjBA,EAAqB,IAAM,GAAE,YAEtDG,GACGW,EAACa,EAAM,CAAA,cACS,6CACD,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAUhC,EACViC,QAASrB,EACTE,UAAWoB,EACPC,EACAnC,GAAWoC,GAEfC,KAAMrB,EAACsB,EAAW,CAAA,UAmB5B"}

package/timetable/timetable-header/timetable-header.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const refreshButton: import("@linaria/core").LinariaClassName;
+export declare const refreshButtonLoading: import("@linaria/core").LinariaClassName;
+export declare const navigationHeaderWrapper: import("@linaria/core").LinariaClassName;
+export declare const navigationHeaderSubtitleWrapper: import("@linaria/core").LinariaClassName;
+export declare const resultText: import("@linaria/core").LinariaClassName;
+export declare const dateNavigator: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./timetable-header.styles_11gl1h4.css";const e="r1dkvl6z",t="r1u01cjw",s="n17unxsd",l="n1oy278s",r="r64l2hv",a="d13zs1sk";export{a as dateNavigator,l as navigationHeaderSubtitleWrapper,s as navigationHeaderWrapper,e as refreshButton,t as refreshButtonLoading,r as resultText};
+//# sourceMappingURL=timetable-header.styles.js.map

package/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":["refreshButton","refreshButtonLoading","navigationHeaderWrapper","navigationHeaderSubtitleWrapper","resultText","dateNavigator"],"mappings":"wFAIO,MAAMA,EAAa,WAWbC,EAAoB,WAMpBC,EAAuB,WAOvBC,EAA+B,WAO/BC,EAAU,UAIVC,EAAa"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"row-bar.js","sources":["../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <RowCellContainer data-testid=\"timetable-row\" role=\"presentation\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["RowBar","id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","role","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"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"}
+{"version":3,"file":"row-bar.js","sources":["../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport * as styles from \"./row-bar.styles\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <div\n            className={styles.rowCellContainer}\n            data-testid=\"timetable-row\"\n            role=\"presentation\"\n        >\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["RowBar","id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","className","styles.rowCellContainer","role","children","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"0TAsBO,MAAMA,EAAS,EAClBC,KACAC,OACAC,mBACAC,mBACAC,aACAC,aACAC,WACAC,cACAC,gBACAC,eACAC,4BAEA,MAAMC,EAAiBP,EACjBQ,EAAWC,uBAAuBT,EAAYU,GAC9CZ,EACAa,EAAiBV,EACjBO,EAAWC,uBAAuBR,EAAYS,GAAc,GAC5DX,EA6BAa,EAAeC,GAAQ,KACzB,MAAMD,EAA+C,GAIjDL,GACAO,EAAMhB,EAAkB,SAASiB,SAC7BD,EAAMP,EAAgB,WAG1BK,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASX,EACTY,OAAQ,UACRC,cAAed,IAIvB,MAAMe,EAAiB,IAAInB,GAAUoB,MAAK,CAACC,EAAGC,KAC1C,MAAMC,EAAQX,EAAMS,EAAEN,UAAW,SAC3BS,EAAQZ,EAAMU,EAAEP,UAAW,SACjC,OAAIQ,EAAMV,SAASW,IAAe,EAC9BD,EAAME,QAAQD,GAAe,EAC1B,CAAC,IAEZ,IAAIE,EAoGJ,OAlGAP,EAAeQ,SAAQ,CAACC,EAAMC,WAC1B,MAAMd,UAAEA,EAASC,QAAEA,GAAYY,EAC/B,IAAIE,EAAmBxB,EAAWC,uBAC9BQ,EACAP,GAKAkB,GACAd,EAAMkB,EAAkB,SAASjB,SAC7BD,EAAMc,EAAoB,YAG9BI,EAAmBxB,EAAWC,uBAC1BQ,EACAP,GACA,IAIR,MAAMuB,EAAiBzB,EAAWC,uBAC9BS,EACAR,GACA,GAEJE,EAAaI,KAAIkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,IACHE,mBACAC,iBACAG,aAAa,KAGjB,MAAMC,WACFC,EAAApC,EAAS6B,EAAQ,yBAAId,YAAaN,EAChC4B,EAA2BzB,EAC7BN,EAAWC,uBACP4B,EACA3B,GAEJ,SAIJ,IAAI8B,EAFkB1B,EAAMmB,EAAgB,SAK5C,KAAOO,EAAKzB,SAASwB,IACjB,GAlGRE,EAkGmCF,EAANC,EAhGhBE,IAAI,SAAWD,EAAMC,IAAI,QAgGwB,CAClD,MAAMC,EAAWH,EAAKI,IAAI,EAAG,QAAQC,QAAQ,QAC7CjC,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASyB,EAASG,OAAO,SAASC,WAClC5B,OAAQ,aAEZqB,EAAOG,CACX,MACI/B,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASqB,EACJO,OAAO,SACPC,WACL5B,OAAQ,aAEZqB,EAAOD,EAtHC,IAEpBE,EAuHIb,EAAqBY,EAAKM,OAAO,SAASC,UAAU,IAKpDpC,GACAG,EAAMf,EAAkB,SAAS4B,QAC7Bb,EAAMH,EAAgB,WAG1BC,EAAaI,KAAK,CACdpB,KACAqB,UAAWN,EACXO,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAKO,IAA1Be,EAAe2B,QAAiBhD,GAAeC,GAC/CW,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAGhBM,CAAY,GACpB,CACCL,EACAT,EACAI,EACAS,EACAZ,EACAC,EACAC,EACAL,EACAU,IAGJ,OACI2C,SACIC,UAAWC,EAAuB,cACtB,gBACZC,KAAK,eAAcC,SAElBzC,EAAa0C,KAAI,CAACxB,EAAMC,KACrB,OACIkB,EAACM,EAAOrB,OAAAC,OAAA,GAEAL,EAAI,CACR0B,cAvKKC,EAwKD3B,EAAKE,kBAAoBF,EAAKb,WAtK7CT,EAAWkD,cAAcD,GACtBjD,EAAWkD,cAAc5D,IACzBY,EACJ,GAqKYiD,aAjKI1C,EAkKAa,EAAKE,kBAAoBF,EAAKb,UAlKXC,EAmKnBY,EAAKG,gBAAkBH,EAAKZ,SAjK3CV,EAAWkD,cAAcxC,GACtBV,EAAWkD,cAAczC,IAC7BP,GAiKYkD,QAAS/D,EACTO,cAAeA,EACfD,YAAaA,EACbE,aAAcA,IAZT,GAAG0B,kBA5JL,IAACd,EAAmBC,EATlBuC,CAkLP,KAGR"}

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"row-cell.js","sources":["../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DateHelper } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport {\n    Block,\n    BlockContainer,\n    BlockDescription,\n    BlockTitle,\n    Gap,\n    Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n    containerRef: RefObject<HTMLDivElement>;\n    intervalWidth: number;\n    rowBarColor: RowBarColors;\n    ariaColIndex: number;\n    ariaColSpan: number;\n    rowName: string;\n}\n\nconst Component = ({\n    id,\n    startTime,\n    endTime,\n    title,\n    subtitle,\n    status,\n    intervalWidth,\n    rowBarColor,\n    customPopover,\n    cellStyleAttributes,\n    isFocusable,\n    roundedStartTime = startTime,\n    roundedEndTime = endTime,\n    ariaColIndex,\n    ariaColSpan,\n    rowName,\n    onClick,\n}: RowCellProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n    const numberOfIntervals =\n        DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n        ROW_INTERVAL;\n    const totalCellWidth = numberOfIntervals * intervalWidth;\n    const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n    const isClickable =\n        !!onClick || (customPopover && customPopover.trigger === \"click\");\n    const rowAriaLabel = concatIds(\n        `${TimeHelper.formatTimeRange(startTime, endTime)}`,\n        rowName,\n        title,\n        subtitle,\n        `${status}`\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleCellClick = (event: React.MouseEvent) => {\n        if (onClick) {\n            onClick(\n                {\n                    id,\n                    startTime,\n                    endTime,\n                    status,\n                    title,\n                    subtitle,\n                    customPopover,\n                },\n                event\n            );\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCellContent = () => (\n        <WithOptionalPopover customPopover={customPopover}>\n            <Wrapper>\n                <Block\n                    $width={adjustedCellWidth}\n                    $status={status}\n                    $mainColor={rowBarColor.mainColor}\n                    $altColor={rowBarColor.alternateColor}\n                    $isClickable={isClickable}\n                    $customMainColor={cellStyleAttributes?.backgroundColor}\n                    $customAltColor={cellStyleAttributes?.altBackgroundColor}\n                    $customHoverColor={\n                        cellStyleAttributes?.hoverBackgroundColor\n                    }\n                    $customAltHoverColor={\n                        cellStyleAttributes?.altHoverBackgroundColor\n                    }\n                    $styleType={cellStyleAttributes?.styleType}\n                    tabIndex={isFocusable ? 0 : undefined}\n                    onClick={handleCellClick}\n                >\n                    <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n                    {title && (\n                        <BlockTitle weight={\"semibold\"} aria-hidden>\n                            {title}\n                        </BlockTitle>\n                    )}\n                    {subtitle && (\n                        <BlockDescription weight={\"bold\"} aria-hidden>\n                            {subtitle}\n                        </BlockDescription>\n                    )}\n                </Block>\n                <Gap />\n            </Wrapper>\n        </WithOptionalPopover>\n    );\n\n    return (\n        <BlockContainer\n            key={`block-container-key`}\n            data-testid={`block-container`}\n            $isOnTheHour={isOnTheHour}\n            role=\"gridcell\"\n            aria-colindex={ariaColIndex}\n            aria-colspan={ariaColSpan}\n        >\n            {renderCellContent()}\n        </BlockContainer>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","customPopover","cellStyleAttributes","isFocusable","roundedStartTime","roundedEndTime","ariaColIndex","ariaColSpan","rowName","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","rowAriaLabel","concatIds","TimeHelper","formatTimeRange","handleCellClick","event","_jsx","BlockContainer","$isOnTheHour","role","children","WithOptionalPopover","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","tabIndex","undefined","VisuallyHidden","BlockTitle","weight","BlockDescription","Gap"],"mappings":"2sBA+BA,MAiHaA,EAAUC,EAAMC,MAjHX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,gBACAC,sBACAC,cACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,eACAC,cACAC,UACAC,cAKA,MAAMC,EAAgE,IAAlDC,EAAMN,EAAgB,SAASO,IAAI,WAKjDC,EAHFC,EAAWC,qBAAqBX,EAAkBC,GAClDW,EACuCjB,EACAkB,EACrCC,IACAT,GAAYR,GAA2C,UAA1BA,EAAckB,QAC3CC,EAAeC,EACjB,GAAGC,EAAWC,gBAAgB7B,EAAWC,KACzCa,EACAZ,EACAC,EACA,GAAGC,KAMD0B,EAAmBC,IACjBhB,GACAA,EACI,CACIhB,KACAC,YACAC,UACAG,SACAF,QACAC,WACAI,iBAEJwB,EAER,EA4CJ,OACIC,EAACC,EAAc,CAAA,cAEE,kBAAiBC,aAChBlB,EACdmB,KAAK,2BACUvB,EAAY,eACbC,EAAWuB,SA5C7BJ,EAACK,EAAmB,CAAC9B,cAAeA,EAAa6B,SAC7CE,EAACC,EAAO,CAAAH,SAAA,CACJE,EAACE,EAAK,CAAAC,OACMtB,EAAiBuB,QAChBtC,EAAMuC,WACHrC,EAAYsC,UAASC,UACtBvC,EAAYwC,eAAcC,aACvBvB,EAAWwB,iBACPxC,aAAmB,EAAnBA,EAAqByC,gBAAeC,gBACrC1C,aAAmB,EAAnBA,EAAqB2C,mBAAkBC,kBAEpD5C,aAAmB,EAAnBA,EAAqB6C,qBAAoBC,qBAGzC9C,aAAmB,EAAnBA,EAAqB+C,wBAAuBC,WAEpChD,aAAmB,EAAnBA,EAAqBiD,UACjCC,SAAUjD,EAAc,OAAIkD,EAC5B5C,QAASe,EAAeM,SAAA,CAExBJ,EAAC4B,EAAc,CAAAxB,SAAEV,IAChBxB,GACG8B,EAAC6B,EAAU,CAACC,OAAQ,WAAU,eAAA,EAAA1B,SACzBlC,IAGRC,GACG6B,EAAC+B,EAAgB,CAACD,OAAQ,OAAM,eAAA,EAAA1B,SAC3BjC,OAIb6B,EAACgC,EAAG,CAAA,SAOH,sBAQQ"}
+{"version":3,"file":"row-cell.js","sources":["../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React, { useRef } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport type { SlotStyle, TimeSlotProps } from \"../../shared/time-slot\";\nimport { TimeSlot } from \"../../shared/time-slot\";\nimport { Colour, formatUnitValue, useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableCellType } from \"../types\";\nimport * as styles from \"./row-cell.styles\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n    containerRef: RefObject<HTMLDivElement>;\n    intervalWidth: number;\n    rowBarColor: RowBarColors;\n    ariaColIndex: number;\n    ariaColSpan: number;\n    rowName: string;\n}\n\nconst styleTypeToSlotType: Record<\"solid\" | \"stripes\", SlotStyle> = {\n    stripes: \"stripes\",\n    solid: \"default\",\n};\n\nconst statusToTimeSlotPropsMap: Record<\n    TimeTableCellType,\n    Pick<\n        TimeSlotProps,\n        | \"bgColor\"\n        | \"bgColor2\"\n        | \"hoverBgColor\"\n        | \"hoverBgColor2\"\n        | \"styleType\"\n        | \"nonClickableCursor\"\n    >\n> = {\n    blocked: {\n        styleType: \"stripes\",\n        bgColor: Colour[\"bg-stronger\"],\n        bgColor2: Colour[\"bg-strongest\"],\n        nonClickableCursor: \"not-allowed\",\n    },\n    filled: {\n        styleType: \"default\",\n        bgColor: `var(${styles.tokens.block.mainColor})`,\n    },\n    disabled: {\n        styleType: \"default\",\n        bgColor: Colour[\"bg-disabled\"],\n        nonClickableCursor: \"not-allowed\",\n    },\n    pending: {\n        styleType: \"stripes\",\n        bgColor: `var(${styles.tokens.block.mainColor})`,\n        bgColor2: `var(${styles.tokens.block.altColor})`,\n        nonClickableCursor: \"not-allowed\",\n    },\n    default: {\n        styleType: \"default\",\n        bgColor: \"transparent\",\n        hoverBgColor: Colour[\"bg-hover-subtle\"],\n    },\n};\n\nconst Component = ({\n    id,\n    startTime,\n    endTime,\n    title,\n    subtitle,\n    status,\n    intervalWidth,\n    rowBarColor,\n    customPopover,\n    cellStyleAttributes,\n    isFocusable,\n    roundedStartTime = startTime,\n    roundedEndTime = endTime,\n    ariaColIndex,\n    ariaColSpan,\n    rowName,\n    onClick,\n}: RowCellProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n    const numberOfIntervals =\n        DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n        ROW_INTERVAL;\n    const totalCellWidth = numberOfIntervals * intervalWidth;\n    const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n    const isClickable =\n        !!onClick || (customPopover && customPopover.trigger === \"click\");\n    const rowAriaLabel = concatIds(\n        `${TimeHelper.formatTimeRange(startTime, endTime)}`,\n        rowName,\n        title,\n        subtitle,\n        `${status}`\n    );\n\n    const blockRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(blockRef, {\n        [styles.tokens.block.width]: formatUnitValue(adjustedCellWidth, \"px\"),\n        [styles.tokens.block.mainColor]: rowBarColor.mainColor,\n        [styles.tokens.block.altColor]: rowBarColor.alternateColor,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleCellClick = (event: React.MouseEvent) => {\n        if (onClick) {\n            onClick(\n                {\n                    id,\n                    startTime,\n                    endTime,\n                    status,\n                    title,\n                    subtitle,\n                    customPopover,\n                },\n                event\n            );\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCellContent = () => {\n        const {\n            styleType,\n            bgColor,\n            bgColor2,\n            hoverBgColor,\n            hoverBgColor2,\n            nonClickableCursor,\n        } = statusToTimeSlotPropsMap[status];\n\n        const timetableStyleType = cellStyleAttributes?.styleType ?? \"default\";\n        const timeslotStyleType =\n            timetableStyleType === \"default\"\n                ? styleType\n                : styleTypeToSlotType[timetableStyleType];\n        const customBgColor = cellStyleAttributes?.backgroundColor || bgColor;\n        const customBg2Color =\n            cellStyleAttributes?.altBackgroundColor || bgColor2;\n        const customHoverBgColor =\n            cellStyleAttributes?.hoverBackgroundColor || hoverBgColor;\n        const customHoverBg2Color =\n            cellStyleAttributes?.altHoverBackgroundColor || hoverBgColor2;\n\n        return (\n            <WithOptionalPopover customPopover={customPopover}>\n                <div className={styles.wrapper}>\n                    <TimeSlot\n                        className={styles.block}\n                        ref={blockRef}\n                        clickable={isClickable}\n                        bgColor={customBgColor}\n                        bgColor2={customBg2Color}\n                        hoverBgColor={customHoverBgColor}\n                        hoverBgColor2={customHoverBg2Color}\n                        nonClickableCursor={nonClickableCursor}\n                        onClick={handleCellClick}\n                        styleType={timeslotStyleType}\n                        tabIndex={isFocusable ? 0 : undefined}\n                    >\n                        <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n                        {title && (\n                            <Typography.BodySM\n                                className={styles.blockTitle}\n                                weight=\"semibold\"\n                                aria-hidden\n                            >\n                                {title}\n                            </Typography.BodySM>\n                        )}\n                        {subtitle && (\n                            <Typography.BodyXS\n                                className={styles.blockDescription}\n                                weight=\"bold\"\n                                aria-hidden\n                            >\n                                {subtitle}\n                            </Typography.BodyXS>\n                        )}\n                    </TimeSlot>\n                    <div className={styles.gap} />\n                </div>\n            </WithOptionalPopover>\n        );\n    };\n\n    return (\n        <div\n            key={`block-container-key`}\n            data-testid={`block-container`}\n            className={clsx(\n                styles.blockContainer,\n                isOnTheHour && styles.blockContainerOnTheHour\n            )}\n            role=\"gridcell\"\n            aria-colindex={ariaColIndex}\n            aria-colspan={ariaColSpan}\n        >\n            {renderCellContent()}\n        </div>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["styleTypeToSlotType","stripes","solid","statusToTimeSlotPropsMap","blocked","styleType","bgColor","Colour","bgColor2","nonClickableCursor","filled","styles.tokens","block","mainColor","disabled","pending","altColor","default","hoverBgColor","RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","customPopover","cellStyleAttributes","isFocusable","roundedStartTime","roundedEndTime","ariaColIndex","ariaColSpan","rowName","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","rowAriaLabel","concatIds","TimeHelper","formatTimeRange","blockRef","useRef","useApplyStyle","width","formatUnitValue","alternateColor","handleCellClick","event","_jsx","className","clsx","styles.blockContainer","styles.blockContainerOnTheHour","role","children","hoverBgColor2","timetableStyleType","_a","timeslotStyleType","customBgColor","backgroundColor","customBg2Color","altBackgroundColor","customHoverBgColor","hoverBackgroundColor","customHoverBg2Color","altHoverBackgroundColor","WithOptionalPopover","_jsxs","styles.wrapper","TimeSlot","styles.block","ref","clickable","tabIndex","undefined","VisuallyHidden","Typography","BodySM","styles.blockTitle","weight","BodyXS","styles.blockDescription","styles.gap","renderCellContent"],"mappings":"q0CA8BA,MAAMA,EAA8D,CAChEC,QAAS,UACTC,MAAO,WAGLC,EAWF,CACAC,QAAS,CACLC,UAAW,UACXC,QAASC,EAAO,eAChBC,SAAUD,EAAO,gBACjBE,mBAAoB,eAExBC,OAAQ,CACJL,UAAW,UACXC,QAAS,OAAOK,EAAcC,MAAMC,cAExCC,SAAU,CACNT,UAAW,UACXC,QAASC,EAAO,eAChBE,mBAAoB,eAExBM,QAAS,CACLV,UAAW,UACXC,QAAS,OAAOK,EAAcC,MAAMC,aACpCL,SAAU,OAAOG,EAAcC,MAAMI,YACrCP,mBAAoB,eAExBQ,QAAS,CACLZ,UAAW,UACXC,QAAS,cACTY,aAAcX,EAAO,qBA2JhBY,EAAUC,EAAMC,MAvJX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,gBACAC,sBACAC,cACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,eACAC,cACAC,UACAC,cAKA,MAAMC,EAAgE,IAAlDC,EAAMN,EAAgB,SAASO,IAAI,WAKjDC,EAHFC,EAAWC,qBAAqBX,EAAkBC,GAClDW,EACuCjB,EACAkB,EACrCC,IACAT,GAAYR,GAA2C,UAA1BA,EAAckB,QAC3CC,EAAeC,EACjB,GAAGC,EAAWC,gBAAgB7B,EAAWC,KACzCa,EACAZ,EACAC,EACA,GAAGC,KAGD0B,EAAWC,EAAuB,MAExCC,EAAcF,EAAU,CACpB,CAAC1C,EAAcC,MAAM4C,OAAQC,EAAgBf,EAAmB,MAChE,CAAC/B,EAAcC,MAAMC,WAAYgB,EAAYhB,UAC7C,CAACF,EAAcC,MAAMI,UAAWa,EAAY6B,iBAMhD,MAAMC,EAAmBC,IACjBtB,GACAA,EACI,CACIhB,KACAC,YACAC,UACAG,SACAF,QACAC,WACAI,iBAEJ8B,EAER,EAuEJ,OACIC,EAAA,MAAA,CAAA,cAEiB,kBACbC,UAAWC,EACPC,EACAzB,GAAe0B,GAEnBC,KAAK,2BACU/B,EAAY,eACbC,EAAW+B,SA3EP,YACtB,MAAM9D,UACFA,EAASC,QACTA,EAAOE,SACPA,EAAQU,aACRA,EAAYkD,cACZA,EAAa3D,mBACbA,GACAN,EAAyBwB,GAEvB0C,EAAmD,QAA9BC,EAAAvC,aAAmB,EAAnBA,EAAqB1B,iBAAS,IAAAiE,EAAAA,EAAI,UACvDC,EACqB,YAAvBF,EACMhE,EACAL,EAAoBqE,GACxBG,GAAgBzC,aAAmB,EAAnBA,EAAqB0C,kBAAmBnE,EACxDoE,GACF3C,aAAmB,EAAnBA,EAAqB4C,qBAAsBnE,EACzCoE,GACF7C,aAAmB,EAAnBA,EAAqB8C,uBAAwB3D,EAC3C4D,GACF/C,aAAmB,EAAnBA,EAAqBgD,0BAA2BX,EAEpD,OACIP,EAACmB,EAAmB,CAAClD,cAAeA,EAAaqC,SAC7Cc,EAAA,MAAA,CAAKnB,UAAWoB,EAAcf,SAAA,CAC1Bc,EAACE,EAAQ,CACLrB,UAAWsB,EACXC,IAAKhC,EACLiC,UAAWvC,EACXzC,QAASkE,EACThE,SAAUkE,EACVxD,aAAc0D,EACdR,cAAeU,EACfrE,mBAAoBA,EACpB6B,QAASqB,EACTtD,UAAWkE,EACXgB,SAAUvD,EAAc,OAAIwD,EAASrB,SAAA,CAErCN,EAAC4B,EAAc,CAAAtB,SAAElB,IAChBxB,GACGoC,EAAC6B,EAAWC,OAAM,CACd7B,UAAW8B,EACXC,OAAO,WAAU,eAAA,EAAA1B,SAGhB1C,IAGRC,GACGmC,EAAC6B,EAAWI,OAAM,CACdhC,UAAWiC,EACXF,OAAO,OAAM,eAAA,EAAA1B,SAGZzC,OAIbmC,SAAKC,UAAWkC,QAEF,EAgBrBC,IAVI,sBAWH"}

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

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

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

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

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

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

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

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

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

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

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

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