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

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

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

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

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

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

@@ -0,0 +1,7 @@
+export declare const scheduleHeaderWrapper: import("@linaria/core").LinariaClassName;
+export declare const leftSection: import("@linaria/core").LinariaClassName;
+export declare const rightSection: import("@linaria/core").LinariaClassName;
+export declare const dateNavigator: import("@linaria/core").LinariaClassName;
+export declare const text: import("@linaria/core").LinariaClassName;
+export declare const button: import("@linaria/core").LinariaClassName;
+export declare const DROPDOWN_WIDTH = "240px";

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

@@ -0,0 +1,2 @@
+import"./schedule-header.styles_1n2u5vj.css";const e="smt7il1",s="lzjgzr2",t="r1xv7b6y",d="d19djkwt",l="t1cre13t",r="bzltxmo",c="240px";export{c as DROPDOWN_WIDTH,r as button,d as dateNavigator,s as leftSection,t as rightSection,e as scheduleHeaderWrapper,l as text};
+//# sourceMappingURL=schedule-header.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-header.styles.js","sources":["../../../src/schedule/schedule-header/schedule-header.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const scheduleHeaderWrapper = css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: ${Spacing[\"spacing-16\"]};\n    color: ${Colour[\"text-primary\"]};\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const leftSection = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n`;\n\nexport const rightSection = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const dateNavigator = css`\n    width: 100%;\n    max-width: 400px;\n`;\n\nexport const text = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const button = css`\n    min-width: 5rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nexport const DROPDOWN_WIDTH = \"240px\";\n"],"names":["scheduleHeaderWrapper","leftSection","rightSection","dateNavigator","text","button","DROPDOWN_WIDTH"],"mappings":"qFAOO,MAAMA,EAAqB,UASrBC,EAAW,UAYXC,EAAY,WAUZC,EAAa,WAKbC,EAAI,WAIJC,EAAM,UAWNC,EAAiB"}

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

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

package/schedule/schedule-slot-content/index.d.ts

@@ -0,0 +1,4 @@
+export * from "../shared/hooks";
+export * from "../shared/utils";
+export * from "./schedule-slot-content";
+export * from "./style-helper";

package/schedule/schedule-slot-content/schedule-slot-content.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import type { ScheduleSlotProps } from "../types";
+interface SlotContentClassNames {
+    container: string;
+    blocked: string;
+    available: string;
+}
+interface SlotContentTokens {
+    offsetTop: string;
+    height: string;
+}
+interface ScheduleSlotContentProps {
+    slot: ScheduleSlotProps;
+    offsetTop: number;
+    classNames: SlotContentClassNames;
+    tokens: SlotContentTokens;
+    clickable?: boolean;
+    children: React.ReactNode;
+}
+export declare const ScheduleSlotContent: ({ slot, offsetTop, classNames, tokens, clickable, children, }: ScheduleSlotContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import{useRef as o}from"react";import{TimeSlot as r}from"../../shared/time-slot/time-slot.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 s}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{TimeHelper as l}from"../../util/time-helper.js";import{CELL_HEIGHT as m}from"../const.js";import{getTimeSlotStyleProps as i}from"./style-helper.js";const a=({slot:a,offsetTop:p,classNames:c,tokens:n,clickable:u,children:h})=>{const d=l.calculateDuration(a.startTime,a.endTime),f=o(null);s(f,{[n.offsetTop]:`${p}px`,[n.height]:d/30*m-1+"px"});const j=i(a.status);return e(r,{ref:f,className:t(c.container,"blocked"===a.status&&c.blocked,"available"===a.status&&c.available),styleType:j.styleType,bgColor:j.bgColor,bgColor2:j.bgColor2,clickable:u,onClick:e=>{var t;return null===(t=a.onClick)||void 0===t?void 0:t.call(a,a,e)},children:h})};export{a as ScheduleSlotContent};
+//# sourceMappingURL=schedule-slot-content.js.map

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

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

package/schedule/schedule-slot-content/style-helper.d.ts

@@ -0,0 +1,8 @@
+import type { SlotStyle } from "../../shared/time-slot";
+import type { ScheduleSlotProps } from "../types";
+export interface TimeSlotStyleProps {
+    styleType: SlotStyle;
+    bgColor: string;
+    bgColor2?: string;
+}
+export declare const getTimeSlotStyleProps: (status: ScheduleSlotProps["status"]) => TimeSlotStyleProps;

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

@@ -0,0 +1,2 @@
+import"../../theme/theme-provider/index.js";import"react";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as e}from"../../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";const r=r=>{switch(r){case"pending":return{styleType:"stripes",bgColor:e["bg-warning"],bgColor2:e["bg-warning-hover"]};case"blocked":return{styleType:"default",bgColor:e["bg-inverse-subtle"]};case"available":return{styleType:"default",bgColor:e["bg-success-hover"]};case"booked":return{styleType:"default",bgColor:e["bg-primary-subtler"]};default:return{styleType:"default",bgColor:e.bg}}};export{r as getTimeSlotStyleProps};
+//# sourceMappingURL=style-helper.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"schedule-week-view.js","sources":["../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ScheduleContainer } from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../shared\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport {\n    BlankCell,\n    BodyContainer,\n    Description,\n    HeaderContainer,\n    LoadingContainer,\n    ServiceContainer,\n    ServiceHeader,\n    SlotColumn,\n    SlotGrid,\n    Timeline,\n} from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: undefined,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderContainer>\n                <BlankCell />\n                <ServiceContainer>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <ServiceHeader key={day.format(\"YYYY-MM-DD\")}>\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Description>{day.format(\"ddd\")}</Description>\n                            </ServiceHeader>\n                        );\n                    })}\n                </ServiceContainer>\n            </HeaderContainer>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <SlotGrid>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <SlotColumn key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <Timeline $top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </SlotColumn>\n                );\n            })}\n        </SlotGrid>\n    );\n\n    const renderBodyContainer = () => (\n        <BodyContainer ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </BodyContainer>\n    );\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ScheduleWeekView","date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","_jsx","ScheduleContainer","children","LoadingContainer","ThemedLoadingSpinner","_jsxs","HeaderContainer","BlankCell","ServiceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","undefined","circleLeft","circleRight","generateStyleProps","ServiceHeader","DayCell","calendarDate","Description","format","BodyContainer","ref","TimeIndicator","isWeekView","SlotGrid","dayDate","SlotColumn","Timeline","$top","time","TimeCell"],"mappings":"y6BA8BO,MAAMA,EAAmB,EAC5BC,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAkBP,EAASC,GAC5CO,EAAUC,EAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,GAAQ,KACrB,MAAMC,EAAcC,EAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,GAAQ,IACfW,EAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,GAAQ,IACnBc,EAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,IAwFd,OACIc,EAACC,EAAiB,CAAAC,SACb9B,EACG4B,EAACG,EAAgB,CAAAD,SACbF,EAACI,EAAoB,CAAA,KAGzBC,eArEJA,EAACC,aACGN,EAACO,MACDP,EAACQ,EAAgB,CAAAN,SACZnB,EAAS0B,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOd,EAAO,OAE5BY,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,iBAAaC,GAQjB,OALIJ,IACAD,EAAkBM,WAAa,mBAC/BN,EAAkBO,YAAc,oBAG7BP,CAAiB,EAYkBQ,CAAmBT,GAC7C,OACIL,EAACe,aACGpB,EAACqB,iBACGnD,KAAMwC,EACNY,aAAcpC,EAAMhB,IAChByC,IAERX,EAACuB,EAAW,CAAArB,SAAEQ,EAAIc,OAAO,WANTd,EAAIc,OAAO,cAOf,SAqCpCnB,EAACoB,EAAa,CAACC,IAAK7C,EAAOqB,SAAA,CACvBF,EAAC2B,EAAa,CACVtD,QAASA,EACTC,QAASA,EACTkD,OAAO,OACP7C,eAAgBA,EAChBiD,YAAY,IAlCpB5B,EAAC6B,EAAQ,CAAA3B,SACJnB,EAAS0B,KAAKC,IACX,MAAMoB,EAAUpB,EAAIc,OAAO,cAC3B,OACInB,EAAC0B,EAAU,CAAA7B,SAAA,CACa,OAAnBvB,GACG+B,EAAIG,OAAOd,EAAO,QACdC,EAACgC,EAAQ,CAAAC,KAAOtD,IAEvBe,EAAUe,KAAKyB,GACZlC,EAACmC,EAAQ,CAELL,QAASA,EACTI,KAAMA,EACN/D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfwD,OAPAJ,EAiBJ,aA+BL"}
+{"version":3,"file":"schedule-week-view.js","sources":["../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as dayViewStyles from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../schedule-slot-content\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport * as styles from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\ninterface WeekTimelineProps {\n    top: number;\n}\n\nconst WeekTimeline = ({ top }: WeekTimelineProps) => {\n    const timelineRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(timelineRef, {\n        [styles.tokens.timeline.top]: `${top}px`,\n    });\n\n    return <div ref={timelineRef} className={styles.timeline} />;\n};\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: undefined,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <div className={styles.headerContainer}>\n                <div className={styles.blankCell} />\n                <div className={styles.serviceContainer}>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <div\n                                className={styles.serviceHeader}\n                                key={day.format(\"YYYY-MM-DD\")}\n                            >\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Typography.BodyMD\n                                    className={styles.description}\n                                >\n                                    {day.format(\"ddd\")}\n                                </Typography.BodyMD>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <div className={styles.slotGrid}>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <div className={styles.slotColumn} key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <WeekTimeline top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </div>\n                );\n            })}\n        </div>\n    );\n\n    const renderBodyContainer = () => (\n        <div className={styles.bodyContainer} ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </div>\n    );\n\n    return (\n        <div className={dayViewStyles.scheduleContainer}>\n            {loading ? (\n                <div className={styles.loadingContainer}>\n                    <ThemedLoadingSpinner data-testid=\"loading-spinner\" />\n                </div>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["WeekTimeline","top","timelineRef","useRef","useApplyStyle","styles.tokens","timeline","_jsx","ref","className","styles.timeline","ScheduleWeekView","date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","dayViewStyles.scheduleContainer","children","styles.loadingContainer","ThemedLoadingSpinner","_jsxs","styles.headerContainer","styles.blankCell","styles.serviceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","undefined","circleLeft","circleRight","generateStyleProps","styles.serviceHeader","DayCell","Object","assign","calendarDate","Typography","BodyMD","styles.description","format","styles.bodyContainer","TimeIndicator","isWeekView","styles.slotGrid","dayDate","styles.slotColumn","time","TimeCell"],"mappings":"q5CAqBA,MAAMA,EAAe,EAAGC,UACpB,MAAMC,EAAcC,EAAuB,MAM3C,OAJAC,EAAcF,EAAa,CACvB,CAACG,EAAcC,SAASL,KAAM,GAAGA,QAG9BM,EAAA,MAAA,CAAKC,IAAKN,EAAaO,UAAWC,GAAmB,EAOnDC,EAAmB,EAC5BC,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAkBP,EAASC,GAC5CO,EAAUC,EAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,GAAQ,KACrB,MAAMC,EAAcC,EAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,GAAQ,IACfW,EAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,GAAQ,IACnBc,EAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,IA+Fd,OACIrB,EAAA,MAAA,CAAKE,UAAWiC,EAA+BC,SAC1C7B,EACGP,EAAA,MAAA,CAAKE,UAAWmC,EAAuBD,SACnCpC,EAACsC,iBAAiC,sBAGtCC,eA5EJA,EAAA,MAAA,CAAKrC,UAAWsC,EAAsBJ,SAAA,CAClCpC,EAAA,MAAA,CAAKE,UAAWuC,IAChBzC,EAAA,MAAA,CAAKE,UAAWwC,EAAuBN,SAClClB,EAASyB,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOb,EAAO,OAE5BW,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,iBAAaC,GAQjB,OALIJ,IACAD,EAAkBM,WAAa,mBAC/BN,EAAkBO,YAAc,oBAG7BP,CAAiB,EAYkBQ,CAAmBT,GAC7C,OACIL,EAAA,MAAA,CACIrC,UAAWoD,EAAoBlB,SAAA,CAG/BpC,EAACuD,EAAOC,OAAAC,OAAA,CACJpD,KAAMuC,EACNc,aAAcrC,EAAMhB,IAChBwC,IAER7C,EAAC2D,EAAWC,OAAM,CACd1D,UAAW2D,EAAkBzB,SAE5BQ,EAAIkB,OAAO,WAVXlB,EAAIkB,OAAO,cAYd,SAqC1BvB,EAAA,MAAA,CAAKrC,UAAW6D,EAAsB9D,IAAKe,YACvChB,EAACgE,GACGxD,QAASA,EACTC,QAASA,EACTqD,OAAO,OACPhD,eAAgBA,EAChBmD,YAAY,IAlCpBjE,EAAA,MAAA,CAAKE,UAAWgE,EAAe9B,SAC1BlB,EAASyB,KAAKC,IACX,MAAMuB,EAAUvB,EAAIkB,OAAO,cAC3B,OACIvB,EAAA,MAAA,CAAKrC,UAAWkE,EAAiBhC,SAAA,CACT,OAAnBtB,GACG8B,EAAIG,OAAOb,EAAO,QACdlC,EAACP,EAAY,CAACC,IAAKoB,IAE1Be,EAAUc,KAAK0B,GACZrE,EAACsE,GAEGH,QAASA,EACTE,KAAMA,EACN/D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfwD,OAPuBF,EAiBlC,aA+BZ"}

package/schedule/schedule-week-view/schedule-week-view.styles.d.ts

@@ -1,32 +1,15 @@
-interface TimelineStyleProps {
-    $top: number;
-}
-export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const BlankCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ServiceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ServiceHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const BodyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const SlotGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Timeline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$top"> & TimelineStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$top"> & TimelineStyleProps, never>>> & string;
-export declare const SlotColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export {};
+export declare const tokens: {
+    timeline: {
+        top: string;
+    };
+};
+export declare const loadingContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const blankCell: import("@linaria/core").LinariaClassName;
+export declare const serviceContainer: import("@linaria/core").LinariaClassName;
+export declare const serviceHeader: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const bodyContainer: import("@linaria/core").LinariaClassName;
+export declare const slotGrid: import("@linaria/core").LinariaClassName;
+export declare const timeline: import("@linaria/core").LinariaClassName;
+export declare const slotColumn: import("@linaria/core").LinariaClassName;

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

@@ -1,75 +1,2 @@
-import i from"styled-components";import{Typography as e}from"../../typography/index.js";import{V3_Border as t,V3_Colour as r,V3_Radius as o,V3_Spacing as d,V3_Font as n}from"../../v3_theme/index.js";import{TIME_INDICATOR_WIDTH as l,HEADER_HEIGHT as p}from"../const.js";const s=i.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 25rem;
-    height: 100%;
-    border: ${t["width-010"]} ${t.solid} ${r.border};
-    border-radius: ${o.md};
-    background: ${r.bg};
-`,a=i.div`
-    display: grid;
-    grid-template-columns: ${l}px repeat(7, 1fr);
-    max-height: ${p}px;
-`,m=i.div`
-    min-width: ${l}px;
-    position: sticky;
-    z-index: 2;
-`,c=i.div`
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    grid-column-start: 2;
-    grid-column-end: 9;
-`,g=i.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    padding: ${d["spacing-24"]};
-    color: ${r["text-primary"]};
-`,h=i(e.BodyMD)`
-    font-weight: ${n.Spec["weight-semibold"]};
-`,x=i.div`
-    display: grid;
-    grid-template-columns: ${l}px repeat(7, 1fr);
-    overflow-x: hidden;
-    overflow-y: auto;
-    flex: 1;
-    height: 100%;
-    border: ${t["width-010"]} ${t.solid} ${r.border};
-`,$=i.div`
-    grid-column-start: 2;
-    grid-column-end: 9;
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    min-width: max-content;
-`,f=i.div`
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: ${r["icon-primary"]};
-    top: ${i=>i.$top}px;
-    z-index: 2;
-
-    &::before {
-        content: "";
-        position: absolute;
-        left: -6px;
-        top: -6px;
-        width: ${d["spacing-12"]};
-        height: ${d["spacing-12"]};
-        border-radius: ${o.full};
-        background: ${r["icon-primary"]};
-        z-index: 1;
-    }
-`,u=i.div`
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    border-right: ${t["width-010"]} ${t.solid}
-        ${r.border};
-    &:last-child {
-        border-right: none;
-    }
-`;export{m as BlankCell,x as BodyContainer,h as Description,a as HeaderContainer,s as LoadingContainer,c as ServiceContainer,g as ServiceHeader,u as SlotColumn,$ as SlotGrid,f as Timeline};
+import"./schedule-week-view.styles_x7x50m.css";const e={timeline:{top:"--fds-internal-scheduleWeekView-timeline-top"}},s="lmprb8g",l="h1595692",t="b155xk04",c="snwncax",i="s1u9fy4o",u="dmchg65",w="b16u8uwa",b="s1w10b64",d="tbbbluc",m="sej7vmd";export{t as blankCell,w as bodyContainer,u as description,l as headerContainer,s as loadingContainer,c as serviceContainer,i as serviceHeader,m as slotColumn,b as slotGrid,d as timeline,e as tokens};
 //# sourceMappingURL=schedule-week-view.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"schedule-week-view.styles.js","sources":["../../../src/schedule/schedule-week-view/schedule-week-view.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { HEADER_HEIGHT, TIME_INDICATOR_WIDTH } from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px repeat(7, 1fr);\n    max-height: ${HEADER_HEIGHT}px;\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    position: sticky;\n    z-index: 2;\n`;\n\nexport const ServiceContainer = styled.div`\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    grid-column-start: 2;\n    grid-column-end: 9;\n`;\n\nexport const ServiceHeader = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-end;\n    padding: ${V3_Spacing[\"spacing-24\"]};\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px repeat(7, 1fr);\n    overflow-x: hidden;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n`;\nexport const SlotGrid = styled.div`\n    grid-column-start: 2;\n    grid-column-end: 9;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    min-width: max-content;\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: -6px;\n        top: -6px;\n        width: ${V3_Spacing[\"spacing-12\"]};\n        height: ${V3_Spacing[\"spacing-12\"]};\n        border-radius: ${V3_Radius[\"full\"]};\n        background: ${V3_Colour[\"icon-primary\"]};\n        z-index: 1;\n    }\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n"],"names":["LoadingContainer","styled","div","V3_Border","solid","V3_Colour","V3_Radius","HeaderContainer","TIME_INDICATOR_WIDTH","HEADER_HEIGHT","BlankCell","ServiceContainer","ServiceHeader","V3_Spacing","Description","Typography","BodyMD","V3_Font","Spec","BodyContainer","SlotGrid","Timeline","props","$top","SlotColumn"],"mappings":"6QAsBO,MAAMA,EAAmBC,EAAOC,GAAG;;;;;;cAM5BC,EAAU,gBAAgBA,EAAUC,SAASC,EAAkB;qBACxDC,EAAc;kBACjBD,EAAc;EAGnBE,EAAkBN,EAAOC,GAAG;;6BAEZM;kBACXC;EAGLC,EAAYT,EAAOC,GAAG;iBAClBM;;;EAKJG,EAAmBV,EAAOC,GAAG;;;;;EAO7BU,EAAgBX,EAAOC,GAAG;;;;;eAKxBW,EAAW;aACbR,EAAU;EAGVS,EAAcb,EAAOc,EAAWC,OAAO;mBACjCC,EAAQC,KAAK;EAGnBC,EAAgBlB,EAAOC,GAAG;;6BAEVM;;;;;cAKfL,EAAU,gBAAgBA,EAAUC,SAASC,EAAkB;EAEhEe,EAAWnB,EAAOC,GAAG;;;;;;EAQrBmB,EAAWpB,EAAOC,GAAuB;;;;kBAIpCG,EAAU;WAChBiB,GAAUA,EAAMC;;;;;;;;iBAQXV,EAAW;kBACVA,EAAW;yBACJP,EAAgB;sBACnBD,EAAU;;;EAKnBmB,EAAavB,EAAOC,GAAG;;;;oBAIhBC,EAAU,gBAAgBA,EAAUC;UAC9CC,EAAkB;;;;"}
+{"version":3,"file":"schedule-week-view.styles.js","sources":["../../../src/schedule/schedule-week-view/schedule-week-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\nimport { HEADER_HEIGHT, TIME_INDICATOR_WIDTH } from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    timeline: {\n        top: \"--fds-internal-scheduleWeekView-timeline-top\",\n    },\n};\n\nexport const loadingContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const headerContainer = css`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px repeat(7, 1fr);\n    max-height: ${HEADER_HEIGHT}px;\n`;\n\nexport const blankCell = css`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    position: sticky;\n    z-index: 2;\n`;\n\nexport const serviceContainer = css`\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    grid-column-start: 2;\n    grid-column-end: 9;\n`;\n\nexport const serviceHeader = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-end;\n    padding: ${Spacing[\"spacing-24\"]};\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const description = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const bodyContainer = css`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px repeat(7, 1fr);\n    overflow-x: hidden;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n`;\nexport const slotGrid = css`\n    grid-column-start: 2;\n    grid-column-end: 9;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    min-width: max-content;\n`;\n\nexport const timeline = css`\n    ${tokens.timeline.top}: 0px;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${Colour[\"icon-primary\"]};\n    top: var(${tokens.timeline.top});\n    z-index: 2;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: -6px;\n        top: -6px;\n        width: ${Spacing[\"spacing-12\"]};\n        height: ${Spacing[\"spacing-12\"]};\n        border-radius: ${Radius[\"full\"]};\n        background: ${Colour[\"icon-primary\"]};\n        z-index: 1;\n    }\n`;\n\nexport const slotColumn = css`\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n"],"names":["tokens","timeline","top","loadingContainer","headerContainer","blankCell","serviceContainer","serviceHeader","description","bodyContainer","slotGrid","slotColumn"],"mappings":"0FAQO,MAAMA,EAAS,CAClBC,SAAU,CACNC,IAAK,iDAIAC,EAAgB,UAWhBC,EAAe,WAMfC,EAAS,WAMTC,EAAgB,UAOhBC,EAAa,WASbC,EAAW,UAIXC,EAAa,WASbC,EAAQ,WAQRT,EAAQ,UAsBRU,EAAU"}

package/schedule/schedule-week-view/schedule-week-view.styles_x7x50m.css

@@ -0,0 +1,10 @@
+.lmprb8g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:25rem;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
+.h1595692{display:-ms-grid;display:grid;-ms-grid-columns:42px repeat(7, 1fr);grid-template-columns:42px repeat(7, 1fr);max-height:130px;}
+.b155xk04{min-width:42px;position:-webkit-sticky;position:sticky;z-index:2;}
+.snwncax{display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:7;grid-column-end:9;}
+.s1u9fy4o{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;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:var(--fds-spacing-24);color:var(--fds-colour-text-primary);}
+.dmchg65{font-weight:var(--fds-font-weight-semibold);}
+.b16u8uwa{display:-ms-grid;display:grid;-ms-grid-columns:42px repeat(7, 1fr);grid-template-columns:42px repeat(7, 1fr);overflow-x:hidden;overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.s1w10b64{-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:7;grid-column-end:9;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;}
+.tbbbluc{--fds-internal-scheduleWeekView-timeline-top:0px;position:absolute;width:100%;height:2px;background:var(--fds-colour-icon-primary);top:var(--fds-internal-scheduleWeekView-timeline-top);z-index:2;}.tbbbluc::before{content:"";position:absolute;left:-6px;top:-6px;width:var(--fds-spacing-12);height:var(--fds-spacing-12);border-radius:var(--fds-radius-full);background:var(--fds-colour-icon-primary);z-index:1;}
+.sej7vmd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.sej7vmd:last-child{border-right:none;}

package/schedule/schedule-week-view/time-cell.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{TimeHelper as i}from"../../util/time-helper.js";import"react";import{minutesToTime as n,calculateSlotOffset as r}from"../shared/utils.js";import{WithOptionalPopover as o}from"../shared/with-optional-popover.js";import{SlotContent as s}from"./slot-content.js";import{SlotCell as l,SlotColumnOverlay as d,HiddenColumns as a}from"./time-cell.styles.js";import{getSlotsStartingInTimeCell as c,getSlotsInTimeCell as m,getMinimumWidthForCell as h,calculateCellServiceLayout as u}from"./week-view-utils.js";const v=({dayDate:v,time:p,serviceData:f,slotLayoutMap:g,containerRef:S,blockedMessage:T,onClickHiddenSlots:$})=>{const M=i.timeToMinutes(p),b=n(M+30),j=c(f,v,p,b),P=m(f,v,p,b),y=h(P,g),k=P.filter((e=>{const t=e.id,i=g[t];return(null==i?void 0:i.visible)||!1})),w=P.filter((e=>{const t=e.id,i=g[t];return!(null==i?void 0:i.visible)})),N=(()=>{const e=i.timeToMinutes(p),t={start:n(e),end:n(e+15)},r={start:n(e+15),end:n(e+30)},o=w.filter((t=>{const n=i.timeToMinutes(t.startTime),r=i.timeToMinutes(t.endTime);return n<e+15&&r>e})),s=w.filter((t=>{const n=i.timeToMinutes(t.startTime),r=i.timeToMinutes(t.endTime);return n<e+30&&r>e+15})),l=Array.from(new Set(o.map((e=>e.serviceName)))),d=Array.from(new Set(s.map((e=>e.serviceName))));return!(l.length!==d.length||!l.every((e=>d.includes(e))))&&l.length>0?[{interval:{start:t.start,end:r.end},hiddenSlots:w,hiddenServices:l}]:[{interval:t,hiddenSlots:o,hiddenServices:l},{interval:r,hiddenSlots:s,hiddenServices:d}].filter((e=>e.hiddenServices.length>0))})(),W=u(k,w),x=y;return e(l,{$dashed:p.endsWith(":00"),children:[W.visibleServices.map(((e,i)=>{const n=j.filter((t=>{const i=t.id,n=g[i];return t.serviceName===e&&(null==n?void 0:n.visible)}));return t(d,{$actualWidthPercentage:x,$leftPosition:i*x,children:n.map(((e,n)=>((e,i,n)=>{const l={slot:e,column:n,offsetTop:r(e.startTime,p)};return t(o,{containerRef:S,customPopover:e.customPopover,children:t(s,{positionedSlot:l,blockedMessage:T})},`${e.id||i}-${i}`)})(e,n,i)))},e)})),N.length>0&&(0===N.length?null:t(d,{$actualWidthPercentage:x,$leftPosition:3*x,children:N.map((t=>e(a,{$heightPercentage:100/N.length,onClick:()=>{null==$||$(t.hiddenServices)},children:["+",t.hiddenServices.length]},`hidden-btn-${t.interval.start}-${t.interval.end}`)))},"hidden-slots-column"))]},p)};export{v as TimeCell};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"clsx";import{useRef as n}from"react";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 r}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{TimeHelper as o}from"../../util/time-helper.js";import{minutesToTime as s,calculateSlotOffset as l}from"../shared/utils.js";import{ScheduleSlotContent as c}from"../schedule-slot-content/schedule-slot-content.js";import{WithOptionalPopover as a}from"../shared/with-optional-popover.js";import{slotCell as d,slotCellDashed as m,tokens as h,slotColumnOverlay as u,slotContentContainerAvailable as p,slotContentContainerBlocked as v,slotContentContainer as f,slotServiceName as g,slotAvailability as k,hiddenColumns as j}from"./time-cell.styles.js";import{getSlotsStartingInTimeCell as b,getSlotsInTimeCell as y,getMinimumWidthForCell as P,calculateCellServiceLayout as S}from"./week-view-utils.js";const C=({actualWidthPercentage:e,leftPosition:i,children:o})=>{const s=n(null);return r(s,{[h.slotColumnOverlay.leftPosition]:`${i}`,[h.slotColumnOverlay.actualWidthPercentage]:`${e}`}),t("div",{className:u,ref:s,children:o})},T=({heightPercentage:e,onClick:i,children:o})=>{const s=n(null);return r(s,{[h.hiddenColumns.minHeight]:`${e}%`,[h.hiddenColumns.height]:`${e}%`}),t("button",{className:j,ref:s,onClick:i,type:"button",children:o})},$=({dayDate:n,time:r,serviceData:u,slotLayoutMap:j,containerRef:$,blockedMessage:N,onClickHiddenSlots:M})=>{const x=o.timeToMinutes(r),W=s(x+30),w=b(u,n,r,W),D=y(u,n,r,W),q=P(D,j),H=D.filter((e=>{const t=e.id,i=j[t];return(null==i?void 0:i.visible)||!1})),O=D.filter((e=>{const t=e.id,i=j[t];return!(null==i?void 0:i.visible)})),R=(e,t)=>O.filter((i=>{const n=o.timeToMinutes(i.startTime),r=o.timeToMinutes(i.endTime);return n<t&&r>e})),A=e=>Array.from(new Set(e.map((e=>e.serviceName)))),L=(()=>{const e=o.timeToMinutes(r),t={start:s(e),end:s(e+15)},i={start:s(e+15),end:s(e+30)},n=R(e,e+15),l=R(e+15,e+30),c=A(n),a=A(l);return!(c.length!==a.length||!c.every((e=>a.includes(e))))&&c.length>0?[{interval:{start:t.start,end:i.end},hiddenSlots:O,hiddenServices:c}]:[{interval:t,hiddenSlots:n,hiddenServices:c},{interval:i,hiddenSlots:l,hiddenServices:a}].filter((e=>e.hiddenServices.length>0))})(),z=S(H,O),B=q;return e("div",{className:i(d,r.endsWith(":00")&&m),children:[z.visibleServices.map(((i,n)=>{const s=w.filter((e=>{const t=e.id,n=j[t];return e.serviceName===i&&(null==n?void 0:n.visible)}));return t(C,{actualWidthPercentage:B,leftPosition:n*B,children:s.map(((i,n)=>((i,n)=>{const s=l(i.startTime,r),d=o.calculateDuration(i.startTime,i.endTime);return t(a,{containerRef:$,customPopover:i.customPopover,children:e(c,{slot:i,offsetTop:s,tokens:h.slotContentContainer,classNames:{container:f,blocked:v,available:p},clickable:!!i.onClick,children:[t("span",{className:g,children:i.serviceName}),d>=30&&t("span",{className:k,children:"blocked"===i.status?N:`${i.booked} / ${i.capacity}`})]})},`${i.id||n}-${n}`)})(i,n)))},i)})),L.length>0&&(0===L.length?null:t(C,{actualWidthPercentage:B,leftPosition:3*B,children:L.map((t=>e(T,{heightPercentage:100/L.length,onClick:()=>{null==M||M(t.hiddenServices)},children:["+",t.hiddenServices.length]},`hidden-btn-${t.interval.start}-${t.interval.end}`)))},"hidden-slots-column"))]},r)};export{$ as TimeCell};
 //# sourceMappingURL=time-cell.js.map

package/schedule/schedule-week-view/time-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-cell.js","sources":["../../../src/schedule/schedule-week-view/time-cell.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport type React from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { calculateSlotOffset, minutesToTime } from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport type { ScheduleEntityProps } from \"../types\";\nimport { SlotContent } from \"./slot-content\";\nimport { HiddenColumns, SlotCell, SlotColumnOverlay } from \"./time-cell.styles\";\nimport type { SlotLayoutMap, SlotWithService } from \"./types\";\nimport {\n    calculateCellServiceLayout,\n    getMinimumWidthForCell,\n    getSlotsInTimeCell,\n    getSlotsStartingInTimeCell,\n} from \"./week-view-utils\";\n\ninterface TimeCellProps {\n    dayDate: string;\n    time: string;\n    serviceData: ScheduleEntityProps[];\n    slotLayoutMap: SlotLayoutMap;\n    containerRef: RefObject<HTMLDivElement>;\n    blockedMessage?: string;\n    onClickHiddenSlots?: (hiddenServices: string[]) => void;\n}\n\nexport const TimeCell: React.FC<TimeCellProps> = ({\n    dayDate,\n    time,\n    serviceData,\n    slotLayoutMap,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}) => {\n    // =============================================================================\n    // COMPUTED VALUES\n    // =============================================================================\n    const timeMinutes = TimeHelper.timeToMinutes(time);\n    const nextTime = minutesToTime(timeMinutes + 30);\n\n    const slotsStartingInCell = getSlotsStartingInTimeCell(\n        serviceData,\n        dayDate,\n        time,\n        nextTime\n    );\n\n    const slotsInCell = getSlotsInTimeCell(\n        serviceData,\n        dayDate,\n        time,\n        nextTime\n    );\n\n    const minimumWidthForCell = getMinimumWidthForCell(\n        slotsInCell,\n        slotLayoutMap\n    );\n\n    // =============================================================================\n    // SLOT FILTERING\n    // =============================================================================\n    // Filter slots based on visibility from slotLayoutMap\n    const visibleOverlappingSlots = slotsInCell.filter((slot) => {\n        const slotKey = slot.id;\n        const slotLayout = slotLayoutMap[slotKey];\n        return slotLayout?.visible || false;\n    });\n\n    const hiddenOverlappingSlots = slotsInCell.filter((slot) => {\n        const slotKey = slot.id;\n        const slotLayout = slotLayoutMap[slotKey];\n        return !slotLayout?.visible;\n    });\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Calculate 15-minute intervals within this 30-minute cell\n    const calculateHiddenSlotsFor15MinIntervals = () => {\n        const timeMinutes = TimeHelper.timeToMinutes(time);\n        const firstInterval = {\n            start: minutesToTime(timeMinutes),\n            end: minutesToTime(timeMinutes + 15),\n        };\n        const secondInterval = {\n            start: minutesToTime(timeMinutes + 15),\n            end: minutesToTime(timeMinutes + 30),\n        };\n\n        // Get hidden slots for first 15-minute interval\n        const hiddenSlotsFirstInterval = hiddenOverlappingSlots.filter(\n            (slot) => {\n                const slotStartMinutes = TimeHelper.timeToMinutes(\n                    slot.startTime\n                );\n                const slotEndMinutes = TimeHelper.timeToMinutes(slot.endTime);\n                // Slot overlaps with first 15-minute interval\n                return (\n                    slotStartMinutes < timeMinutes + 15 &&\n                    slotEndMinutes > timeMinutes\n                );\n            }\n        );\n\n        // Get hidden slots for second 15-minute interval\n        const hiddenSlotsSecondInterval = hiddenOverlappingSlots.filter(\n            (slot) => {\n                const slotStartMinutes = TimeHelper.timeToMinutes(\n                    slot.startTime\n                );\n                const slotEndMinutes = TimeHelper.timeToMinutes(slot.endTime);\n                // Slot overlaps with second 15-minute interval\n                return (\n                    slotStartMinutes < timeMinutes + 30 &&\n                    slotEndMinutes > timeMinutes + 15\n                );\n            }\n        );\n\n        const firstIntervalServices = Array.from(\n            new Set(hiddenSlotsFirstInterval.map((slot) => slot.serviceName))\n        );\n        const secondIntervalServices = Array.from(\n            new Set(hiddenSlotsSecondInterval.map((slot) => slot.serviceName))\n        );\n\n        // Check if the services are different between intervals\n        const servicesAreDifferent =\n            firstIntervalServices.length !== secondIntervalServices.length ||\n            !firstIntervalServices.every((service) =>\n                secondIntervalServices.includes(service)\n            );\n\n        // If services are the same for both intervals, show only one button for the whole cell\n        if (!servicesAreDifferent && firstIntervalServices.length > 0) {\n            return [\n                {\n                    interval: {\n                        start: firstInterval.start,\n                        end: secondInterval.end,\n                    },\n                    hiddenSlots: hiddenOverlappingSlots,\n                    hiddenServices: firstIntervalServices,\n                },\n            ];\n        }\n\n        // Otherwise, show separate buttons for each interval that has hidden services\n        return [\n            {\n                interval: firstInterval,\n                hiddenSlots: hiddenSlotsFirstInterval,\n                hiddenServices: firstIntervalServices,\n            },\n            {\n                interval: secondInterval,\n                hiddenSlots: hiddenSlotsSecondInterval,\n                hiddenServices: secondIntervalServices,\n            },\n        ].filter((intervalData) => intervalData.hiddenServices.length > 0);\n    };\n\n    const hiddenIntervals = calculateHiddenSlotsFor15MinIntervals();\n\n    const cellServiceLayout = calculateCellServiceLayout(\n        visibleOverlappingSlots,\n        hiddenOverlappingSlots\n    );\n\n    const actualWidthPercentage = minimumWidthForCell;\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlotWithPopover = (\n        slot: SlotWithService,\n        slotIndex: number,\n        serviceIndex: number\n    ) => {\n        const offsetTop = calculateSlotOffset(slot.startTime, time);\n        const positionedSlot = {\n            slot,\n            column: serviceIndex,\n            offsetTop,\n        };\n\n        return (\n            <WithOptionalPopover\n                key={`${slot.id || slotIndex}-${slotIndex}`}\n                containerRef={containerRef}\n                customPopover={slot.customPopover}\n            >\n                <SlotContent\n                    positionedSlot={positionedSlot}\n                    blockedMessage={blockedMessage}\n                />\n            </WithOptionalPopover>\n        );\n    };\n\n    const renderHiddenSlots = () => {\n        if (hiddenIntervals.length === 0) return null;\n\n        return (\n            <SlotColumnOverlay\n                key=\"hidden-slots-column\"\n                $actualWidthPercentage={actualWidthPercentage}\n                $leftPosition={3 * actualWidthPercentage}\n            >\n                {hiddenIntervals.map((intervalData) => (\n                    <HiddenColumns\n                        key={`hidden-btn-${intervalData.interval.start}-${intervalData.interval.end}`}\n                        $heightPercentage={100 / hiddenIntervals.length}\n                        onClick={() => {\n                            onClickHiddenSlots?.(intervalData.hiddenServices);\n                        }}\n                    >\n                        +{intervalData.hiddenServices.length}\n                    </HiddenColumns>\n                ))}\n            </SlotColumnOverlay>\n        );\n    };\n\n    return (\n        <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n            {cellServiceLayout.visibleServices.map(\n                (serviceName, serviceIndex) => {\n                    const serviceSlots = slotsStartingInCell.filter((slot) => {\n                        const slotKey = slot.id;\n                        const slotLayout = slotLayoutMap[slotKey];\n                        return (\n                            slot.serviceName === serviceName &&\n                            slotLayout?.visible\n                        );\n                    });\n\n                    const leftPosition = serviceIndex * actualWidthPercentage;\n\n                    return (\n                        <SlotColumnOverlay\n                            key={serviceName}\n                            $actualWidthPercentage={actualWidthPercentage}\n                            $leftPosition={leftPosition}\n                        >\n                            {serviceSlots.map((slot, slotIndex) =>\n                                renderSlotWithPopover(\n                                    slot,\n                                    slotIndex,\n                                    serviceIndex\n                                )\n                            )}\n                        </SlotColumnOverlay>\n                    );\n                }\n            )}\n            {hiddenIntervals.length > 0 && renderHiddenSlots()}\n        </SlotCell>\n    );\n};\n"],"names":["TimeCell","dayDate","time","serviceData","slotLayoutMap","containerRef","blockedMessage","onClickHiddenSlots","timeMinutes","TimeHelper","timeToMinutes","nextTime","minutesToTime","slotsStartingInCell","getSlotsStartingInTimeCell","slotsInCell","getSlotsInTimeCell","minimumWidthForCell","getMinimumWidthForCell","visibleOverlappingSlots","filter","slot","slotKey","id","slotLayout","visible","hiddenOverlappingSlots","hiddenIntervals","firstInterval","start","end","secondInterval","hiddenSlotsFirstInterval","slotStartMinutes","startTime","slotEndMinutes","endTime","hiddenSlotsSecondInterval","firstIntervalServices","Array","from","Set","map","serviceName","secondIntervalServices","length","every","service","includes","interval","hiddenSlots","hiddenServices","intervalData","calculateHiddenSlotsFor15MinIntervals","cellServiceLayout","calculateCellServiceLayout","actualWidthPercentage","_jsxs","SlotCell","$dashed","endsWith","children","visibleServices","serviceIndex","serviceSlots","_jsx","SlotColumnOverlay","$actualWidthPercentage","$leftPosition","slotIndex","positionedSlot","column","offsetTop","calculateSlotOffset","WithOptionalPopover","customPopover","SlotContent","renderSlotWithPopover","HiddenColumns","onClick"],"mappings":"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"}
+{"version":3,"file":"time-cell.js","sources":["../../../src/schedule/schedule-week-view/time-cell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { RefObject } from \"react\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { calculateSlotOffset, minutesToTime } from \"../schedule-slot-content\";\nimport { ScheduleSlotContent } from \"../schedule-slot-content/schedule-slot-content\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport type { ScheduleEntityProps } from \"../types\";\nimport * as styles from \"./time-cell.styles\";\nimport type { SlotLayoutMap, SlotWithService } from \"./types\";\nimport {\n    calculateCellServiceLayout,\n    getMinimumWidthForCell,\n    getSlotsInTimeCell,\n    getSlotsStartingInTimeCell,\n} from \"./week-view-utils\";\n\ninterface TimeCellProps {\n    dayDate: string;\n    time: string;\n    serviceData: ScheduleEntityProps[];\n    slotLayoutMap: SlotLayoutMap;\n    containerRef: RefObject<HTMLDivElement>;\n    blockedMessage?: string;\n    onClickHiddenSlots?: (hiddenServices: string[]) => void;\n}\n\ninterface SlotOverlayProps {\n    actualWidthPercentage: number;\n    leftPosition: number;\n    children: React.ReactNode;\n}\n\nconst SlotOverlay = ({\n    actualWidthPercentage,\n    leftPosition,\n    children,\n}: SlotOverlayProps) => {\n    const overlayRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.slotColumnOverlay.leftPosition]: `${leftPosition}`,\n        [styles.tokens.slotColumnOverlay\n            .actualWidthPercentage]: `${actualWidthPercentage}`,\n    });\n\n    return (\n        <div className={styles.slotColumnOverlay} ref={overlayRef}>\n            {children}\n        </div>\n    );\n};\n\ninterface HiddenColumnsButtonProps {\n    heightPercentage: number;\n    onClick: () => void;\n    children: React.ReactNode;\n}\n\nconst HiddenColumnsButton = ({\n    heightPercentage,\n    onClick,\n    children,\n}: HiddenColumnsButtonProps) => {\n    const hiddenColumnsRef = useRef<HTMLButtonElement>(null);\n\n    useApplyStyle(hiddenColumnsRef, {\n        [styles.tokens.hiddenColumns.minHeight]: `${heightPercentage}%`,\n        [styles.tokens.hiddenColumns.height]: `${heightPercentage}%`,\n    });\n\n    return (\n        <button\n            className={styles.hiddenColumns}\n            ref={hiddenColumnsRef}\n            onClick={onClick}\n            type=\"button\"\n        >\n            {children}\n        </button>\n    );\n};\n\nexport const TimeCell: React.FC<TimeCellProps> = ({\n    dayDate,\n    time,\n    serviceData,\n    slotLayoutMap,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}) => {\n    // =============================================================================\n    // COMPUTED VALUES\n    // =============================================================================\n    const timeMinutes = TimeHelper.timeToMinutes(time);\n    const nextTime = minutesToTime(timeMinutes + 30);\n\n    const slotsStartingInCell = getSlotsStartingInTimeCell(\n        serviceData,\n        dayDate,\n        time,\n        nextTime\n    );\n\n    const slotsInCell = getSlotsInTimeCell(\n        serviceData,\n        dayDate,\n        time,\n        nextTime\n    );\n\n    const minimumWidthForCell = getMinimumWidthForCell(\n        slotsInCell,\n        slotLayoutMap\n    );\n\n    // =============================================================================\n    // SLOT FILTERING\n    // =============================================================================\n    // Filter slots based on visibility from slotLayoutMap\n    const visibleOverlappingSlots = slotsInCell.filter((slot) => {\n        const slotKey = slot.id;\n        const slotLayout = slotLayoutMap[slotKey];\n        return slotLayout?.visible || false;\n    });\n\n    const hiddenOverlappingSlots = slotsInCell.filter((slot) => {\n        const slotKey = slot.id;\n        const slotLayout = slotLayoutMap[slotKey];\n        return !slotLayout?.visible;\n    });\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getHiddenSlotsInRange = (rangeStart: number, rangeEnd: number) => {\n        return hiddenOverlappingSlots.filter((slot) => {\n            const slotStartMinutes = TimeHelper.timeToMinutes(slot.startTime);\n            const slotEndMinutes = TimeHelper.timeToMinutes(slot.endTime);\n\n            return slotStartMinutes < rangeEnd && slotEndMinutes > rangeStart;\n        });\n    };\n\n    const getHiddenServices = (slots: SlotWithService[]) => {\n        return Array.from(new Set(slots.map((slot) => slot.serviceName)));\n    };\n\n    // Calculate 15-minute intervals within this 30-minute cell\n    const calculateHiddenSlotsFor15MinIntervals = () => {\n        const timeMinutes = TimeHelper.timeToMinutes(time);\n        const firstInterval = {\n            start: minutesToTime(timeMinutes),\n            end: minutesToTime(timeMinutes + 15),\n        };\n        const secondInterval = {\n            start: minutesToTime(timeMinutes + 15),\n            end: minutesToTime(timeMinutes + 30),\n        };\n\n        // Get hidden slots for first 15-minute interval\n        const hiddenSlotsFirstInterval = getHiddenSlotsInRange(\n            // Slot overlaps with first 15-minute interval\n            timeMinutes,\n            timeMinutes + 15\n        );\n        // Get hidden slots for second 15-minute interval\n        const hiddenSlotsSecondInterval = getHiddenSlotsInRange(\n            // Slot overlaps with second 15-minute interval\n            timeMinutes + 15,\n            timeMinutes + 30\n        );\n\n        const firstIntervalServices = getHiddenServices(\n            hiddenSlotsFirstInterval\n        );\n        const secondIntervalServices = getHiddenServices(\n            hiddenSlotsSecondInterval\n        );\n\n        // Check if the services are different between intervals\n        const servicesAreDifferent =\n            firstIntervalServices.length !== secondIntervalServices.length ||\n            !firstIntervalServices.every((service) =>\n                secondIntervalServices.includes(service)\n            );\n\n        // If services are the same for both intervals, show only one button for the whole cell\n        if (!servicesAreDifferent && firstIntervalServices.length > 0) {\n            return [\n                {\n                    interval: {\n                        start: firstInterval.start,\n                        end: secondInterval.end,\n                    },\n                    hiddenSlots: hiddenOverlappingSlots,\n                    hiddenServices: firstIntervalServices,\n                },\n            ];\n        }\n\n        // Otherwise, show separate buttons for each interval that has hidden services\n        return [\n            {\n                interval: firstInterval,\n                hiddenSlots: hiddenSlotsFirstInterval,\n                hiddenServices: firstIntervalServices,\n            },\n            {\n                interval: secondInterval,\n                hiddenSlots: hiddenSlotsSecondInterval,\n                hiddenServices: secondIntervalServices,\n            },\n        ].filter((intervalData) => intervalData.hiddenServices.length > 0);\n    };\n\n    const hiddenIntervals = calculateHiddenSlotsFor15MinIntervals();\n\n    const cellServiceLayout = calculateCellServiceLayout(\n        visibleOverlappingSlots,\n        hiddenOverlappingSlots\n    );\n\n    const actualWidthPercentage = minimumWidthForCell;\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlotWithPopover = (\n        slot: SlotWithService,\n        slotIndex: number\n    ) => {\n        const offsetTop = calculateSlotOffset(slot.startTime, time);\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n\n        return (\n            <WithOptionalPopover\n                key={`${slot.id || slotIndex}-${slotIndex}`}\n                containerRef={containerRef}\n                customPopover={slot.customPopover}\n            >\n                <ScheduleSlotContent\n                    slot={slot}\n                    offsetTop={offsetTop}\n                    tokens={styles.tokens.slotContentContainer}\n                    classNames={{\n                        container: styles.slotContentContainer,\n                        blocked: styles.slotContentContainerBlocked,\n                        available: styles.slotContentContainerAvailable,\n                    }}\n                    clickable={!!slot.onClick}\n                >\n                    <span className={styles.slotServiceName}>\n                        {slot.serviceName}\n                    </span>\n                    {duration >= 30 && (\n                        <span className={styles.slotAvailability}>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </span>\n                    )}\n                </ScheduleSlotContent>\n            </WithOptionalPopover>\n        );\n    };\n\n    const renderHiddenSlots = () => {\n        if (hiddenIntervals.length === 0) return null;\n\n        return (\n            <SlotOverlay\n                key=\"hidden-slots-column\"\n                actualWidthPercentage={actualWidthPercentage}\n                leftPosition={3 * actualWidthPercentage}\n            >\n                {hiddenIntervals.map((intervalData) => (\n                    <HiddenColumnsButton\n                        key={`hidden-btn-${intervalData.interval.start}-${intervalData.interval.end}`}\n                        heightPercentage={100 / hiddenIntervals.length}\n                        onClick={() => {\n                            onClickHiddenSlots?.(intervalData.hiddenServices);\n                        }}\n                    >\n                        +{intervalData.hiddenServices.length}\n                    </HiddenColumnsButton>\n                ))}\n            </SlotOverlay>\n        );\n    };\n\n    return (\n        <div\n            key={time}\n            className={clsx(\n                styles.slotCell,\n                time.endsWith(\":00\") && styles.slotCellDashed\n            )}\n        >\n            {cellServiceLayout.visibleServices.map(\n                (serviceName, serviceIndex) => {\n                    const serviceSlots = slotsStartingInCell.filter((slot) => {\n                        const slotKey = slot.id;\n                        const slotLayout = slotLayoutMap[slotKey];\n                        return (\n                            slot.serviceName === serviceName &&\n                            slotLayout?.visible\n                        );\n                    });\n\n                    const leftPosition = serviceIndex * actualWidthPercentage;\n\n                    return (\n                        <SlotOverlay\n                            key={serviceName}\n                            actualWidthPercentage={actualWidthPercentage}\n                            leftPosition={leftPosition}\n                        >\n                            {serviceSlots.map((slot, slotIndex) =>\n                                renderSlotWithPopover(slot, slotIndex)\n                            )}\n                        </SlotOverlay>\n                    );\n                }\n            )}\n            {hiddenIntervals.length > 0 && renderHiddenSlots()}\n        </div>\n    );\n};\n"],"names":["SlotOverlay","actualWidthPercentage","leftPosition","children","overlayRef","useRef","useApplyStyle","styles.tokens","slotColumnOverlay","_jsx","className","styles.slotColumnOverlay","ref","HiddenColumnsButton","heightPercentage","onClick","hiddenColumnsRef","hiddenColumns","minHeight","height","styles.hiddenColumns","type","TimeCell","dayDate","time","serviceData","slotLayoutMap","containerRef","blockedMessage","onClickHiddenSlots","timeMinutes","TimeHelper","timeToMinutes","nextTime","minutesToTime","slotsStartingInCell","getSlotsStartingInTimeCell","slotsInCell","getSlotsInTimeCell","minimumWidthForCell","getMinimumWidthForCell","visibleOverlappingSlots","filter","slot","slotKey","id","slotLayout","visible","hiddenOverlappingSlots","getHiddenSlotsInRange","rangeStart","rangeEnd","slotStartMinutes","startTime","slotEndMinutes","endTime","getHiddenServices","slots","Array","from","Set","map","serviceName","hiddenIntervals","firstInterval","start","end","secondInterval","hiddenSlotsFirstInterval","hiddenSlotsSecondInterval","firstIntervalServices","secondIntervalServices","length","every","service","includes","interval","hiddenSlots","hiddenServices","intervalData","calculateHiddenSlotsFor15MinIntervals","cellServiceLayout","calculateCellServiceLayout","_jsxs","clsx","styles.slotCell","endsWith","styles.slotCellDashed","visibleServices","serviceIndex","serviceSlots","slotIndex","offsetTop","calculateSlotOffset","duration","calculateDuration","WithOptionalPopover","customPopover","ScheduleSlotContent","tokens","slotContentContainer","classNames","container","styles.slotContentContainer","blocked","styles.slotContentContainerBlocked","available","styles.slotContentContainerAvailable","clickable","styles.slotServiceName","styles.slotAvailability","status","booked","capacity","renderSlotWithPopover"],"mappings":"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"}

package/schedule/schedule-week-view/time-cell.styles.d.ts

@@ -1,14 +1,23 @@
-interface SlotCellStyleProps {
-    $dashed?: boolean;
-}
-interface SlotColumnOverlayStyleProps {
-    $actualWidthPercentage?: number;
-    $leftPosition?: number;
-}
-interface HiddenColumnsStyleProps {
-    $heightPercentage?: number;
-}
-export declare const SlotCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$dashed"> & SlotCellStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$dashed"> & SlotCellStyleProps, never>>> & string;
-export declare const SlotColumnOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof SlotColumnOverlayStyleProps> & SlotColumnOverlayStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof SlotColumnOverlayStyleProps> & SlotColumnOverlayStyleProps, never>>> & string;
-export declare const HiddenColumns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$heightPercentage"> & HiddenColumnsStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$heightPercentage"> & HiddenColumnsStyleProps, never>>> & string;
-export {};
+export declare const tokens: {
+    slotContentContainer: {
+        height: string;
+        offsetTop: string;
+    };
+    slotColumnOverlay: {
+        leftPosition: string;
+        actualWidthPercentage: string;
+    };
+    hiddenColumns: {
+        minHeight: string;
+        height: string;
+    };
+};
+export declare const slotContentContainer: import("@linaria/core").LinariaClassName;
+export declare const slotContentContainerAvailable: import("@linaria/core").LinariaClassName;
+export declare const slotContentContainerBlocked: import("@linaria/core").LinariaClassName;
+export declare const slotServiceName: import("@linaria/core").LinariaClassName;
+export declare const slotAvailability: import("@linaria/core").LinariaClassName;
+export declare const slotCell: import("@linaria/core").LinariaClassName;
+export declare const slotCellDashed: import("@linaria/core").LinariaClassName;
+export declare const slotColumnOverlay: import("@linaria/core").LinariaClassName;
+export declare const hiddenColumns: import("@linaria/core").LinariaClassName;