npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/schedule/schedule-day-view/schedule-day-view.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schedule-day-view.styles.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { lineClampCss } from \"../../shared/styles\";\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 {\n CELL_HEIGHT,\n HEADER_HEIGHT,\n MIN_COLUMN_WIDTH,\n TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n $status?: string;\n $duration?: number;\n $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(Button)`\n color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n`;\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<HeaderContainerStyleProps>`\n z-index: 3;\n max-height: ${HEADER_HEIGHT}px;\n border-top-right-radius: ${V3_Radius[\"md\"]};\n border-top-left-radius: ${V3_Radius[\"md\"]};\n position: sticky;\n border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n overflow-x: hidden;\n overflow-y: hidden;\n\n ${(props) =>\n props.$isMobile\n ? css`\n display: block;\n overflow: hidden;\n `\n : css`\n display: grid;\n grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n `}\n`;\n\nexport const BlankCell = styled.div`\n min-width: ${TIME_INDICATOR_WIDTH}px;\n background: ${V3_Colour[\"bg-strong\"]};\n position: sticky;\n left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n display: grid;\n grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-width: ${MIN_COLUMN_WIDTH}px;\n padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n background: ${V3_Colour[\"bg-strong\"]};\n border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n ${V3_Colour[\"border\"]};\n &:last-child {\n border-right: none;\n }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n width: 15rem;\n padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n color: ${V3_Colour[\"text-primary\"]};\n font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n margin-top: 0;\n ${lineClampCss(2)}\n text-overflow: ellipsis;\n word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n margin-top: ${V3_Spacing[\"spacing-8\"]};\n background-color: ${V3_Colour[\"bg-success-hover\"]};\n border-radius: ${V3_Radius[\"full\"]};\n width: fit-content;\n padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n color: ${V3_Colour[\"text-success\"]};\n font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n span {\n font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n }\n`;\n\nexport const BodyContainer = styled.div`\n display: grid;\n grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n width: 100%;\n overflow-x: auto;\n overflow-y: auto;\n flex: 1;\n height: 100%;\n border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n border-top: none;\n border-bottom-right-radius: ${V3_Radius[\"md\"]};\n border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n display: grid;\n grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n min-width: max-content;\n position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n display: flex;\n flex-direction: column;\n min-width: ${MIN_COLUMN_WIDTH}px;\n min-height: fit-content;\n border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n ${V3_Colour[\"border\"]};\n &:last-child {\n border-right: none;\n }\n`;\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 SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n margin-top: 0;\n overflow: hidden;\n width: calc(100% - 27px);\n padding: 2px ${V3_Spacing[\"spacing-8\"]};\n position: absolute;\n top: ${(props) => props.$offsetTop \|\| 0}px;\n ${V3_Font[\"body-xs-semibold\"]};\n border-radius: ${V3_Radius[\"sm\"]};\n z-index: 1;\n height: ${(props) =>\n props.$duration\n ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n : `${CELL_HEIGHT - 1}px`};\n display: flex;\n justify-content: space-between;\n background: ${(props) => {\n switch (props.$status) {\n case \"pending\":\n return css`\n repeating-linear-gradient(\n 135deg,\n ${V3_Colour[\"bg-warning\"]},\n ${V3_Colour[\"bg-warning\"]} 5px,\n ${V3_Colour[\"bg-warning-hover\"]} 5px,\n ${V3_Colour[\"bg-warning-hover\"]} 10px\n )\n `;\n case \"blocked\":\n return V3_Colour[\"bg-inverse-subtle\"];\n case \"available\":\n return V3_Colour[\"bg-success-hover\"];\n case \"booked\":\n return V3_Colour[\"bg-primary-subtler\"];\n default:\n return V3_Colour[\"bg\"];\n }\n }};\n\n color: ${(props) =>\n props.$status === \"blocked\"\n ? V3_Colour[\"text-inverse\"]\n : V3_Colour[\"text-subtle\"]};\n\n border-left: ${V3_Border[\"width-040\"]} solid\n ${(props) =>\n props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n ${V3_Font[\"body-xs-semibold\"]};\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\nexport const EmptySlot = styled.div`\n width: 100%;\n height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","Button","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"gbAmDaA,EAAcC,EAAOC,EAAO;aAC5BC,EAAgB;EAEhBC,EAAiBH,EAAOI,GAAG;;EAI3BC,EAAoBL,EAAOI,GAAG;;;;EAM9BE,EAAmBN,EAAOI,GAAG;;;;;;cAM5BG,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;qBACxDO,EAAc;kBACjBP,EAAc;EAGnBQ,EAAkBV,EAAOI,GAA8B;;kBAElDO;+BACaF,EAAc;8BACfA,EAAc;;cAE9BF,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;;;;MAItEU,GACCA,EAAMC,UACAC,CAAG;;;gBAIHA,CAAG;;2CAE0BC;;EAI9BC,EAAYhB,EAAOI,GAAG;iBAClBW;kBACCb,EAAU;;;EAIfe,EAAmBjB,EAAOI,GAA+B;;oCAEjCQ,GAAUA,EAAMM;EAGxCC,EAAgBnB,EAAOI,GAAG;;;;iBAItBgB;eACFC,EAAW,iBAAiBA,EAAW;kBACpCnB,EAAU;oBACRK,EAAU,gBAAgBA,EAAUC;UAC9CN,EAAkB;;;;EAMfoB,EAAyBtB,EAAOI,GAAG;;oBAE5BiB,EAAW;EAGlBE,EAAQvB,EAAOwB,EAAWC,OAAO;aACjCvB,EAAU;mBACJwB,EAAQC,KAAK;;MAE1BC,EAAa;;;EAKNC,EAAc7B,EAAOwB,EAAWM,OAAO;kBAClCT,EAAW;wBACLnB,EAAU;qBACbO,EAAgB;;eAEtBY,EAAW,gBAAgBA,EAAW;aACxCnB,EAAU;mBACJwB,EAAQC,KAAK;;uBAETD,EAAQC,KAAK;;EAIvBI,EAAgB/B,EAAOI,GAAG;;6BAEVW;;;;;;cAMfR,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;;kCAE3CO,EAAc;iCACfA,EAAc;EAGlCuB,EAAWhC,EAAOI,GAAuB;;oCAEjBQ,GAAUA,EAAMM;;;EAKxCe,EAAajC,EAAOI,GAAG;;;iBAGnBgB;;oBAEGb,EAAU,gBAAgBA,EAAUC;UAC9CN,EAAkB;;;;EAMfgC,EAAWlC,EAAOI,GAAuB;kBACpC+B;;qBAEG5B,EAAU,sBAAsBL,EAAkB;MAChEU,GACCA,EAAMwB,SACNtB,CAAG;;;;EAMEuB,EAAcrC,EAAOwB,EAAWc,OAA8B;;;;mBAIxDjB,EAAW;;WAElBT,GAAUA,EAAM2B,YAAc;MACpCb,EAAQ;qBACOjB,EAAc;;cAEpBG,GACPA,EAAM4B,UACI5B,EAAM4B,UAAY,GAAML,EAAc,EAA1C,KACGA,EAAc,EAAjB;;;kBAGKvB,IACX,OAAQA,EAAM6B,SACV,IAAK,UACD,OAAO3B,CAAG;;;0BAGAZ,EAAU;0BACVA,EAAU;0BACVA,EAAU;0BACVA,EAAU;;kBAGxB,IAAK,UACD,OAAOA,EAAU,qBACrB,IAAK,YACD,OAAOA,EAAU,oBACrB,IAAK,SACD,OAAOA,EAAU,sBACrB,QACI,OAAOA,EAAc;;aAIvBU,GACY,YAAlBA,EAAM6B,QACAvC,EAAU,gBACVA,EAAU;;mBAELK,EAAU;UAClBK,GACmB,cAAlBA,EAAM6B,QAA0BvC,EAAU,gBAAkB;EAG3DwC,EAAW1C,EAAO2C,IAAI;MAC7BjB,EAAQ;EAGDkB,EAAmB5C,EAAO2C,IAAI;MACrCjB,EAAQ;EAGDmB,EAAW7C,EAAOI,GAAuB;;;;kBAIpCF,EAAU;WAChBU,GAAUA,EAAMkC;;EAIfC,EAAY/C,EAAOI,GAAG;;cAErB+B,EAAc;"}
1	+ {"version":3,"file":"schedule-day-view.styles.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\nimport {\n CELL_HEIGHT,\n HEADER_HEIGHT,\n MIN_COLUMN_WIDTH,\n TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n serviceContainer: {\n columnCount:\n \"--fds-internal-scheduleDayView-serviceContainer-columnCount\",\n },\n slotGrid: {\n columnCount: \"--fds-internal-scheduleDayView-slotGrid-columnCount\",\n },\n slotContent: {\n offsetTop: \"--fds-internal-scheduleDayView-slotContent-offsetTop\",\n height: \"--fds-internal-scheduleDayView-slotContent-height\",\n },\n timeline: {\n top: \"--fds-internal-scheduleDayView-timeline-top\",\n },\n};\n\nexport const arrowButton = css`\n color: ${Colour[\"icon\"]};\n`;\nexport const arrowContainer = css`\n width: 2rem;\n`;\n\nexport const scheduleContainer = css`\n display: flex;\n flex-direction: column;\n height: 100%;\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 z-index: 3;\n max-height: ${HEADER_HEIGHT}px;\n border-top-right-radius: ${Radius[\"md\"]};\n border-top-left-radius: ${Radius[\"md\"]};\n position: sticky;\n border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n overflow-x: hidden;\n overflow-y: hidden;\n display: grid;\n grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n`;\n\nexport const headerContainerMobile = css`\n display: block;\n overflow: hidden;\n`;\n\nexport const blankCell = css`\n min-width: ${TIME_INDICATOR_WIDTH}px;\n background: ${Colour[\"bg-strong\"]};\n position: sticky;\n left: 0;\n`;\nexport const serviceContainer = css`\n ${tokens.serviceContainer.columnCount}: 1;\n display: grid;\n grid-template-columns: repeat(\n var(${tokens.serviceContainer.columnCount}),\n 1fr\n );\n`;\n\nexport const serviceColumn = css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-width: ${MIN_COLUMN_WIDTH}px;\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n background: ${Colour[\"bg-strong\"]};\n border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n &:last-child {\n border-right: none;\n }\n`;\n\nexport const serviceHeaderContainer = css`\n width: 15rem;\n padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const title = css`\n color: ${Colour[\"text-primary\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n margin-top: 0;\n ${lineClampCss(2)}\n text-overflow: ellipsis;\n word-wrap: break-word;\n`;\n\nexport const description = css`\n margin-top: ${Spacing[\"spacing-8\"]};\n background-color: ${Colour[\"bg-success-hover\"]};\n border-radius: ${Radius[\"full\"]};\n width: fit-content;\n padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"text-success\"]};\n font-weight: ${Font.Spec[\"weight-regular\"]};\n span {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n\nexport const bodyContainer = css`\n display: grid;\n grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n width: 100%;\n overflow-x: auto;\n overflow-y: auto;\n flex: 1;\n height: 100%;\n border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n border-top: none;\n border-bottom-right-radius: ${Radius[\"md\"]};\n border-bottom-left-radius: ${Radius[\"md\"]};\n`;\n\nexport const slotGrid = css`\n ${tokens.slotGrid.columnCount}: 1;\n display: grid;\n grid-template-columns: repeat(var(${tokens.slotGrid.columnCount}), 1fr);\n min-width: max-content;\n position: relative;\n`;\n\nexport const slotColumn = css`\n display: flex;\n flex-direction: column;\n min-width: ${MIN_COLUMN_WIDTH}px;\n min-height: fit-content;\n border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n &:last-child {\n border-right: none;\n }\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 background: none;\n width: 100%;\n padding: 0;\n text-align: left;\n`;\n\nexport const slotCellDashed = css`\n border-bottom-style: dashed;\n`;\n\nexport const slotContent = css`\n ${tokens.slotContent.offsetTop}: 0px;\n ${tokens.slotContent.height}: ${CELL_HEIGHT - 1}px;\n margin-top: 0;\n overflow: hidden;\n width: calc(100% - 27px);\n padding: 2px ${Spacing[\"spacing-8\"]};\n position: absolute;\n top: var(${tokens.slotContent.offsetTop});\n ${Font[\"body-xs-semibold\"]};\n border-radius: ${Radius[\"sm\"]};\n z-index: 1;\n height: var(${tokens.slotContent.height});\n display: flex;\n justify-content: space-between;\n color: ${Colour[\"text-subtle\"]};\n`;\n\nexport const slotContentBlocked = css`\n color: ${Colour[\"text-inverse\"]};\n`;\n\nexport const slotContentAvailable = css`\n border-left: ${Border[\"width-040\"]} solid ${Colour[\"icon-success\"]};\n`;\n\nexport const slotTime = css`\n ${Font[\"body-xs-regular\"]};\n`;\n\nexport const slotAvailability = css`\n ${Font[\"body-xs-semibold\"]};\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\nexport const emptySlot = css`\n width: 100%;\n height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["tokens","serviceContainer","columnCount","slotGrid","slotContent","offsetTop","height","timeline","top","arrowButton","arrowContainer","scheduleContainer","loadingContainer","headerContainer","headerContainerMobile","blankCell","serviceColumn","serviceHeaderContainer","title","description","bodyContainer","slotColumn","slotCell","slotCellDashed","slotContentBlocked","slotContentAvailable","slotTime","slotAvailability","emptySlot"],"mappings":"wFAcO,MAAMA,EAAS,CAClBC,iBAAkB,CACdC,YACI,+DAERC,SAAU,CACND,YAAa,uDAEjBE,YAAa,CACTC,UAAW,uDACXC,OAAQ,qDAEZC,SAAU,CACNC,IAAK,gDAIAC,EAAW,WAGXC,EAAc,UAIdC,EAAiB,UAMjBC,EAAgB,UAWhBC,EAAe,UAafC,EAAqB,WAKrBC,EAAS,UAMTd,EAAgB,WAShBe,EAAa,WAabC,EAAsB,UAKtBC,EAAK,WASLC,EAAW,WAaXC,EAAa,WAcbjB,EAAQ,UAQRkB,EAAU,WAWVC,EAAQ,WAWRC,EAAc,UAIdnB,EAAW,WAkBXoB,EAAkB,WAIlBC,EAAoB,UAIpBC,EAAQ,WAIRC,EAAgB,UAIhBpB,EAAQ,UAURqB,EAAS"}

package/schedule/schedule-day-view/schedule-day-view.styles_8ti149.css ADDED Viewed

@@ -0,0 +1,30 @@
+@layer fds{.a1gk5ipc{color:var(--fds-colour-icon);}
+.ac6jj8s{width:2rem;}
+.syko8xg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}
+.lfazoz2{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);}
+.h7zv0mp{z-index:3;max-height:130px;border-top-right-radius:var(--fds-radius-md);border-top-left-radius:var(--fds-radius-md);position:-webkit-sticky;position:sticky;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);overflow-x:hidden;overflow-y:hidden;display:-ms-grid;display:grid;-ms-grid-columns:42px 1fr;grid-template-columns:42px 1fr;}
+.h189uqeu{display:block;overflow:hidden;}
+.bcdvy5w{min-width:42px;background:var(--fds-colour-bg-strong);position:-webkit-sticky;position:sticky;left:0;}
+.s1shiknn{--fds-internal-scheduleDayView-serviceContainer-columnCount:1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(
+        var(--fds-internal-scheduleDayView-serviceContainer-columnCount),
+        1fr
+    );grid-template-columns:repeat(
+        var(--fds-internal-scheduleDayView-serviceContainer-columnCount),
+        1fr
+    );}
+.s16mh3td{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:280px;padding:var(--fds-spacing-16) var(--fds-spacing-8);background:var(--fds-colour-bg-strong);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.s16mh3td:last-child{border-right:none;}
+.surbskl{width:15rem;padding-left:var(--fds-spacing-16);}
+.t1vhhu8o{color:var(--fds-colour-text-primary);font-weight:var(--fds-font-weight-semibold);margin-top:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
+.d1s1gqx7{margin-top:var(--fds-spacing-8);background-color:var(--fds-colour-bg-success-hover);border-radius:var(--fds-radius-full);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--fds-spacing-4) var(--fds-spacing-8);color:var(--fds-colour-text-success);font-weight:var(--fds-font-weight-regular);}.d1s1gqx7 span{font-weight:var(--fds-font-weight-semibold);}
+.b10f0jd9{display:-ms-grid;display:grid;-ms-grid-columns:42px 1fr;grid-template-columns:42px 1fr;width:100%;overflow-x:auto;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);border-top:none;border-bottom-right-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);}
+.ssw76ta{--fds-internal-scheduleDayView-slotGrid-columnCount:1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(var(--fds-internal-scheduleDayView-slotGrid-columnCount), 1fr);grid-template-columns:repeat(var(--fds-internal-scheduleDayView-slotGrid-columnCount), 1fr);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;position:relative;}
+.s1ftjtjk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:280px;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.s1ftjtjk:last-child{border-right:none;}
+.s1m5etm4{min-height:48px;position:relative;border-bottom:var(--fds-border-width-010) solid var(--fds-colour-border);cursor:pointer;background:none;width:100%;padding:0;text-align:left;}
+.s5nw100{border-bottom-style:dashed;}
+.s1kbe3yg{--fds-internal-scheduleDayView-slotContent-offsetTop:0px;--fds-internal-scheduleDayView-slotContent-height:47px;margin-top:0;overflow:hidden;width:calc(100% - 27px);padding:2px var(--fds-spacing-8);position:absolute;top:var(--fds-internal-scheduleDayView-slotContent-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);border-radius:var(--fds-radius-sm);z-index:1;height:var(--fds-internal-scheduleDayView-slotContent-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;color:var(--fds-colour-text-subtle);}
+.s1c4k21e{color:var(--fds-colour-text-inverse);}
+.s4ebyxx{border-left:var(--fds-border-width-040) solid var(--fds-colour-icon-success);}
+.s1cpyxi3{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);}
+.s2as1da{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);}
+.t42sdto{--fds-internal-scheduleDayView-timeline-top:0px;position:absolute;width:100%;height:2px;background:var(--fds-colour-icon-primary);top:var(--fds-internal-scheduleDayView-timeline-top);z-index:2;}
+.e1xn1uhc{width:100%;height:47px;}}

package/schedule/schedule-day-view/types.d.ts CHANGED Viewed

@@ -1,19 +1,11 @@
-import type { RefObject } from "react";
-import type { ScheduleEmptySlotProps, ScheduleEntityProps, SchedulePopoverProps } from "../types";
-export interface ScheduleDayViewProps {
-    date: string;
+import type { CommonScheduleViewProps, ScheduleEmptySlotProps, ScheduleEntityProps, SchedulePopoverProps } from "../types";
+export interface ScheduleDayViewProps extends CommonScheduleViewProps {
     serviceData: ScheduleEntityProps[];
-    loading: boolean;
-    minTime: string;
-    maxTime: string;
-    initialScrollTime?: string | undefined;
     isMobile: boolean;
-    containerRef: RefObject<HTMLDivElement>;
     onNextService?: () => void | undefined;
     onPrevService?: () => void | undefined;
     onEmptySlotClick?: (slot: ScheduleEmptySlotProps) => void | undefined;
     showPrevArrow: boolean;
     showNextArrow: boolean;
     emptySlotPopover?: ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps) | undefined;
-    blockedMessage?: string | undefined;
 }

package/schedule/schedule-header/schedule-header.js CHANGED Viewed

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

	@@ -0,0 +1,2 @@
1	+ import"../../theme/theme-provider/index.js";import"react";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as e}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";const r=r=>{switch(r){case"pending":return{styleType:"stripes",bgColor:e["bg-warning"],bgColor2:e["bg-warning-hover"]};case"blocked":return{styleType:"default",bgColor:e["bg-inverse-subtle"]};case"available":return{styleType:"default",bgColor:e["bg-success-hover"]};case"booked":return{styleType:"default",bgColor:e["bg-primary-subtler"]};default:return{styleType:"default",bgColor:e.bg}}};export{r as getTimeSlotStyleProps};
2	+ //# sourceMappingURL=style-helper.js.map

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

@@ -0,0 +1 @@

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

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

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

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

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

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

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
1	+ {"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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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