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

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 @@
+@layer fds{.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/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotCellStyleProps>> & string;
-export declare const SlotColumnOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotColumnOverlayStyleProps>> & string;
-export declare const HiddenColumns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, HiddenColumnsStyleProps>> & 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;

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

@@ -1,35 +1,2 @@
-import e,{css as t}from"styled-components";import{V3_Border as o,V3_Colour as i,V3_Font as r,V3_Radius as n,V3_Shadow as s}from"../../v3_theme/index.js";import{CELL_HEIGHT as d}from"../const.js";const h=e.div`
-    min-height: ${d}px;
-    position: relative;
-    border-bottom: ${o["width-010"]} solid ${i.border};
-    ${e=>e.$dashed&&t`
-            border-bottom-style: dashed;
-        `}
-    cursor: pointer;
-`,$=e.div`
-    position: absolute;
-    top: 0;
-    left: ${e=>`calc((100% - 14px) * ${e.$leftPosition} / 100)`};
-    width: ${e=>`calc((100% - 14px) * ${e.$actualWidthPercentage} / 100)`};
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: visible;
-    z-index: 1;
-`,c=e.button`
-    background-color: unset;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: ${i["text-primary"]};
-    ${r["body-xs-semibold"]};
-    min-height: ${e=>e.$heightPercentage?`${e.$heightPercentage}%`:`${d}px`};
-    height: ${e=>e.$heightPercentage?`${e.$heightPercentage}%`:"auto"};
-    &:hover {
-        border-radius: ${n.sm};
-        box-shadow: ${s["sm-subtle"]};
-    }
-`;export{c as HiddenColumns,h as SlotCell,$ as SlotColumnOverlay};
+import"./time-cell.styles_1sorjz8.css";const e={slotContentContainer:{height:"--fds-internal-scheduleWeekView-slotContentContainer-height",offsetTop:"--fds-internal-scheduleWeekView-slotContentContainer-offsetTop"},slotColumnOverlay:{leftPosition:"--fds-internal-scheduleWeekView-slotColumnOverlay-leftPosition",actualWidthPercentage:"--fds-internal-scheduleWeekView-slotColumnOverlay-actualWidthPercentage"},hiddenColumns:{minHeight:"--fds-internal-scheduleWeekView-hiddenColumns-minHeight",height:"--fds-internal-scheduleWeekView-hiddenColumns-height"}},t="s1o4jdyi",n="s15inga4",s="s25hl9",i="s14imce",l="s1ndukd1",o="stpthki",h="s16rvke",d="s1dqpjs9",a="h1h4fvzf";export{a as hiddenColumns,l as slotAvailability,o as slotCell,h as slotCellDashed,d as slotColumnOverlay,t as slotContentContainer,n as slotContentContainerAvailable,s as slotContentContainerBlocked,i as slotServiceName,e as tokens};
 //# sourceMappingURL=time-cell.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-cell.styles.js","sources":["../../../src/schedule/schedule-week-view/time-cell.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Shadow,\n} from \"../../v3_theme\";\nimport { CELL_HEIGHT } from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotColumnOverlayStyleProps {\n    $actualWidthPercentage?: number;\n    $leftPosition?: number;\n}\n\ninterface HiddenColumnsStyleProps {\n    $heightPercentage?: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotColumnOverlay = styled.div<SlotColumnOverlayStyleProps>`\n    position: absolute;\n    top: 0;\n    left: ${(props) => {\n        return `calc((100% - 14px) * ${props.$leftPosition} / 100)`;\n    }};\n    width: ${(props) => {\n        return `calc((100% - 14px) * ${props.$actualWidthPercentage} / 100)`;\n    }};\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow: visible;\n    z-index: 1;\n`;\n\nexport const HiddenColumns = styled.button<HiddenColumnsStyleProps>`\n    background-color: unset;\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: ${V3_Colour[\"text-primary\"]};\n    ${V3_Font[\"body-xs-semibold\"]};\n    min-height: ${(props) =>\n        props.$heightPercentage\n            ? `${props.$heightPercentage}%`\n            : `${CELL_HEIGHT}px`};\n    height: ${(props) =>\n        props.$heightPercentage ? `${props.$heightPercentage}%` : \"auto\"};\n    &:hover {\n        border-radius: ${V3_Radius[\"sm\"]};\n        box-shadow: ${V3_Shadow[\"sm-subtle\"]};\n    }\n`;\n"],"names":["SlotCell","styled","div","CELL_HEIGHT","V3_Border","V3_Colour","props","$dashed","css","SlotColumnOverlay","$leftPosition","$actualWidthPercentage","HiddenColumns","button","V3_Font","$heightPercentage","V3_Radius","V3_Shadow"],"mappings":"mMA8BO,MAAMA,EAAWC,EAAOC,GAAuB;kBACpCC;;qBAEGC,EAAU,sBAAsBC,EAAkB;MAChEC,GACCA,EAAMC,SACNC,CAAG;;;;EAMEC,EAAoBR,EAAOC,GAAgC;;;YAG3DI,GACE,wBAAwBA,EAAMI;aAE/BJ,GACC,wBAAwBA,EAAMK;;;;;;EAShCC,EAAgBX,EAAOY,MAA+B;;;;;;;aAOtDR,EAAU;MACjBS,EAAQ;kBACKR,GACXA,EAAMS,kBACA,GAAGT,EAAMS,qBACT,GAAGZ;cACFG,GACPA,EAAMS,kBAAoB,GAAGT,EAAMS,qBAAuB;;yBAEzCC,EAAc;sBACjBC,EAAU;;"}
+{"version":3,"file":"time-cell.styles.js","sources":["../../../src/schedule/schedule-week-view/time-cell.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Shadow } from \"../../theme\";\nimport { CELL_HEIGHT } from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    slotContentContainer: {\n        height: \"--fds-internal-scheduleWeekView-slotContentContainer-height\",\n        offsetTop:\n            \"--fds-internal-scheduleWeekView-slotContentContainer-offsetTop\",\n    },\n    slotColumnOverlay: {\n        leftPosition:\n            \"--fds-internal-scheduleWeekView-slotColumnOverlay-leftPosition\",\n        actualWidthPercentage:\n            \"--fds-internal-scheduleWeekView-slotColumnOverlay-actualWidthPercentage\",\n    },\n    hiddenColumns: {\n        minHeight: \"--fds-internal-scheduleWeekView-hiddenColumns-minHeight\",\n        height: \"--fds-internal-scheduleWeekView-hiddenColumns-height\",\n    },\n};\n\nexport const slotContentContainer = css`\n    ${tokens.slotContentContainer.height}: ${CELL_HEIGHT - 1}px;\n    ${tokens.slotContentContainer.offsetTop}: 0px;\n\n    overflow: hidden;\n    width: calc(100% - 1px);\n    padding: 4px;\n    top: var(${tokens.slotContentContainer.offsetTop});\n    ${Font[\"body-xs-semibold\"]};\n    z-index: 1;\n    height: var(${tokens.slotContentContainer.height});\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    border-radius: ${Radius[\"sm\"]};\n    color: inherit;\n`;\n\nexport const slotContentContainerAvailable = css`\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"icon-success\"]};\n`;\n\nexport const slotContentContainerBlocked = css`\n    color: ${Colour[\"text-inverse\"]};\n`;\n\nexport const slotServiceName = css`\n    ${Font[\"body-xs-regular\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n`;\n\nexport const slotAvailability = css`\n    ${Font[\"body-xs-semibold\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n`;\n\nexport const slotCell = css`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${Border[\"width-010\"]} solid ${Colour[\"border\"]};\n    cursor: pointer;\n`;\n\nexport const slotCellDashed = css`\n    border-bottom-style: dashed;\n`;\n\nexport const slotColumnOverlay = css`\n    ${tokens.slotColumnOverlay.leftPosition}: 0;\n    ${tokens.slotColumnOverlay.actualWidthPercentage}: 100;\n    position: absolute;\n    top: 0;\n    left: calc(\n        (100% - 14px) * var(${tokens.slotColumnOverlay.leftPosition}) / 100\n    );\n    width: calc(\n        (100% - 14px) * var(${tokens.slotColumnOverlay.actualWidthPercentage}) /\n            100\n    );\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow: visible;\n    z-index: 1;\n`;\n\nexport const hiddenColumns = css`\n    ${tokens.hiddenColumns.minHeight}: ${CELL_HEIGHT}px;\n    ${tokens.hiddenColumns.height}: auto;\n    background-color: unset;\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    ${Font[\"body-xs-semibold\"]};\n    min-height: var(${tokens.hiddenColumns.minHeight});\n    height: var(${tokens.hiddenColumns.height});\n    &:hover {\n        border-radius: ${Radius[\"sm\"]};\n        box-shadow: ${Shadow[\"sm-subtle\"]};\n    }\n`;\n"],"names":["tokens","slotContentContainer","height","offsetTop","slotColumnOverlay","leftPosition","actualWidthPercentage","hiddenColumns","minHeight","slotContentContainerAvailable","slotContentContainerBlocked","slotServiceName","slotAvailability","slotCell","slotCellDashed"],"mappings":"kFAQO,MAAMA,EAAS,CAClBC,qBAAsB,CAClBC,OAAQ,8DACRC,UACI,kEAERC,kBAAmB,CACfC,aACI,iEACJC,sBACI,2EAERC,cAAe,CACXC,UAAW,0DACXN,OAAQ,yDAIHD,EAAoB,WAkBpBQ,EAA6B,WAI7BC,EAA2B,SAI3BC,EAAe,UAQfC,EAAgB,WAQhBC,EAAQ,UAORC,EAAc,UAIdV,EAAiB,WAmBjBG,EAAa"}

package/schedule/schedule-week-view/time-cell.styles_1sorjz8.css

@@ -0,0 +1,14 @@
+@layer fds{.s1o4jdyi{--fds-internal-scheduleWeekView-slotContentContainer-height:47px;--fds-internal-scheduleWeekView-slotContentContainer-offsetTop:0px;overflow:hidden;width:calc(100% - 1px);padding:4px;top:var(--fds-internal-scheduleWeekView-slotContentContainer-offsetTop);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);z-index:1;height:var(--fds-internal-scheduleWeekView-slotContentContainer-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:absolute;border-radius:var(--fds-radius-sm);color:inherit;}
+.s15inga4{border-left:var(--fds-border-width-040) solid var(--fds-colour-icon-success);}
+.s25hl9{color:var(--fds-colour-text-inverse);}
+.s14imce{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
+.s1ndukd1{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
+.stpthki{min-height:48px;position:relative;border-bottom:var(--fds-border-width-010) solid var(--fds-colour-border);cursor:pointer;}
+.s16rvke{border-bottom-style:dashed;}
+.s1dqpjs9{--fds-internal-scheduleWeekView-slotColumnOverlay-leftPosition:0;--fds-internal-scheduleWeekView-slotColumnOverlay-actualWidthPercentage:100;position:absolute;top:0;left:calc(
+        (100% - 14px) * var(--fds-internal-scheduleWeekView-slotColumnOverlay-leftPosition) / 100
+    );width:calc(
+        (100% - 14px) * var(--fds-internal-scheduleWeekView-slotColumnOverlay-actualWidthPercentage) /
+            100
+    );height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:visible;z-index:1;}
+.h1h4fvzf{--fds-internal-scheduleWeekView-hiddenColumns-minHeight:48px;--fds-internal-scheduleWeekView-hiddenColumns-height:auto;background-color:unset;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;cursor:pointer;color:var(--fds-colour-text-primary);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);min-height:var(--fds-internal-scheduleWeekView-hiddenColumns-minHeight);height:var(--fds-internal-scheduleWeekView-hiddenColumns-height);}.h1h4fvzf:hover{border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-sm-subtle);}}

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

@@ -1,15 +1,8 @@
-import type { RefObject } from "react";
+import type { CommonScheduleViewProps } from "../internal-types";
 import type { ScheduleEntityProps, ScheduleSlotProps } from "../types";
-export interface ScheduleWeekViewProps {
-    date: string;
+export interface ScheduleWeekViewProps extends CommonScheduleViewProps {
     serviceData: ScheduleEntityProps[];
-    loading: boolean;
-    minTime: string;
-    maxTime: string;
-    initialScrollTime?: string | undefined;
     onSlotClick?: (data: ScheduleSlotProps, e: React.MouseEvent) => void | undefined;
-    containerRef: RefObject<HTMLDivElement>;
-    blockedMessage?: string | undefined;
     onClickHiddenSlots?: (hiddenServices: string[]) => void | undefined;
 }
 /**
@@ -19,11 +12,6 @@ export interface ScheduleWeekViewProps {
 export interface SlotWithService extends ScheduleSlotProps {
     serviceName: string;
 }
-export interface PositionedSlot {
-    slot: SlotWithService;
-    column: number;
-    offsetTop: number;
-}
 interface SlotLayoutInfo {
     date: string;
     serviceName: string;

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

@@ -1,2 +1,2 @@
-import{TimeHelper as e}from"../../util/time-helper.js";import"react";import{minutesToTime as t,findSlotsInTimeRange as s,findSlotsStartingInTimeRange as r}from"../shared/utils.js";const i=(e,t,s,i)=>{const n=[];return e.forEach((e=>{if(e.slots){r(e.slots,s,i,t).forEach((t=>{n.push(Object.assign(Object.assign({},t),{serviceName:e.name}))}))}})),n},n=(e,t,r,i)=>{const n=[];return e.forEach((e=>{if(e.slots){s(e.slots,r,i,t).forEach((t=>{n.push(Object.assign(Object.assign({},t),{serviceName:e.name}))}))}})),n},a=(s,r,i)=>{const a={};return r.forEach((r=>{const c=r.format("YYYY-MM-DD");i.forEach((r=>{const i=e.timeToMinutes(r),o=t(i+30),m=n(s,c,r,o);m.forEach((e=>{const t=e.id;a[t]||(a[t]={date:c,serviceName:e.serviceName,startTime:e.startTime,endTime:e.endTime,visible:!0,width:100})}));const h=Array.from(new Set(m.map((e=>e.serviceName)))).slice(0,3);m.forEach((e=>{const t=e.id;h.includes(e.serviceName)||(a[t].visible=!1)}));const l=m.filter((e=>{const t=e.id;return a[t].visible})),f=new Set(l.map((e=>e.serviceName))).size,v=m.length>l.length?4:f,d=v>0?100/v:100;m.forEach((e=>{const t=e.id;a[t].width=Math.min(a[t].width,d)}))}))})),a},c=(e,t)=>{let s=Number.MAX_SAFE_INTEGER;return e.forEach((e=>{const r=e.id,i=t[r];s=Math.min(s,i.width)})),s},o=(e,t)=>{const s=Array.from(new Set(e.map((e=>e.serviceName)))),r=Array.from(new Set(t.map((e=>e.serviceName))));return{allServices:[...s,...r],visibleServices:s,hiddenServices:r,totalServices:s.length+r.length,hasOverflow:r.length>0,totalColumns:r.length>0?4:s.length}};export{o as calculateCellServiceLayout,a as calculateSlotWidths,c as getMinimumWidthForCell,n as getSlotsInTimeCell,i as getSlotsStartingInTimeCell};
+import{TimeHelper as e}from"../../util/time-helper.js";import"react";import{minutesToTime as t,findSlotsInTimeRange as r,findSlotsStartingInTimeRange as i}from"../shared/utils.js";import"react/jsx-runtime";import"clsx";import"../../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"../../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 s=(e,t,r,s)=>{const o=[];return e.forEach((e=>{if(e.slots){i(e.slots,r,s,t).forEach((t=>{o.push(Object.assign(Object.assign({},t),{serviceName:e.name}))}))}})),o},o=(e,t,i,s)=>{const o=[];return e.forEach((e=>{if(e.slots){r(e.slots,i,s,t).forEach((t=>{o.push(Object.assign(Object.assign({},t),{serviceName:e.name}))}))}})),o},m=(r,i,s)=>{const m={};return i.forEach((i=>{const n=i.format("YYYY-MM-DD");s.forEach((i=>{const s=e.timeToMinutes(i),a=t(s+30),c=o(r,n,i,a);c.forEach((e=>{const t=e.id;m[t]||(m[t]={date:n,serviceName:e.serviceName,startTime:e.startTime,endTime:e.endTime,visible:!0,width:100})}));const l=Array.from(new Set(c.map((e=>e.serviceName)))).slice(0,3);c.forEach((e=>{const t=e.id;l.includes(e.serviceName)||(m[t].visible=!1)}));const h=c.filter((e=>{const t=e.id;return m[t].visible})),p=new Set(h.map((e=>e.serviceName))).size,d=c.length>h.length?4:p,u=d>0?100/d:100;c.forEach((e=>{const t=e.id;m[t].width=Math.min(m[t].width,u)}))}))})),m},n=(e,t)=>{let r=Number.MAX_SAFE_INTEGER;return e.forEach((e=>{const i=e.id,s=t[i];r=Math.min(r,s.width)})),r},a=(e,t)=>{const r=Array.from(new Set(e.map((e=>e.serviceName)))),i=Array.from(new Set(t.map((e=>e.serviceName))));return{allServices:[...r,...i],visibleServices:r,hiddenServices:i,totalServices:r.length+i.length,hasOverflow:i.length>0,totalColumns:i.length>0?4:r.length}};export{a as calculateCellServiceLayout,m as calculateSlotWidths,n as getMinimumWidthForCell,o as getSlotsInTimeCell,s as getSlotsStartingInTimeCell};
 //# sourceMappingURL=week-view-utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"week-view-utils.js","sources":["../../../src/schedule/schedule-week-view/week-view-utils.ts"],"sourcesContent":["import type dayjs from \"dayjs\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    findSlotsInTimeRange,\n    findSlotsStartingInTimeRange,\n    minutesToTime,\n} from \"../shared\";\nimport type { ScheduleEntityProps } from \"../types\";\nimport type { SlotLayoutMap, SlotWithService } from \"./types\";\n\n/**\n * Get all slots that START in a specific time cell\n */\nexport const getSlotsStartingInTimeCell = (\n    serviceData: ScheduleEntityProps[],\n    targetDate: string,\n    cellStartTime: string,\n    cellEndTime: string\n): SlotWithService[] => {\n    const allSlots: SlotWithService[] = [];\n\n    serviceData.forEach((service) => {\n        if (service.slots) {\n            const slotsInRange = findSlotsStartingInTimeRange(\n                service.slots,\n                cellStartTime,\n                cellEndTime,\n                targetDate\n            );\n\n            slotsInRange.forEach((slot) => {\n                allSlots.push({\n                    ...slot,\n                    serviceName: service.name,\n                });\n            });\n        }\n    });\n\n    return allSlots;\n};\n\n/**\n * Get all slots that OVERLAP with a specific time cell (for layout calculation)\n */\nexport const getSlotsInTimeCell = (\n    serviceData: ScheduleEntityProps[],\n    targetDate: string,\n    cellStartTime: string,\n    cellEndTime: string\n): SlotWithService[] => {\n    const allSlots: SlotWithService[] = [];\n\n    serviceData.forEach((service) => {\n        if (service.slots) {\n            const overlappingSlots = findSlotsInTimeRange(\n                service.slots,\n                cellStartTime,\n                cellEndTime,\n                targetDate\n            );\n\n            overlappingSlots.forEach((slot) => {\n                allSlots.push({\n                    ...slot,\n                    serviceName: service.name,\n                });\n            });\n        }\n    });\n\n    return allSlots;\n};\n\n/**\n * Calculate and update slot widths across all cells\n */\nexport const calculateSlotWidths = (\n    serviceData: ScheduleEntityProps[],\n    weekDays: dayjs.Dayjs[],\n    timeSlots: string[]\n): SlotLayoutMap => {\n    const slotLayoutMap: SlotLayoutMap = {};\n\n    weekDays.forEach((day) => {\n        const dayDate = day.format(\"YYYY-MM-DD\");\n        timeSlots.forEach((time) => {\n            const timeMinutes = TimeHelper.timeToMinutes(time);\n            const nextTime = minutesToTime(timeMinutes + 30);\n            const slotsInCell = getSlotsInTimeCell(\n                serviceData,\n                dayDate,\n                time,\n                nextTime\n            );\n\n            slotsInCell.forEach((slot) => {\n                const slotKey = slot.id;\n                if (!slotLayoutMap[slotKey]) {\n                    slotLayoutMap[slotKey] = {\n                        date: dayDate,\n                        serviceName: slot.serviceName,\n                        startTime: slot.startTime,\n                        endTime: slot.endTime,\n                        visible: true,\n                        width: 100,\n                    };\n                }\n            });\n\n            const uniqueServices = Array.from(\n                new Set(slotsInCell.map((slot) => slot.serviceName))\n            );\n\n            // Display at most 3 services, mark other slots as hidden\n            const firstThreeServices = uniqueServices.slice(0, 3);\n            slotsInCell.forEach((slot) => {\n                const slotKey = slot.id;\n                const isVisible = firstThreeServices.includes(slot.serviceName);\n                if (!isVisible) {\n                    slotLayoutMap[slotKey].visible = false;\n                }\n            });\n\n            // Calculate width based on visible services only\n            const visibleSlots = slotsInCell.filter((slot) => {\n                const slotKey = slot.id;\n                return slotLayoutMap[slotKey].visible;\n            });\n\n            const visibleServices = new Set(\n                visibleSlots.map((slot) => slot.serviceName)\n            );\n            const totalVisibleServices = visibleServices.size;\n            const hasHiddenServices = slotsInCell.length > visibleSlots.length;\n            const totalColumns = hasHiddenServices ? 4 : totalVisibleServices;\n            const widthPercentage = totalColumns > 0 ? 100 / totalColumns : 100;\n\n            // Update width for each slot in this cell (take minimum across all cells)\n            slotsInCell.forEach((slot) => {\n                const slotKey = slot.id;\n                slotLayoutMap[slotKey].width = Math.min(\n                    slotLayoutMap[slotKey].width,\n                    widthPercentage\n                );\n            });\n        });\n    });\n\n    return slotLayoutMap;\n};\n\n/**\n * Get minimum width for all slots overlapping a specific cell\n */\nexport const getMinimumWidthForCell = (\n    slotsInCell: SlotWithService[],\n    slotLayoutMap: SlotLayoutMap\n): number => {\n    let minWidth = Number.MAX_SAFE_INTEGER;\n\n    slotsInCell.forEach((slot) => {\n        const slotKey = slot.id;\n        const slotLayout = slotLayoutMap[slotKey];\n        minWidth = Math.min(minWidth, slotLayout.width);\n    });\n\n    return minWidth;\n};\n\n/**\n * Calculate cell service layout information\n */\nexport const calculateCellServiceLayout = (\n    visibleSlots: SlotWithService[],\n    hiddenSlots: SlotWithService[]\n) => {\n    const visibleServices = Array.from(\n        new Set(visibleSlots.map((slot) => slot.serviceName))\n    );\n    const hiddenServices = Array.from(\n        new Set(hiddenSlots.map((slot) => slot.serviceName))\n    );\n\n    return {\n        allServices: [...visibleServices, ...hiddenServices],\n        visibleServices,\n        hiddenServices,\n        totalServices: visibleServices.length + hiddenServices.length,\n        hasOverflow: hiddenServices.length > 0,\n        totalColumns: hiddenServices.length > 0 ? 4 : visibleServices.length,\n    };\n};\n"],"names":["getSlotsStartingInTimeCell","serviceData","targetDate","cellStartTime","cellEndTime","allSlots","forEach","service","slots","findSlotsStartingInTimeRange","slot","push","Object","assign","serviceName","name","getSlotsInTimeCell","findSlotsInTimeRange","calculateSlotWidths","weekDays","timeSlots","slotLayoutMap","day","dayDate","format","time","timeMinutes","TimeHelper","timeToMinutes","nextTime","minutesToTime","slotsInCell","slotKey","id","date","startTime","endTime","visible","width","firstThreeServices","Array","from","Set","map","slice","includes","visibleSlots","filter","totalVisibleServices","size","totalColumns","length","widthPercentage","Math","min","getMinimumWidthForCell","minWidth","Number","MAX_SAFE_INTEGER","slotLayout","calculateCellServiceLayout","hiddenSlots","visibleServices","hiddenServices","allServices","totalServices","hasOverflow"],"mappings":"oLAcO,MAAMA,EAA6B,CACtCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA8B,GAoBpC,OAlBAJ,EAAYK,SAASC,IACjB,GAAIA,EAAQC,MAAO,CACMC,EACjBF,EAAQC,MACRL,EACAC,EACAF,GAGSI,SAASI,IAClBL,EAASM,KAAIC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,GAAI,CACPI,YAAaP,EAAQQ,OACvB,GAEV,KAGGV,CAAQ,EAMNW,EAAqB,CAC9Bf,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA8B,GAoBpC,OAlBAJ,EAAYK,SAASC,IACjB,GAAIA,EAAQC,MAAO,CACUS,EACrBV,EAAQC,MACRL,EACAC,EACAF,GAGaI,SAASI,IACtBL,EAASM,KAAIC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,GAAI,CACPI,YAAaP,EAAQQ,OACvB,GAEV,KAGGV,CAAQ,EAMNa,EAAsB,CAC/BjB,EACAkB,EACAC,KAEA,MAAMC,EAA+B,CAAA,EAmErC,OAjEAF,EAASb,SAASgB,IACd,MAAMC,EAAUD,EAAIE,OAAO,cAC3BJ,EAAUd,SAASmB,IACf,MAAMC,EAAcC,EAAWC,cAAcH,GACvCI,EAAWC,EAAcJ,EAAc,IACvCK,EAAcf,EAChBf,EACAsB,EACAE,EACAI,GAGJE,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GAChBZ,EAAcW,KACfX,EAAcW,GAAW,CACrBE,KAAMX,EACNT,YAAaJ,EAAKI,YAClBqB,UAAWzB,EAAKyB,UAChBC,QAAS1B,EAAK0B,QACdC,SAAS,EACTC,MAAO,KAEf,IAGJ,MAKMC,EALiBC,MAAMC,KACzB,IAAIC,IAAIX,EAAYY,KAAKjC,GAASA,EAAKI,gBAID8B,MAAM,EAAG,GACnDb,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GACHM,EAAmBM,SAASnC,EAAKI,eAE/CO,EAAcW,GAASK,SAAU,EACrC,IAIJ,MAAMS,EAAef,EAAYgB,QAAQrC,IACrC,MAAMsB,EAAUtB,EAAKuB,GACrB,OAAOZ,EAAcW,GAASK,OAAO,IAMnCW,EAHkB,IAAIN,IACxBI,EAAaH,KAAKjC,GAASA,EAAKI,eAESmC,KAEvCC,EADoBnB,EAAYoB,OAASL,EAAaK,OACnB,EAAIH,EACvCI,EAAkBF,EAAe,EAAI,IAAMA,EAAe,IAGhEnB,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GACrBZ,EAAcW,GAASM,MAAQe,KAAKC,IAChCjC,EAAcW,GAASM,MACvBc,EACH,GACH,GACJ,IAGC/B,CAAa,EAMXkC,EAAyB,CAClCxB,EACAV,KAEA,IAAImC,EAAWC,OAAOC,iBAQtB,OANA3B,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GACf0B,EAAatC,EAAcW,GACjCwB,EAAWH,KAAKC,IAAIE,EAAUG,EAAWrB,MAAM,IAG5CkB,CAAQ,EAMNI,EAA6B,CACtCd,EACAe,KAEA,MAAMC,EAAkBtB,MAAMC,KAC1B,IAAIC,IAAII,EAAaH,KAAKjC,GAASA,EAAKI,gBAEtCiD,EAAiBvB,MAAMC,KACzB,IAAIC,IAAImB,EAAYlB,KAAKjC,GAASA,EAAKI,gBAG3C,MAAO,CACHkD,YAAa,IAAIF,KAAoBC,GACrCD,kBACAC,iBACAE,cAAeH,EAAgBX,OAASY,EAAeZ,OACvDe,YAAaH,EAAeZ,OAAS,EACrCD,aAAca,EAAeZ,OAAS,EAAI,EAAIW,EAAgBX,OACjE"}
+{"version":3,"file":"week-view-utils.js","sources":["../../../src/schedule/schedule-week-view/week-view-utils.ts"],"sourcesContent":["import type dayjs from \"dayjs\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    findSlotsInTimeRange,\n    findSlotsStartingInTimeRange,\n    minutesToTime,\n} from \"../schedule-slot-content\";\nimport type { ScheduleEntityProps } from \"../types\";\nimport type { SlotLayoutMap, SlotWithService } from \"./types\";\n\n/**\n * Get all slots that START in a specific time cell\n */\nexport const getSlotsStartingInTimeCell = (\n    serviceData: ScheduleEntityProps[],\n    targetDate: string,\n    cellStartTime: string,\n    cellEndTime: string\n): SlotWithService[] => {\n    const allSlots: SlotWithService[] = [];\n\n    serviceData.forEach((service) => {\n        if (service.slots) {\n            const slotsInRange = findSlotsStartingInTimeRange(\n                service.slots,\n                cellStartTime,\n                cellEndTime,\n                targetDate\n            );\n\n            slotsInRange.forEach((slot) => {\n                allSlots.push({\n                    ...slot,\n                    serviceName: service.name,\n                });\n            });\n        }\n    });\n\n    return allSlots;\n};\n\n/**\n * Get all slots that OVERLAP with a specific time cell (for layout calculation)\n */\nexport const getSlotsInTimeCell = (\n    serviceData: ScheduleEntityProps[],\n    targetDate: string,\n    cellStartTime: string,\n    cellEndTime: string\n): SlotWithService[] => {\n    const allSlots: SlotWithService[] = [];\n\n    serviceData.forEach((service) => {\n        if (service.slots) {\n            const overlappingSlots = findSlotsInTimeRange(\n                service.slots,\n                cellStartTime,\n                cellEndTime,\n                targetDate\n            );\n\n            overlappingSlots.forEach((slot) => {\n                allSlots.push({\n                    ...slot,\n                    serviceName: service.name,\n                });\n            });\n        }\n    });\n\n    return allSlots;\n};\n\n/**\n * Calculate and update slot widths across all cells\n */\nexport const calculateSlotWidths = (\n    serviceData: ScheduleEntityProps[],\n    weekDays: dayjs.Dayjs[],\n    timeSlots: string[]\n): SlotLayoutMap => {\n    const slotLayoutMap: SlotLayoutMap = {};\n\n    weekDays.forEach((day) => {\n        const dayDate = day.format(\"YYYY-MM-DD\");\n        timeSlots.forEach((time) => {\n            const timeMinutes = TimeHelper.timeToMinutes(time);\n            const nextTime = minutesToTime(timeMinutes + 30);\n            const slotsInCell = getSlotsInTimeCell(\n                serviceData,\n                dayDate,\n                time,\n                nextTime\n            );\n\n            slotsInCell.forEach((slot) => {\n                const slotKey = slot.id;\n                if (!slotLayoutMap[slotKey]) {\n                    slotLayoutMap[slotKey] = {\n                        date: dayDate,\n                        serviceName: slot.serviceName,\n                        startTime: slot.startTime,\n                        endTime: slot.endTime,\n                        visible: true,\n                        width: 100,\n                    };\n                }\n            });\n\n            const uniqueServices = Array.from(\n                new Set(slotsInCell.map((slot) => slot.serviceName))\n            );\n\n            // Display at most 3 services, mark other slots as hidden\n            const firstThreeServices = uniqueServices.slice(0, 3);\n            slotsInCell.forEach((slot) => {\n                const slotKey = slot.id;\n                const isVisible = firstThreeServices.includes(slot.serviceName);\n                if (!isVisible) {\n                    slotLayoutMap[slotKey].visible = false;\n                }\n            });\n\n            // Calculate width based on visible services only\n            const visibleSlots = slotsInCell.filter((slot) => {\n                const slotKey = slot.id;\n                return slotLayoutMap[slotKey].visible;\n            });\n\n            const visibleServices = new Set(\n                visibleSlots.map((slot) => slot.serviceName)\n            );\n            const totalVisibleServices = visibleServices.size;\n            const hasHiddenServices = slotsInCell.length > visibleSlots.length;\n            const totalColumns = hasHiddenServices ? 4 : totalVisibleServices;\n            const widthPercentage = totalColumns > 0 ? 100 / totalColumns : 100;\n\n            // Update width for each slot in this cell (take minimum across all cells)\n            slotsInCell.forEach((slot) => {\n                const slotKey = slot.id;\n                slotLayoutMap[slotKey].width = Math.min(\n                    slotLayoutMap[slotKey].width,\n                    widthPercentage\n                );\n            });\n        });\n    });\n\n    return slotLayoutMap;\n};\n\n/**\n * Get minimum width for all slots overlapping a specific cell\n */\nexport const getMinimumWidthForCell = (\n    slotsInCell: SlotWithService[],\n    slotLayoutMap: SlotLayoutMap\n): number => {\n    let minWidth = Number.MAX_SAFE_INTEGER;\n\n    slotsInCell.forEach((slot) => {\n        const slotKey = slot.id;\n        const slotLayout = slotLayoutMap[slotKey];\n        minWidth = Math.min(minWidth, slotLayout.width);\n    });\n\n    return minWidth;\n};\n\n/**\n * Calculate cell service layout information\n */\nexport const calculateCellServiceLayout = (\n    visibleSlots: SlotWithService[],\n    hiddenSlots: SlotWithService[]\n) => {\n    const visibleServices = Array.from(\n        new Set(visibleSlots.map((slot) => slot.serviceName))\n    );\n    const hiddenServices = Array.from(\n        new Set(hiddenSlots.map((slot) => slot.serviceName))\n    );\n\n    return {\n        allServices: [...visibleServices, ...hiddenServices],\n        visibleServices,\n        hiddenServices,\n        totalServices: visibleServices.length + hiddenServices.length,\n        hasOverflow: hiddenServices.length > 0,\n        totalColumns: hiddenServices.length > 0 ? 4 : visibleServices.length,\n    };\n};\n"],"names":["getSlotsStartingInTimeCell","serviceData","targetDate","cellStartTime","cellEndTime","allSlots","forEach","service","slots","findSlotsStartingInTimeRange","slot","push","Object","assign","serviceName","name","getSlotsInTimeCell","findSlotsInTimeRange","calculateSlotWidths","weekDays","timeSlots","slotLayoutMap","day","dayDate","format","time","timeMinutes","TimeHelper","timeToMinutes","nextTime","minutesToTime","slotsInCell","slotKey","id","date","startTime","endTime","visible","width","firstThreeServices","Array","from","Set","map","slice","includes","visibleSlots","filter","totalVisibleServices","size","totalColumns","length","widthPercentage","Math","min","getMinimumWidthForCell","minWidth","Number","MAX_SAFE_INTEGER","slotLayout","calculateCellServiceLayout","hiddenSlots","visibleServices","hiddenServices","allServices","totalServices","hasOverflow"],"mappings":"suBAcO,MAAMA,EAA6B,CACtCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA8B,GAoBpC,OAlBAJ,EAAYK,SAASC,IACjB,GAAIA,EAAQC,MAAO,CACMC,EACjBF,EAAQC,MACRL,EACAC,EACAF,GAGSI,SAASI,IAClBL,EAASM,KAAIC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,GAAI,CACPI,YAAaP,EAAQQ,OACvB,GAEV,KAGGV,CAAQ,EAMNW,EAAqB,CAC9Bf,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA8B,GAoBpC,OAlBAJ,EAAYK,SAASC,IACjB,GAAIA,EAAQC,MAAO,CACUS,EACrBV,EAAQC,MACRL,EACAC,EACAF,GAGaI,SAASI,IACtBL,EAASM,KAAIC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,GAAI,CACPI,YAAaP,EAAQQ,OACvB,GAEV,KAGGV,CAAQ,EAMNa,EAAsB,CAC/BjB,EACAkB,EACAC,KAEA,MAAMC,EAA+B,CAAA,EAmErC,OAjEAF,EAASb,SAASgB,IACd,MAAMC,EAAUD,EAAIE,OAAO,cAC3BJ,EAAUd,SAASmB,IACf,MAAMC,EAAcC,EAAWC,cAAcH,GACvCI,EAAWC,EAAcJ,EAAc,IACvCK,EAAcf,EAChBf,EACAsB,EACAE,EACAI,GAGJE,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GAChBZ,EAAcW,KACfX,EAAcW,GAAW,CACrBE,KAAMX,EACNT,YAAaJ,EAAKI,YAClBqB,UAAWzB,EAAKyB,UAChBC,QAAS1B,EAAK0B,QACdC,SAAS,EACTC,MAAO,KAEf,IAGJ,MAKMC,EALiBC,MAAMC,KACzB,IAAIC,IAAIX,EAAYY,KAAKjC,GAASA,EAAKI,gBAID8B,MAAM,EAAG,GACnDb,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GACHM,EAAmBM,SAASnC,EAAKI,eAE/CO,EAAcW,GAASK,SAAU,EACrC,IAIJ,MAAMS,EAAef,EAAYgB,QAAQrC,IACrC,MAAMsB,EAAUtB,EAAKuB,GACrB,OAAOZ,EAAcW,GAASK,OAAO,IAMnCW,EAHkB,IAAIN,IACxBI,EAAaH,KAAKjC,GAASA,EAAKI,eAESmC,KAEvCC,EADoBnB,EAAYoB,OAASL,EAAaK,OACnB,EAAIH,EACvCI,EAAkBF,EAAe,EAAI,IAAMA,EAAe,IAGhEnB,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GACrBZ,EAAcW,GAASM,MAAQe,KAAKC,IAChCjC,EAAcW,GAASM,MACvBc,EACH,GACH,GACJ,IAGC/B,CAAa,EAMXkC,EAAyB,CAClCxB,EACAV,KAEA,IAAImC,EAAWC,OAAOC,iBAQtB,OANA3B,EAAYzB,SAASI,IACjB,MAAMsB,EAAUtB,EAAKuB,GACf0B,EAAatC,EAAcW,GACjCwB,EAAWH,KAAKC,IAAIE,EAAUG,EAAWrB,MAAM,IAG5CkB,CAAQ,EAMNI,EAA6B,CACtCd,EACAe,KAEA,MAAMC,EAAkBtB,MAAMC,KAC1B,IAAIC,IAAII,EAAaH,KAAKjC,GAASA,EAAKI,gBAEtCiD,EAAiBvB,MAAMC,KACzB,IAAIC,IAAImB,EAAYlB,KAAKjC,GAASA,EAAKI,gBAG3C,MAAO,CACHkD,YAAa,IAAIF,KAAoBC,GACrCD,kBACAC,iBACAE,cAAeH,EAAgBX,OAASY,EAAeZ,OACvDe,YAAaH,EAAeZ,OAAS,EACrCD,aAAca,EAAeZ,OAAS,EAAI,EAAIW,EAAgBX,OACjE"}

package/schedule/schedule.d.ts

@@ -1,2 +1,6 @@
 import type { ScheduleProps } from "./types";
+/**
+ * A grid visualisation of slot-based time availability for services across day and week views.
+ * @keywords availability, booking, calendar, grid, slots
+ */
 export declare const Schedule: ({ id, className, view, date, serviceData, loading, minTime, maxTime, initialScrollTime, minDate, maxDate, emptyContentMessage, emptySlotPopover, onPreviousDayClick, onNextDayClick, onCalendarDateSelect, onTodayClick, onEmptySlotClick, blockedMessage, onClickHiddenSlots, "data-testid": testId, ...otherProps }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;

package/schedule/schedule.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as i}from"react/jsx-runtime";import{l as t}from"../external/lodash/lodash.js";import{useState as o,useContext as l,useRef as n,useMemo as s,useEffect as d,useCallback as r}from"react";import{r as c}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as m}from"styled-components";import{V3_Breakpoint as h}from"../v3_theme/index.js";import{Container as p,EmptyTableContainer as y,NoResultsFound as v,ScheduleBodyContainer as C}from"./schedule.styles.js";import{ScheduleDayView as k}from"./schedule-day-view/schedule-day-view.js";import{ScheduleHeader as D}from"./schedule-header/schedule-header.js";import{ScheduleWeekView as g}from"./schedule-week-view/schedule-week-view.js";const u=u=>{var{id:x,className:S,view:f="day",date:w,serviceData:T,loading:j=!1,minTime:b="00:00",maxTime:N="23:59",initialScrollTime:P=b,minDate:M,maxDate:E,emptyContentMessage:O,emptySlotPopover:H,onPreviousDayClick:_,onNextDayClick:A,onCalendarDateSelect:R,onTodayClick:V,onEmptySlotClick:$,blockedMessage:Q,onClickHiddenSlots:W,"data-testid":q="schedule"}=u,z=e(u,["id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","data-testid"]);const[B,F]=o(f),G=l(m),I=h["lg-max"]({theme:G}),J=c.useMediaQuery({maxWidth:I}),K=J?"day":B,L=n(null),[U,X]=o(0),Y=0===T.length||t.isEmpty(T),Z=s((()=>T.map((e=>Object.assign(Object.assign({},e),{slots:e.slots.filter((e=>e.date===w))})))),[T,w]),ee=J?Z&&Z.length>0?[Z[U]]:[]:Z;d((()=>{X(0)}),[Z]);const ae=e=>{F(e)},ie=r((()=>{null==V||V()}),[V]),te=r((()=>{Z&&X((e=>e<Z.length-1?e+1:e))}),[Z]),oe=r((()=>{X((e=>e>0?e-1:e))}),[]);return a(p,Y?Object.assign({},z,{"data-testid":q,$loading:j,children:[i(D,{"data-id":"schedule-header",date:w,view:K,minDate:M,maxDate:E,onPreviousDayClick:_,onNextDayClick:A,onCalendarDateSelect:R,onViewChange:ae,onTodayClick:ie}),i(y,{className:"empty-container",children:i(v,{type:"no-item-found",description:O})})]}):Object.assign({id:x,className:S,$loading:j,"data-testid":q},z,{children:[i(D,{"data-id":"schedule-header",date:w,view:K,minDate:M,maxDate:E,onPreviousDayClick:_,onNextDayClick:A,onCalendarDateSelect:R,onViewChange:ae,onTodayClick:ie}),i(C,{ref:L,"data-id":"schedule-container",children:"day"===K?i(k,{date:w,serviceData:ee,loading:j,minTime:b,maxTime:N,initialScrollTime:P,emptySlotPopover:H,isMobile:J,onNextService:te,onPrevService:oe,containerRef:L,showPrevArrow:J&&U>0,showNextArrow:J&&U<Z.length-1,onEmptySlotClick:$,blockedMessage:Q}):i(g,{date:w,serviceData:T,loading:j,minTime:b,maxTime:N,initialScrollTime:P,containerRef:L,blockedMessage:Q,onClickHiddenSlots:W})})]}))};export{u as Schedule};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import o from"clsx";import{l as a}from"../external/lodash/lodash.js";import{useState as s,useRef as r,useMemo as l,useEffect as n,useCallback as m}from"react";import{ErrorDisplay as d}from"../error-display/error-display.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"../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{useMaxWidthMediaQuery as c}from"../theme/utils/use-media-query.js";import{container as p,containerLoading as h,noResultsFound as y,emptyTableContainer as u,scheduleBodyContainer as v}from"./schedule.styles.js";import{ScheduleDayView as j}from"./schedule-day-view/schedule-day-view.js";import{ScheduleHeader as k}from"./schedule-header/schedule-header.js";import{ScheduleWeekView as g}from"./schedule-week-view/schedule-week-view.js";const C=C=>{var{id:D,className:x,view:S="day",date:f,serviceData:w,loading:T=!1,minTime:b="00:00",maxTime:N="23:59",initialScrollTime:P=b,minDate:M,maxDate:O,emptyContentMessage:E,emptySlotPopover:H,onPreviousDayClick:q,onNextDayClick:A,onCalendarDateSelect:_,onTodayClick:R,onEmptySlotClick:V,blockedMessage:z,onClickHiddenSlots:B,"data-testid":F="schedule"}=C,G=e(C,["id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","data-testid"]);const[I,J]=s(S),K=c("lg"),L=K?"day":I,Q=r(null),[U,W]=s(0),X=0===w.length||a.isEmpty(w),Y=l((()=>w.map((e=>Object.assign(Object.assign({},e),{slots:e.slots.filter((e=>e.date===f))})))),[w,f]);let Z=Y;K&&(Z=Y.length>0?[Y[U]]:[]);const $=K&&U>0,ee=K&&U<Y.length-1;n((()=>{W(0)}),[Y]);const te=m((()=>{null==R||R()}),[R]),ie=m((()=>{Y&&W((e=>e<Y.length-1?e+1:e))}),[Y]),oe=m((()=>{W((e=>e>0?e-1:e))}),[]),ae={date:f,loading:T,minTime:b,maxTime:N,initialScrollTime:P,containerRef:Q,blockedMessage:z};return t("div",Object.assign({id:D,className:o(p,T&&h,x),"data-testid":F},G,{children:[i(k,{"data-id":"schedule-header",date:f,view:L,minDate:M,maxDate:O,onPreviousDayClick:q,onNextDayClick:A,onCalendarDateSelect:_,onViewChange:e=>{J(e)},onTodayClick:te}),i("div",X?{className:o(u,"empty-container"),children:i(d,{className:y,type:"no-item-found",description:E})}:{className:v,ref:Q,"data-id":"schedule-container",children:"day"===L?i(j,Object.assign({},ae,{serviceData:Z,emptySlotPopover:H,isMobile:K,onNextService:ie,onPrevService:oe,showPrevArrow:$,showNextArrow:ee,onEmptySlotClick:V})):i(g,Object.assign({},ae,{serviceData:w,onClickHiddenSlots:B}))})]}))};export{C as Schedule};
 //# sourceMappingURL=schedule.js.map

package/schedule/schedule.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule.js","sources":["../../src/schedule/schedule.tsx"],"sourcesContent":["import { isEmpty } from \"lodash\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Container,\n    EmptyTableContainer,\n    NoResultsFound,\n    ScheduleBodyContainer,\n} from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isSmallScreen = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n\n    const visibleServiceData = isSmallScreen\n        ? filteredServiceData && filteredServiceData.length > 0\n            ? [filteredServiceData[visibleServiceIdx]]\n            : []\n        : filteredServiceData;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId} $loading={loading}>\n                <ScheduleHeader\n                    data-id=\"schedule-header\"\n                    date={date}\n                    view={effectiveView}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                    onViewChange={handleViewChange}\n                    onTodayClick={handleTodayClick}\n                />\n                <EmptyTableContainer className=\"empty-container\">\n                    <NoResultsFound\n                        type=\"no-item-found\"\n                        description={emptyContentMessage}\n                    />\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n    return (\n        <Container\n            id={id}\n            className={className}\n            $loading={loading}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            <ScheduleBodyContainer\n                ref={contentContainerRef}\n                data-id=\"schedule-container\"\n            >\n                {effectiveView === \"day\" ? (\n                    <ScheduleDayView\n                        date={date}\n                        serviceData={visibleServiceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        emptySlotPopover={emptySlotPopover}\n                        isMobile={isSmallScreen}\n                        onNextService={handleNextService}\n                        onPrevService={handlePrevService}\n                        containerRef={contentContainerRef}\n                        showPrevArrow={isSmallScreen && visibleServiceIdx > 0}\n                        showNextArrow={\n                            isSmallScreen &&\n                            visibleServiceIdx < filteredServiceData.length - 1\n                        }\n                        onEmptySlotClick={onEmptySlotClick}\n                        blockedMessage={blockedMessage}\n                    />\n                ) : (\n                    <ScheduleWeekView\n                        date={date}\n                        serviceData={serviceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        containerRef={contentContainerRef}\n                        blockedMessage={blockedMessage}\n                        onClickHiddenSlots={onClickHiddenSlots}\n                    />\n                )}\n            </ScheduleBodyContainer>\n        </Container>\n    );\n};\n"],"names":["Schedule","_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isSmallScreen","useMediaQuery","maxWidth","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","useEffect","handleViewChange","newView","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","_jsxs","Container","Object","assign","$loading","_jsx","ScheduleHeader","onViewChange","EmptyTableContainer","children","NoResultsFound","type","description","ScheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","containerRef","showPrevArrow","showNextArrow","ScheduleWeekView"],"mappings":"owBAwBO,MAAMA,EAAYC,IAAA,IAAAC,GACrBA,EAAEC,UACFA,EAASC,KACTA,EAAO,MAAKC,KACZA,EAAIC,YACJA,EAAWC,QACXA,GAAU,EAAKC,QACfA,EAAU,QAAOC,QACjBA,EAAU,QAAOC,kBACjBA,EAAoBF,EAAOG,QAC3BA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,iBACnBA,EAAgBC,mBAChBA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,iBACZA,EAAgBC,eAChBA,EAAcC,mBACdA,EACA,cAAeC,EAAS,YAAUrB,EAC/BsB,EAAUC,EAAAvB,EAtBQ,CAAA,KAAA,YAAA,OAAA,OAAA,cAAA,UAAA,UAAA,UAAA,oBAAA,UAAA,UAAA,sBAAA,mBAAA,qBAAA,iBAAA,uBAAA,eAAA,mBAAA,iBAAA,qBAAA,gBA2BrB,MAAOwB,EAAaC,GAAkBC,EAAyBvB,GACzDwB,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAgBC,EAAAA,cAAc,CAChCC,SAAUJ,IAERK,EAAgBH,EAAgB,MAAQR,EACxCY,EAAsBC,EAAuB,OAC5CC,EAAmBC,GAAwBb,EAAS,GACrDc,EAAwC,IAAvBnC,EAAYoC,QAAgBC,EAAAA,QAAQrC,GACrDsC,EAAsBC,GACxB,IACIvC,EAAYwC,KAAKC,kCACVA,GAAO,CACVC,MAAOD,EAAQC,MAAMC,QAAQC,GAASA,EAAK7C,OAASA,SAE5D,CAACC,EAAaD,IAGZ8C,GAAqBlB,EACrBW,GAAuBA,EAAoBF,OAAS,EAChD,CAACE,EAAoBL,IACrB,GACJK,EAENQ,GAAU,KACNZ,EAAqB,EAAE,GACxB,CAACI,IAKJ,MAAMS,GAAoBC,IACtB5B,EAAe4B,EAAQ,EAGrBC,GAAmBC,GAAY,KACjCtC,SAAAA,GAAgB,GACjB,CAACA,IAEEuC,GAAoBD,GAAY,KAC7BZ,GACLJ,GAAsBkB,GAClBA,EAAMd,EAAoBF,OAAS,EAAIgB,EAAM,EAAIA,GACpD,GACF,CAACd,IAEEe,GAAoBH,GAAY,KAClChB,GAAsBkB,GAASA,EAAM,EAAIA,EAAM,EAAIA,GAAK,GACzD,IAKH,OAEQE,EAACC,EAFLpB,EAEcqB,OAAAC,OAAA,CAAA,EAAKxC,EAAU,CAAA,cAAeD,EAAM0C,SAAYzD,YACtD0D,EAACC,EAAc,CAAA,UACH,kBACR7D,KAAMA,EACND,KAAMgC,EACNzB,QAASA,EACTC,QAASA,EACTG,mBAAoBA,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBkD,aAAcd,GACdnC,aAAcqC,KAElBU,EAACG,EAAmB,CAACjE,UAAU,kBAAiBkE,SAC5CJ,EAACK,EAAc,CACXC,KAAK,gBACLC,YAAa3D,SAOnBiD,OAAAC,OAAA,CACN7D,GAAIA,EACJC,UAAWA,EAAS6D,SACVzD,EAAO,cACJe,GACTC,EAAU,CAAA8C,SAAA,CAEdJ,EAACC,EAAc,CAAA,UACH,kBACR7D,KAAMA,EACND,KAAMgC,EACNzB,QAASA,EACTC,QAASA,EACTG,mBAAoBA,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBkD,aAAcd,GACdnC,aAAcqC,KAGlBU,EAACQ,EAAqB,CAClBC,IAAKrC,EAAmB,UAChB,qBAAoBgC,SAET,QAAlBjC,EACG6B,EAACU,EAAe,CACZtE,KAAMA,EACNC,YAAa6C,GACb5C,QAASA,EACTC,QAASA,EACTC,QAASA,EACTC,kBAAmBA,EACnBI,iBAAkBA,EAClB8D,SAAU3C,EACV4C,cAAepB,GACfqB,cAAenB,GACfoB,aAAc1C,EACd2C,cAAe/C,GAAiBM,EAAoB,EACpD0C,cACIhD,GACAM,EAAoBK,EAAoBF,OAAS,EAErDvB,iBAAkBA,EAClBC,eAAgBA,IAGpB6C,EAACiB,EAAgB,CACb7E,KAAMA,EACNC,YAAaA,EACbC,QAASA,EACTC,QAASA,EACTC,QAASA,EACTC,kBAAmBA,EACnBqE,aAAc1C,EACdjB,eAAgBA,EAChBC,mBAAoBA,SAIxB"}
+{"version":3,"file":"schedule.js","sources":["../../src/schedule/schedule.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ErrorDisplay } from \"../error-display\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport type { CommonScheduleViewProps } from \"./internal-types\";\nimport * as styles from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\n// @catalog\n/**\n * A grid visualisation of slot-based time availability for services across day and week views.\n * @keywords availability, booking, calendar, grid, slots\n */\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n    let visibleServiceData = filteredServiceData;\n    if (isSmallScreen) {\n        visibleServiceData =\n            filteredServiceData.length > 0\n                ? [filteredServiceData[visibleServiceIdx]]\n                : [];\n    }\n    const showPrevArrow = isSmallScreen && visibleServiceIdx > 0;\n    const showNextArrow =\n        isSmallScreen && visibleServiceIdx < filteredServiceData.length - 1;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderEmptyContent = () => (\n        <div className={clsx(styles.emptyTableContainer, \"empty-container\")}>\n            <ErrorDisplay\n                className={styles.noResultsFound}\n                type=\"no-item-found\"\n                description={emptyContentMessage}\n            />\n        </div>\n    );\n\n    const commonScheduleViewProps: CommonScheduleViewProps = {\n        date,\n        loading,\n        minTime,\n        maxTime,\n        initialScrollTime,\n        containerRef: contentContainerRef,\n        blockedMessage,\n    };\n\n    const renderScheduleView = () => (\n        <div\n            className={styles.scheduleBodyContainer}\n            ref={contentContainerRef}\n            data-id=\"schedule-container\"\n        >\n            {effectiveView === \"day\" ? (\n                <ScheduleDayView\n                    {...commonScheduleViewProps}\n                    serviceData={visibleServiceData}\n                    emptySlotPopover={emptySlotPopover}\n                    isMobile={isSmallScreen}\n                    onNextService={handleNextService}\n                    onPrevService={handlePrevService}\n                    showPrevArrow={showPrevArrow}\n                    showNextArrow={showNextArrow}\n                    onEmptySlotClick={onEmptySlotClick}\n                />\n            ) : (\n                <ScheduleWeekView\n                    {...commonScheduleViewProps}\n                    serviceData={serviceData}\n                    onClickHiddenSlots={onClickHiddenSlots}\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <div\n            id={id}\n            className={clsx(\n                styles.container,\n                loading && styles.containerLoading,\n                className\n            )}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            {isEmptyContent ? renderEmptyContent() : renderScheduleView()}\n        </div>\n    );\n};\n"],"names":["Schedule","_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","showPrevArrow","showNextArrow","useEffect","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","commonScheduleViewProps","containerRef","_jsxs","Object","assign","clsx","styles.container","styles.containerLoading","children","_jsx","ScheduleHeader","onViewChange","newView","styles.emptyTableContainer","ErrorDisplay","styles.noResultsFound","type","description","styles.scheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","ScheduleWeekView"],"mappings":"6oCAkBO,MAAMA,EAAYC,IAAA,IAAAC,GACrBA,EAAEC,UACFA,EAASC,KACTA,EAAO,MAAKC,KACZA,EAAIC,YACJA,EAAWC,QACXA,GAAU,EAAKC,QACfA,EAAU,QAAOC,QACjBA,EAAU,QAAOC,kBACjBA,EAAoBF,EAAOG,QAC3BA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,iBACnBA,EAAgBC,mBAChBA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,iBACZA,EAAgBC,eAChBA,EAAcC,mBACdA,EACA,cAAeC,EAAS,YAAUrB,EAC/BsB,EAAUC,EAAAvB,EAtBQ,CAAA,KAAA,YAAA,OAAA,OAAA,cAAA,UAAA,UAAA,UAAA,oBAAA,UAAA,UAAA,sBAAA,mBAAA,qBAAA,iBAAA,uBAAA,eAAA,mBAAA,iBAAA,qBAAA,gBA2BrB,MAAOwB,EAAaC,GAAkBC,EAAyBvB,GACzDwB,EAAgBC,EAAsB,MACtCC,EAAgBF,EAAgB,MAAQH,EACxCM,EAAsBC,EAAuB,OAC5CC,EAAmBC,GAAwBP,EAAS,GACrDQ,EAAwC,IAAvB7B,EAAY8B,QAAgBC,EAAAA,QAAQ/B,GACrDgC,EAAsBC,GACxB,IACIjC,EAAYkC,KAAKC,kCACVA,GAAO,CACVC,MAAOD,EAAQC,MAAMC,QAAQC,GAASA,EAAKvC,OAASA,SAE5D,CAACC,EAAaD,IAElB,IAAIwC,EAAqBP,EACrBV,IACAiB,EACIP,EAAoBF,OAAS,EACvB,CAACE,EAAoBL,IACrB,IAEd,MAAMa,EAAgBlB,GAAiBK,EAAoB,EACrDc,GACFnB,GAAiBK,EAAoBK,EAAoBF,OAAS,EAEtEY,GAAU,KACNd,EAAqB,EAAE,GACxB,CAACI,IAKJ,MAIMW,GAAmBC,GAAY,KACjChC,SAAAA,GAAgB,GACjB,CAACA,IAEEiC,GAAoBD,GAAY,KAC7BZ,GACLJ,GAAsBkB,GAClBA,EAAMd,EAAoBF,OAAS,EAAIgB,EAAM,EAAIA,GACpD,GACF,CAACd,IAEEe,GAAoBH,GAAY,KAClChB,GAAsBkB,GAASA,EAAM,EAAIA,EAAM,EAAIA,GAAK,GACzD,IAgBGE,GAAmD,CACrDjD,OACAE,UACAC,UACAC,UACAC,oBACA6C,aAAcxB,EACdX,kBA+BJ,OACIoC,EAAA,MAAAC,OAAAC,OAAA,CACIxD,GAAIA,EACJC,UAAWwD,EACPC,EACArD,GAAWsD,EACX1D,GACH,cACYmB,GACTC,EAAU,CAAAuC,SAAA,CAEdC,EAACC,EAAc,CAAA,UACH,kBACR3D,KAAMA,EACND,KAAM0B,EACNnB,QAASA,EACTC,QAASA,EACTG,mBAAoBA,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBgD,aA3FcC,IACtBxC,EAAewC,EAAQ,EA2FfhD,aAAc+B,KApEtBc,EAAA,MAuEK5B,EAvEL,CAAKhC,UAAWwD,EAAKQ,EAA4B,mBAAkBL,SAC/DC,EAACK,GACGjE,UAAWkE,EACXC,KAAK,gBACLC,YAAa1D,MAiBjBV,UAAWqE,EACXC,IAAK1C,EAAmB,UAChB,qBAAoB+B,SAET,QAAlBhC,EACGiC,EAACW,mBACOpB,GAAuB,CAC3BhD,YAAauC,EACb/B,iBAAkBA,EAClB6D,SAAU/C,EACVgD,cAAezB,GACf0B,cAAexB,GACfP,cAAeA,EACfC,cAAeA,GACf5B,iBAAkBA,KAGtB4C,EAACe,EAAgBrB,OAAAC,OAAA,CAAA,EACTJ,IACJhD,YAAaA,EACbe,mBAAoBA,UA+B1B"}

package/schedule/schedule.styles.d.ts

@@ -1,8 +1,5 @@
-interface ScheduleProps {
-    $loading: boolean | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ScheduleProps>> & string;
-export declare const ScheduleBodyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EmptyTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NoResultsFound: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ErrorDisplayProps, never>> & string & Omit<({ type, img, title, description, actionButton, additionalProps, imageOnly, illustrationScheme, ...otherProps }: import("..").ErrorDisplayProps) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerLoading: import("@linaria/core").LinariaClassName;
+export declare const scheduleBodyContainer: import("@linaria/core").LinariaClassName;
+export declare const emptyTableContainer: import("@linaria/core").LinariaClassName;
+export declare const noResultsFound: import("@linaria/core").LinariaClassName;

package/schedule/schedule.styles.js

@@ -1,27 +1,2 @@
-import o,{css as r}from"styled-components";import{ErrorDisplay as i}from"../error-display/error-display.js";import{V3_Border as d,V3_Colour as e,V3_Radius as t,V3_Spacing as n}from"../v3_theme/index.js";import{MIN_COLUMN_WIDTH as s}from"./const.js";const m=o.div`
-    min-width: 320px;
-    max-width: 90vw;
-    box-sizing: border-box;
-    ${o=>{if(o.$loading)return r`
-                &:hover {
-                    cursor: not-allowed;
-                }
-            `}}
-`,p=o.div`
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-`,a=o.div`
-    display: grid;
-    overflow: auto;
-    position: relative;
-    grid-template-columns: ${s}px auto;
-    border: ${d["width-010"]} ${d.solid} ${e.border};
-    border-radius: ${t.md};
-    background: ${e.bg};
-`,l=o(i)`
-    grid-column: 1 / -1;
-    grid-row: 2;
-    padding: ${n["spacing-72"]} 0;
-`;export{m as Container,a as EmptyTableContainer,l as NoResultsFound,p as ScheduleBodyContainer};
+import"./schedule.styles_fdy5a1.css";const e="c1340rqu",s="c1hp3fsj",c="s1kpvet5",t="e1b7vyxh",h="niqne7l";export{e as container,s as containerLoading,t as emptyTableContainer,h as noResultsFound,c as scheduleBodyContainer};
 //# sourceMappingURL=schedule.styles.js.map