@lifesg/react-design-system 4.0.0-alpha.10 → 4.0.0-alpha.12

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 (128) hide show
  1. package/accordion/accordion-item.js +1 -1
  2. package/accordion/accordion-item.js.map +1 -1
  3. package/accordion/types.d.ts +7 -0
  4. package/cjs/accordion/accordion-item.js +1 -1
  5. package/cjs/accordion/accordion-item.js.map +1 -1
  6. package/cjs/file-download/file-download.js +1 -1
  7. package/cjs/file-download/file-download.js.map +1 -1
  8. package/cjs/file-download/file-list-card/file-list-card.js +1 -1
  9. package/cjs/file-download/file-list-card/file-list-card.js.map +1 -1
  10. package/cjs/file-download/file-list-card/file-list-card.styles.js +1 -1
  11. package/cjs/file-download/file-list-card/file-list-card.styles.js.map +1 -1
  12. package/cjs/file-download/file-list-card/file-list-card.styles_lzbqkk.css +18 -0
  13. package/cjs/file-upload/helper.js +1 -1
  14. package/cjs/file-upload/helper.js.map +1 -1
  15. package/cjs/footer/footer-disclaimer-links-data.js +1 -1
  16. package/cjs/footer/footer-disclaimer-links-data.js.map +1 -1
  17. package/cjs/footer/footer.styles.js +1 -1
  18. package/cjs/footer/footer.styles.js.map +1 -1
  19. package/{footer/footer.styles_1msorhc.css → cjs/footer/footer.styles_14hnlcq.css} +4 -4
  20. package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.js +1 -1
  21. package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.js.map +1 -1
  22. package/cjs/index.js +1 -1
  23. package/cjs/masthead/masthead.js +1 -1
  24. package/cjs/masthead/masthead.js.map +1 -1
  25. package/cjs/masthead/sgds-day.css +519 -59
  26. package/cjs/masthead/sgds-night.css +513 -53
  27. package/cjs/modal-v2/modal-v2.js.map +1 -1
  28. package/cjs/modal-v2/slots/card.js +1 -1
  29. package/cjs/modal-v2/slots/card.js.map +1 -1
  30. package/cjs/modal-v2/slots/slot-styles.js +1 -1
  31. package/cjs/modal-v2/slots/slot-styles.js.map +1 -1
  32. package/cjs/modal-v2/slots/slot-styles_ayb9il.css +33 -0
  33. package/cjs/navbar/menu.js +1 -1
  34. package/cjs/navbar/menu.js.map +1 -1
  35. package/cjs/navbar/menu.styles.js +1 -1
  36. package/cjs/navbar/menu.styles.js.map +1 -1
  37. package/{navbar/menu.styles_gdpqc.css → cjs/navbar/menu.styles_zkjexa.css} +1 -1
  38. package/cjs/navbar/navbar-items.js +1 -1
  39. package/cjs/navbar/navbar-items.js.map +1 -1
  40. package/cjs/navbar/navbar-items.styles.js +1 -1
  41. package/cjs/navbar/navbar-items.styles.js.map +1 -1
  42. package/cjs/navbar/{navbar-items.styles_1b1zx.css → navbar-items.styles_1klnd8i.css} +3 -3
  43. package/cjs/navbar/navbar-logo-data.js +1 -1
  44. package/cjs/navbar/navbar-logo-data.js.map +1 -1
  45. package/cjs/theme/index.js +1 -1
  46. package/cjs/theme/theme-provider/breakpoint.js +1 -1
  47. package/cjs/theme/theme-provider/breakpoint.js.map +1 -1
  48. package/cjs/theme/theme-provider/hooks.js +1 -1
  49. package/cjs/theme/theme-provider/hooks.js.map +1 -1
  50. package/cjs/theme/theme-provider/index.js +1 -1
  51. package/cjs/theme/theme-provider/index.js.map +1 -1
  52. package/cjs/theme/types.js +1 -1
  53. package/cjs/theme/types.js.map +1 -1
  54. package/docs/component-catalog.json +1 -1
  55. package/file-download/file-download.d.ts +1 -1
  56. package/file-download/file-download.js +1 -1
  57. package/file-download/file-download.js.map +1 -1
  58. package/file-download/file-list-card/file-list-card.d.ts +1 -1
  59. package/file-download/file-list-card/file-list-card.js +1 -1
  60. package/file-download/file-list-card/file-list-card.js.map +1 -1
  61. package/file-download/file-list-card/file-list-card.styles.d.ts +2 -0
  62. package/file-download/file-list-card/file-list-card.styles.js +1 -1
  63. package/file-download/file-list-card/file-list-card.styles.js.map +1 -1
  64. package/file-download/file-list-card/file-list-card.styles_lzbqkk.css +18 -0
  65. package/file-download/file-list-card/types.d.ts +1 -0
  66. package/file-download/types.d.ts +13 -0
  67. package/file-upload/helper.d.ts +30 -0
  68. package/file-upload/helper.js +1 -1
  69. package/file-upload/helper.js.map +1 -1
  70. package/footer/footer-disclaimer-links-data.js +1 -1
  71. package/footer/footer-disclaimer-links-data.js.map +1 -1
  72. package/footer/footer.styles.js +1 -1
  73. package/footer/footer.styles.js.map +1 -1
  74. package/{cjs/footer/footer.styles_1msorhc.css → footer/footer.styles_14hnlcq.css} +4 -4
  75. package/fullscreen-image-carousel/fullscreen-image-carousel.d.ts +1 -1
  76. package/fullscreen-image-carousel/fullscreen-image-carousel.js +1 -1
  77. package/fullscreen-image-carousel/fullscreen-image-carousel.js.map +1 -1
  78. package/fullscreen-image-carousel/types.d.ts +37 -0
  79. package/index.js +1 -1
  80. package/masthead/masthead.js +1 -1
  81. package/masthead/masthead.js.map +1 -1
  82. package/masthead/sgds-day.css +519 -59
  83. package/masthead/sgds-night.css +513 -53
  84. package/modal-v2/modal-v2.d.ts +2 -2
  85. package/modal-v2/modal-v2.js.map +1 -1
  86. package/modal-v2/slots/card.js +1 -1
  87. package/modal-v2/slots/card.js.map +1 -1
  88. package/modal-v2/slots/slot-styles.d.ts +4 -0
  89. package/modal-v2/slots/slot-styles.js +1 -1
  90. package/modal-v2/slots/slot-styles.js.map +1 -1
  91. package/modal-v2/slots/slot-styles_ayb9il.css +33 -0
  92. package/modal-v2/types.d.ts +5 -0
  93. package/navbar/menu.d.ts +2 -1
  94. package/navbar/menu.js +1 -1
  95. package/navbar/menu.js.map +1 -1
  96. package/navbar/menu.styles.js +1 -1
  97. package/navbar/menu.styles.js.map +1 -1
  98. package/{cjs/navbar/menu.styles_gdpqc.css → navbar/menu.styles_zkjexa.css} +1 -1
  99. package/navbar/navbar-items.js +1 -1
  100. package/navbar/navbar-items.js.map +1 -1
  101. package/navbar/navbar-items.styles.js +1 -1
  102. package/navbar/navbar-items.styles.js.map +1 -1
  103. package/navbar/{navbar-items.styles_1b1zx.css → navbar-items.styles_1klnd8i.css} +3 -3
  104. package/navbar/navbar-logo-data.js +1 -1
  105. package/navbar/navbar-logo-data.js.map +1 -1
  106. package/package.json +2 -1
  107. package/theme/index.js +1 -1
  108. package/theme/styles/sportsg-orange.css +779 -0
  109. package/theme/styles/vica.css +840 -0
  110. package/theme/styles/websg.css +840 -0
  111. package/theme/styles/wise.css +840 -0
  112. package/theme/styles/wogaa.css +840 -0
  113. package/theme/theme-provider/breakpoint.js +1 -1
  114. package/theme/theme-provider/breakpoint.js.map +1 -1
  115. package/theme/theme-provider/hooks.d.ts +1 -0
  116. package/theme/theme-provider/hooks.js +1 -1
  117. package/theme/theme-provider/hooks.js.map +1 -1
  118. package/theme/theme-provider/index.js +1 -1
  119. package/theme/theme-provider/index.js.map +1 -1
  120. package/theme/theme-provider/preset.d.ts +2 -0
  121. package/theme/theme-provider/types.d.ts +8 -1
  122. package/theme/types.d.ts +9 -1
  123. package/theme/types.js +1 -1
  124. package/theme/types.js.map +1 -1
  125. package/cjs/file-download/file-list-card/file-list-card.styles_18j2gut.css +0 -16
  126. package/cjs/modal-v2/slots/slot-styles_10ut1v7.css +0 -30
  127. package/file-download/file-list-card/file-list-card.styles_18j2gut.css +0 -16
  128. package/modal-v2/slots/slot-styles_10ut1v7.css +0 -30
@@ -1,2 +1,2 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ChevronUpIcon as i}from"@lifesg/react-icons/chevron-up";import{useSpring as a,animated as r}from"@react-spring/web";import n from"clsx";import{forwardRef as l,useRef as s,useContext as o,useState as d,useImperativeHandle as c,useEffect as m}from"react";import{useResizeDetector as p}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as u}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as f}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{AccordionContext as h}from"./accordion-context.js";import{container as x,containerExpanded as v,chevronIcon as j,iconContainer as g,iconContainerExpanded as b,expandCollapseButton as N,expandCollapseButtonExpanded as y,expandCollapseButtonCollapsible as $,expandable as C,contentContainer as D,title as I,titleSmall as S}from"./accordion-item.styles.js";const k=l((function({title:l,children:k,type:w="default",collapsible:z=!0,className:A,id:E,expanded:H,"data-testid":L="accordion-item"},O){var q;const B=s(null),{expandAll:F,itemHeadingLevel:G,onItemStateChange:J,itemState:K,onItemDeregister:M}=o(h),[P,Q]=d(!1),R=f(),T=`${R}-content`,{height:U,ref:V}=p(),W=null!==(q=K[R])&&void 0!==q?q:!z||(null!=H?H:F);c(O,(()=>Object.assign(B.current,{expand(){J(R,!0)},collapse(){J(R,!1)},isExpanded:()=>W})),[W]),m((()=>(Q(!0),()=>null==M?void 0:M(R))),[]),m((()=>{J(R,!z||(null!=H?H:F))}),[F,H,z]);const X=e=>{e.preventDefault(),J(R,!W)},Y=a({height:W?U:0});return e("div",{"data-testid":L,className:n(x,W&&v,A),id:E,ref:B,children:[t("h3",{"aria-level":G,children:e("button",{"data-testid":`${L}-expand-collapse-button`,onClick:z?X:void 0,className:n(N,W&&y,z&&$),"aria-controls":T,"aria-disabled":!z,"aria-expanded":W,children:["string"!=typeof l?l:t("span",{"data-testid":`${L}-title`,className:n(I,"small"===w&&S),children:l}),z&&t("span",{"data-testid":`${L}-expand-collapse-icon`,className:n(g,W&&b),children:t(i,{className:j})})]})}),t(r.div,{id:T,className:C,style:P?Y:void 0,"data-testid":`${L}-expandable-container`,inert:u(!W),children:t("div",{ref:V,className:D,"data-testid":"content-container",children:k})})]})}));export{k as AccordionItem};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ChevronUpIcon as i}from"@lifesg/react-icons/chevron-up";import{useSpring as a,animated as n}from"@react-spring/web";import r from"clsx";import{forwardRef as l,useRef as s,useContext as o,useState as d,useImperativeHandle as c,useEffect as m}from"react";import{useResizeDetector as p}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as u}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as f}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{AccordionContext as h}from"./accordion-context.js";import{container as x,containerExpanded as v,chevronIcon as g,iconContainer as j,iconContainerExpanded as b,expandCollapseButton as N,expandCollapseButtonExpanded as y,expandCollapseButtonCollapsible as $,expandable as C,contentContainer as D,title as E,titleSmall as I}from"./accordion-item.styles.js";const S=l((function({title:l,children:S,type:k="default",collapsible:w=!0,className:z,id:A,expanded:H,onExpandChange:L,"data-testid":O="accordion-item"},q){var B;const F=s(null),{expandAll:G,itemHeadingLevel:J,onItemStateChange:K,itemState:M,onItemDeregister:P}=o(h),[Q,R]=d(!1),T=f(),U=`${T}-content`,{height:V,ref:W}=p(),X=void 0!==L,Y=X?!w||null!=H&&H:null!==(B=M[T])&&void 0!==B?B:!w||(null!=H?H:G);c(q,(()=>Object.assign(F.current,{expand(){X?null==L||L(!0):K(T,!0)},collapse(){X?null==L||L(!1):K(T,!1)},isExpanded:()=>Y})),[Y]),m((()=>(R(!0),()=>null==P?void 0:P(T))),[]),m((()=>{X&&K(T,!w||null!=H&&H)}),[H,w]),m((()=>{X||K(T,!w||(null!=H?H:G))}),[G,H,w]),m((()=>{if(!X||!Q)return;const e=!w||G;e!==H&&(null==L||L(e))}),[G]);const Z=e=>{e.preventDefault(),X?null==L||L(!Y):K(T,!Y)},_=a({height:Y?V:0});return e("div",{"data-testid":O,className:r(x,Y&&v,z),id:A,ref:F,children:[t("h3",{"aria-level":J,children:e("button",{"data-testid":`${O}-expand-collapse-button`,onClick:w?Z:void 0,className:r(N,Y&&y,w&&$),"aria-controls":U,"aria-disabled":!w,"aria-expanded":Y,children:["string"!=typeof l?l:t("span",{"data-testid":`${O}-title`,className:r(E,"small"===k&&I),children:l}),w&&t("span",{"data-testid":`${O}-expand-collapse-icon`,className:r(j,Y&&b),children:t(i,{className:g})})]})}),t(n.div,{id:U,className:C,style:Q?_:void 0,"data-testid":`${O}-expandable-container`,inert:u(!Y),children:t("div",{ref:W,className:D,"data-testid":"content-container",children:S})})]})}));export{S as AccordionItem};
2
2
  //# sourceMappingURL=accordion-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport * as styles from \"./accordion-item.styles\";\nimport type {\n AccordionItemApi,\n AccordionItemHandle,\n AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n {\n title,\n children,\n type = \"default\",\n collapsible = true,\n className,\n id,\n expanded: expandedControlled,\n \"data-testid\": testId = \"accordion-item\",\n }: AccordionItemProps,\n ref: React.Ref<AccordionItemHandle>\n) {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const elementRef = useRef<HTMLDivElement>(null);\n const {\n expandAll,\n itemHeadingLevel,\n onItemStateChange,\n itemState,\n onItemDeregister,\n } = useContext(AccordionContext);\n const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const { height, ref: resizeDetectorRef } = useResizeDetector();\n const expanded =\n itemState[internalId] ??\n (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, AccordionItemApi>(\n elementRef.current!,\n {\n expand(): void {\n onItemStateChange(internalId, true);\n },\n collapse(): void {\n onItemStateChange(internalId, false);\n },\n isExpanded() {\n return expanded;\n },\n }\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [expanded]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setHasFirstLoad(true);\n\n return () => onItemDeregister?.(internalId);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n onItemStateChange(\n internalId,\n collapsible ? expandedControlled ?? expandAll : true\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandAll, expandedControlled, collapsible]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onItemStateChange(internalId, !expanded);\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n // React spring animation configuration\n const resizeHeight = {\n height: expanded ? height : 0,\n };\n const expandableStyles = useSpring(resizeHeight);\n\n const renderContent = () => {\n return (\n <animated.div\n id={contentId}\n className={styles.expandable}\n style={hasFirstLoad ? expandableStyles : undefined}\n data-testid={`${testId}-expandable-container`}\n inert={inertValue(!expanded)}\n >\n <div\n ref={resizeDetectorRef}\n className={styles.contentContainer}\n data-testid=\"content-container\"\n >\n {children}\n </div>\n </animated.div>\n );\n };\n\n const renderTitleText = () => {\n if (typeof title !== \"string\") {\n return title;\n }\n\n return (\n <span\n data-testid={`${testId}-title`}\n className={clsx(\n styles.title,\n type === \"small\" && styles.titleSmall\n )}\n >\n {title}\n </span>\n );\n };\n\n const renderTitle = () => {\n return (\n <h3 aria-level={itemHeadingLevel}>\n <button\n data-testid={`${testId}-expand-collapse-button`}\n onClick={\n collapsible ? handleExpandCollapseClick : undefined\n }\n className={clsx(\n styles.expandCollapseButton,\n expanded && styles.expandCollapseButtonExpanded,\n collapsible && styles.expandCollapseButtonCollapsible\n )}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={expanded}\n >\n {renderTitleText()}\n {collapsible && (\n <span\n data-testid={`${testId}-expand-collapse-icon`}\n className={clsx(\n styles.iconContainer,\n expanded && styles.iconContainerExpanded\n )}\n >\n <ChevronUpIcon className={styles.chevronIcon} />\n </span>\n )}\n </button>\n </h3>\n );\n };\n\n return (\n <div\n data-testid={testId}\n className={clsx(\n styles.container,\n expanded && styles.containerExpanded,\n className\n )}\n id={id}\n ref={elementRef}\n >\n {renderTitle()}\n {renderContent()}\n </div>\n );\n}\n\nexport const AccordionItem = forwardRef<\n AccordionItemHandle,\n AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","expandableStyles","useSpring","_jsxs","clsx","styles.container","styles.containerExpanded","_jsx","onClick","undefined","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","styles.expandCollapseButtonCollapsible","styles.title","styles.titleSmall","styles.iconContainer","styles.iconContainerExpanded","ChevronUpIcon","styles.chevronIcon","animated","div","styles.expandable","style","inert","inertValue","styles.contentContainer"],"mappings":"igCA0MaA,EAAgBC,GAlL7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAWC,IACRC,EAAcC,GAAmBC,GAAkB,GACpDC,EAAaC,IACbC,EAAY,GAAGF,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,IACrCrB,EACmB,QAArBsB,EAAAb,EAAUO,UAAW,IAAAM,EAAAA,GACpBzB,IAAcI,QAAAA,EAAsBK,GAEzCiB,EACIpB,GACA,IACIqB,OAAOC,OACHrB,EAAWsB,QACX,CACI,MAAAC,GACInB,EAAkBQ,GAAY,EAClC,EACA,QAAAY,GACIpB,EAAkBQ,GAAY,EAClC,EACAa,WAAU,IACC7B,KAKvB,CAACA,IAML8B,GAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KAEjC,IAEHc,GAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GAEF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMkC,EAA6BC,IAC/BA,EAAMC,iBACNzB,EAAkBQ,GAAahB,EAAS,EAUtCkC,EAAmBC,EAHJ,CACjBhB,OAAQnB,EAAWmB,EAAS,IA4EhC,OACIiB,EAAA,MAAA,CAAA,cACiBlC,EACbJ,UAAWuC,EACPC,EACAtC,GAAYuC,EACZzC,GAEJC,GAAIA,EACJI,IAAKC,EAAUT,SAAA,CAzCf6C,EAAA,KAAA,CAAA,aAAgBjC,WACZ6B,EAAA,SAAA,CAAA,cACiB,GAAGlC,2BAChBuC,QACI5C,EAAckC,OAA4BW,EAE9C5C,UAAWuC,EACPM,EACA3C,GAAY4C,EACZ/C,GAAegD,mBAEJ3B,EAAS,iBACRrB,kBACDG,EAAQL,SAAA,CAhCd,iBAAVD,EACAA,EAIP8C,EAAA,OAAA,CAAA,cACiB,GAAGtC,UAChBJ,UAAWuC,EACPS,EACS,UAATlD,GAAoBmD,GACvBpD,SAEAD,IAuBIG,GACG2C,wBACiB,GAAGtC,yBAChBJ,UAAWuC,EACPW,EACAhD,GAAYiD,GACftD,SAED6C,EAACU,EAAa,CAACpD,UAAWqD,WA9D1CX,EAACY,EAASC,IAAG,CACTtD,GAAImB,EACJpB,UAAWwD,EACXC,MAAO1C,EAAeqB,OAAmBQ,EAAS,cACrC,GAAGxC,yBAChBsD,MAAOC,GAAYzD,GAASL,SAE5B6C,EAAA,MAAA,CACIrC,IAAKiB,EACLtB,UAAW4D,EAAuB,cACtB,oBAAmB/D,SAE9BA,QAyErB"}
1
+ {"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport * as styles from \"./accordion-item.styles\";\nimport type {\n AccordionItemApi,\n AccordionItemHandle,\n AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n {\n title,\n children,\n type = \"default\",\n collapsible = true,\n className,\n id,\n expanded: expandedControlled,\n onExpandChange,\n \"data-testid\": testId = \"accordion-item\",\n }: AccordionItemProps,\n ref: React.Ref<AccordionItemHandle>\n) {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const elementRef = useRef<HTMLDivElement>(null);\n const {\n expandAll,\n itemHeadingLevel,\n onItemStateChange,\n itemState,\n onItemDeregister,\n } = useContext(AccordionContext);\n const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const { height, ref: resizeDetectorRef } = useResizeDetector();\n const isControlled = onExpandChange !== undefined;\n const expanded = isControlled\n ? collapsible\n ? expandedControlled ?? false\n : true\n : itemState[internalId] ??\n (collapsible ? expandedControlled ?? expandAll : true);\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, AccordionItemApi>(\n elementRef.current!,\n {\n expand(): void {\n if (isControlled) {\n onExpandChange?.(true);\n } else {\n onItemStateChange(internalId, true);\n }\n },\n collapse(): void {\n if (isControlled) {\n onExpandChange?.(false);\n } else {\n onItemStateChange(internalId, false);\n }\n },\n isExpanded() {\n return expanded;\n },\n }\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [expanded]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setHasFirstLoad(true);\n\n return () => onItemDeregister?.(internalId);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled mode: keep parent itemState in sync so \"Show all\"/\"Hide all\" label stays accurate\n useEffect(() => {\n if (isControlled) {\n onItemStateChange(\n internalId,\n collapsible ? expandedControlled ?? false : true\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandedControlled, collapsible]);\n\n // Uncontrolled mode: sync state when expandAll button or the hint prop changes\n useEffect(() => {\n if (!isControlled) {\n onItemStateChange(\n internalId,\n collapsible ? expandedControlled ?? expandAll : true\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandAll, expandedControlled, collapsible]);\n\n // Controlled mode: forward expandAll button changes to the caller\n useEffect(() => {\n if (!isControlled || !hasFirstLoad) return;\n const next = collapsible ? expandAll : true;\n if (next !== expandedControlled) {\n onExpandChange?.(next);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandAll]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n if (isControlled) {\n onExpandChange?.(!expanded);\n } else {\n onItemStateChange(internalId, !expanded);\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n // React spring animation configuration\n const resizeHeight = {\n height: expanded ? height : 0,\n };\n const expandableStyles = useSpring(resizeHeight);\n\n const renderContent = () => {\n return (\n <animated.div\n id={contentId}\n className={styles.expandable}\n style={hasFirstLoad ? expandableStyles : undefined}\n data-testid={`${testId}-expandable-container`}\n inert={inertValue(!expanded)}\n >\n <div\n ref={resizeDetectorRef}\n className={styles.contentContainer}\n data-testid=\"content-container\"\n >\n {children}\n </div>\n </animated.div>\n );\n };\n\n const renderTitleText = () => {\n if (typeof title !== \"string\") {\n return title;\n }\n\n return (\n <span\n data-testid={`${testId}-title`}\n className={clsx(\n styles.title,\n type === \"small\" && styles.titleSmall\n )}\n >\n {title}\n </span>\n );\n };\n\n const renderTitle = () => {\n return (\n <h3 aria-level={itemHeadingLevel}>\n <button\n data-testid={`${testId}-expand-collapse-button`}\n onClick={\n collapsible ? handleExpandCollapseClick : undefined\n }\n className={clsx(\n styles.expandCollapseButton,\n expanded && styles.expandCollapseButtonExpanded,\n collapsible && styles.expandCollapseButtonCollapsible\n )}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={expanded}\n >\n {renderTitleText()}\n {collapsible && (\n <span\n data-testid={`${testId}-expand-collapse-icon`}\n className={clsx(\n styles.iconContainer,\n expanded && styles.iconContainerExpanded\n )}\n >\n <ChevronUpIcon className={styles.chevronIcon} />\n </span>\n )}\n </button>\n </h3>\n );\n };\n\n return (\n <div\n data-testid={testId}\n className={clsx(\n styles.container,\n expanded && styles.containerExpanded,\n className\n )}\n id={id}\n ref={elementRef}\n >\n {renderTitle()}\n {renderContent()}\n </div>\n );\n}\n\nexport const AccordionItem = forwardRef<\n AccordionItemHandle,\n AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","onExpandChange","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","isControlled","undefined","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","next","handleExpandCollapseClick","event","preventDefault","expandableStyles","useSpring","_jsxs","clsx","styles.container","styles.containerExpanded","_jsx","onClick","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","styles.expandCollapseButtonCollapsible","styles.title","styles.titleSmall","styles.iconContainer","styles.iconContainerExpanded","ChevronUpIcon","styles.chevronIcon","animated","div","styles.expandable","style","inert","inertValue","styles.contentContainer"],"mappings":"igCAmPaA,EAAgBC,GA3N7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EAAkBC,eAC5BA,EACA,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAWC,IACRC,EAAcC,GAAmBC,GAAkB,GACpDC,EAAaC,IACbC,EAAY,GAAGF,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,IACrCC,OAAkCC,IAAnBtB,EACfF,EAAWuB,GACX1B,GACII,SAAAA,EAEiB,QAArBwB,EAAAf,EAAUO,UAAW,IAAAQ,EAAAA,GACpB5B,IAAcI,QAAAA,EAAsBM,GAE3CmB,EACItB,GACA,IACIuB,OAAOC,OACHvB,EAAWwB,QACX,CACI,MAAAC,GACQP,EACArB,SAAAA,GAAiB,GAEjBO,EAAkBQ,GAAY,EAEtC,EACA,QAAAc,GACQR,EACArB,SAAAA,GAAiB,GAEjBO,EAAkBQ,GAAY,EAEtC,EACAe,WAAU,IACChC,KAKvB,CAACA,IAMLiC,GAAU,KACNlB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KAEjC,IAGHgB,GAAU,KACFV,GACAd,EACIQ,GACApB,GAAcI,SAAAA,EAEtB,GAED,CAACA,EAAoBJ,IAGxBoC,GAAU,KACDV,GACDd,EACIQ,GACApB,IAAcI,QAAAA,EAAsBM,GAE5C,GAED,CAACA,EAAWN,EAAoBJ,IAGnCoC,GAAU,KACN,IAAKV,IAAiBT,EAAc,OACpC,MAAMoB,GAAOrC,GAAcU,EACvB2B,IAASjC,IACTC,SAAAA,EAAiBgC,GACrB,GAED,CAAC3B,IAMJ,MAAM4B,EAA6BC,IAC/BA,EAAMC,iBACFd,EACArB,SAAAA,GAAkBF,GAElBS,EAAkBQ,GAAajB,EACnC,EAUEsC,EAAmBC,EAHJ,CACjBnB,OAAQpB,EAAWoB,EAAS,IA4EhC,OACIoB,EAAA,MAAA,CAAA,cACiBrC,EACbL,UAAW2C,EACPC,EACA1C,GAAY2C,EACZ7C,GAEJC,GAAIA,EACJK,IAAKC,EAAUV,SAAA,CAzCfiD,EAAA,KAAA,CAAA,aAAgBpC,WACZgC,EAAA,SAAA,CAAA,cACiB,GAAGrC,2BAChB0C,QACIhD,EAAcsC,OAA4BX,EAE9C1B,UAAW2C,EACPK,EACA9C,GAAY+C,EACZlD,GAAemD,mBAEJ7B,EAAS,iBACRtB,kBACDG,EAAQL,SAAA,CAhCd,iBAAVD,EACAA,EAIPkD,EAAA,OAAA,CAAA,cACiB,GAAGzC,UAChBL,UAAW2C,EACPQ,EACS,UAATrD,GAAoBsD,GACvBvD,SAEAD,IAuBIG,GACG+C,wBACiB,GAAGzC,yBAChBL,UAAW2C,EACPU,EACAnD,GAAYoD,GACfzD,SAEDiD,EAACS,EAAa,CAACvD,UAAWwD,WA9D1CV,EAACW,EAASC,IAAG,CACTzD,GAAIoB,EACJrB,UAAW2D,EACXC,MAAO5C,EAAewB,OAAmBd,EAAS,cACrC,GAAGrB,yBAChBwD,MAAOC,GAAY5D,GAASL,SAE5BiD,EAAA,MAAA,CACIxC,IAAKiB,EACLvB,UAAW+D,EAAuB,cACtB,oBAAmBlE,SAE9BA,QAyErB"}
@@ -62,6 +62,13 @@ export interface AccordionItemProps {
62
62
  * @default true
63
63
  */
64
64
  collapsible?: boolean | undefined;
65
+ /**
66
+ * Called when the user toggles this item or the parent "Show all" / "Hide all"
67
+ * button fires. When provided, the item enters **controlled mode** — the caller
68
+ * must update the `expanded` prop in response. Without this prop, the item
69
+ * manages its own state internally (uncontrolled mode).
70
+ */
71
+ onExpandChange?: ((expanded: boolean) => void) | undefined;
65
72
  }
66
73
  /** Imperative API available on the `Accordion.Item` ref. */
67
74
  export interface AccordionItemApi {
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-up"),a=require("@react-spring/web"),n=require("clsx"),i=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),s=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./accordion-context.js"),c=require("./accordion-item.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(n);const p=i.forwardRef((function({title:n,children:o,type:p="default",collapsible:x=!0,className:f,id:m,expanded:j,"data-testid":h="accordion-item"},v){var q;const b=i.useRef(null),{expandAll:g,itemHeadingLevel:C,onItemStateChange:y,itemState:N,onItemDeregister:I}=i.useContext(d.AccordionContext),[E,S]=i.useState(!1),$=l.useId(),A=`${$}-content`,{height:B,ref:D}=r.useResizeDetector(),R=null!==(q=N[$])&&void 0!==q?q:!x||(null!=j?j:g);i.useImperativeHandle(v,(()=>Object.assign(b.current,{expand(){y($,!0)},collapse(){y($,!1)},isExpanded:()=>R})),[R]),i.useEffect((()=>(S(!0),()=>null==I?void 0:I($))),[]),i.useEffect((()=>{y($,!x||(null!=j?j:g))}),[g,j,x]);const w=e=>{e.preventDefault(),y($,!R)},z={height:R?B:0},H=a.useSpring(z);return e.jsxs("div",{"data-testid":h,className:u.default(c.container,R&&c.containerExpanded,f),id:m,ref:b,children:[e.jsx("h3",{"aria-level":C,children:e.jsxs("button",{"data-testid":`${h}-expand-collapse-button`,onClick:x?w:void 0,className:u.default(c.expandCollapseButton,R&&c.expandCollapseButtonExpanded,x&&c.expandCollapseButtonCollapsible),"aria-controls":A,"aria-disabled":!x,"aria-expanded":R,children:["string"!=typeof n?n:e.jsx("span",{"data-testid":`${h}-title`,className:u.default(c.title,"small"===p&&c.titleSmall),children:n}),x&&e.jsx("span",{"data-testid":`${h}-expand-collapse-icon`,className:u.default(c.iconContainer,R&&c.iconContainerExpanded),children:e.jsx(t.ChevronUpIcon,{className:c.chevronIcon})})]})}),e.jsx(a.animated.div,{id:A,className:c.expandable,style:E?H:void 0,"data-testid":`${h}-expandable-container`,inert:s.inertValue(!R),children:e.jsx("div",{ref:D,className:c.contentContainer,"data-testid":"content-container",children:o})})]})}));exports.AccordionItem=p;
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-up"),a=require("@react-spring/web"),n=require("clsx"),i=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),l=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./accordion-context.js"),c=require("./accordion-item.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(n);const p=i.forwardRef((function({title:n,children:o,type:p="default",collapsible:x=!0,className:f,id:m,expanded:h,onExpandChange:j,"data-testid":v="accordion-item"},q){var g;const C=i.useRef(null),{expandAll:b,itemHeadingLevel:E,onItemStateChange:y,itemState:N,onItemDeregister:I}=i.useContext(d.AccordionContext),[S,$]=i.useState(!1),A=s.useId(),B=`${A}-content`,{height:D,ref:R}=r.useResizeDetector(),w=void 0!==j,z=w?!x||null!=h&&h:null!==(g=N[A])&&void 0!==g?g:!x||(null!=h?h:b);i.useImperativeHandle(q,(()=>Object.assign(C.current,{expand(){w?null==j||j(!0):y(A,!0)},collapse(){w?null==j||j(!1):y(A,!1)},isExpanded:()=>z})),[z]),i.useEffect((()=>($(!0),()=>null==I?void 0:I(A))),[]),i.useEffect((()=>{w&&y(A,!x||null!=h&&h)}),[h,x]),i.useEffect((()=>{w||y(A,!x||(null!=h?h:b))}),[b,h,x]),i.useEffect((()=>{if(!w||!S)return;const e=!x||b;e!==h&&(null==j||j(e))}),[b]);const H=e=>{e.preventDefault(),w?null==j||j(!z):y(A,!z)},k={height:z?D:0},L=a.useSpring(k);return e.jsxs("div",{"data-testid":v,className:u.default(c.container,z&&c.containerExpanded,f),id:m,ref:C,children:[e.jsx("h3",{"aria-level":E,children:e.jsxs("button",{"data-testid":`${v}-expand-collapse-button`,onClick:x?H:void 0,className:u.default(c.expandCollapseButton,z&&c.expandCollapseButtonExpanded,x&&c.expandCollapseButtonCollapsible),"aria-controls":B,"aria-disabled":!x,"aria-expanded":z,children:["string"!=typeof n?n:e.jsx("span",{"data-testid":`${v}-title`,className:u.default(c.title,"small"===p&&c.titleSmall),children:n}),x&&e.jsx("span",{"data-testid":`${v}-expand-collapse-icon`,className:u.default(c.iconContainer,z&&c.iconContainerExpanded),children:e.jsx(t.ChevronUpIcon,{className:c.chevronIcon})})]})}),e.jsx(a.animated.div,{id:B,className:c.expandable,style:S?L:void 0,"data-testid":`${v}-expandable-container`,inert:l.inertValue(!z),children:e.jsx("div",{ref:R,className:c.contentContainer,"data-testid":"content-container",children:o})})]})}));exports.AccordionItem=p;
2
2
  //# sourceMappingURL=accordion-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport * as styles from \"./accordion-item.styles\";\nimport type {\n AccordionItemApi,\n AccordionItemHandle,\n AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n {\n title,\n children,\n type = \"default\",\n collapsible = true,\n className,\n id,\n expanded: expandedControlled,\n \"data-testid\": testId = \"accordion-item\",\n }: AccordionItemProps,\n ref: React.Ref<AccordionItemHandle>\n) {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const elementRef = useRef<HTMLDivElement>(null);\n const {\n expandAll,\n itemHeadingLevel,\n onItemStateChange,\n itemState,\n onItemDeregister,\n } = useContext(AccordionContext);\n const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const { height, ref: resizeDetectorRef } = useResizeDetector();\n const expanded =\n itemState[internalId] ??\n (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, AccordionItemApi>(\n elementRef.current!,\n {\n expand(): void {\n onItemStateChange(internalId, true);\n },\n collapse(): void {\n onItemStateChange(internalId, false);\n },\n isExpanded() {\n return expanded;\n },\n }\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [expanded]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setHasFirstLoad(true);\n\n return () => onItemDeregister?.(internalId);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n onItemStateChange(\n internalId,\n collapsible ? expandedControlled ?? expandAll : true\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandAll, expandedControlled, collapsible]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onItemStateChange(internalId, !expanded);\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n // React spring animation configuration\n const resizeHeight = {\n height: expanded ? height : 0,\n };\n const expandableStyles = useSpring(resizeHeight);\n\n const renderContent = () => {\n return (\n <animated.div\n id={contentId}\n className={styles.expandable}\n style={hasFirstLoad ? expandableStyles : undefined}\n data-testid={`${testId}-expandable-container`}\n inert={inertValue(!expanded)}\n >\n <div\n ref={resizeDetectorRef}\n className={styles.contentContainer}\n data-testid=\"content-container\"\n >\n {children}\n </div>\n </animated.div>\n );\n };\n\n const renderTitleText = () => {\n if (typeof title !== \"string\") {\n return title;\n }\n\n return (\n <span\n data-testid={`${testId}-title`}\n className={clsx(\n styles.title,\n type === \"small\" && styles.titleSmall\n )}\n >\n {title}\n </span>\n );\n };\n\n const renderTitle = () => {\n return (\n <h3 aria-level={itemHeadingLevel}>\n <button\n data-testid={`${testId}-expand-collapse-button`}\n onClick={\n collapsible ? handleExpandCollapseClick : undefined\n }\n className={clsx(\n styles.expandCollapseButton,\n expanded && styles.expandCollapseButtonExpanded,\n collapsible && styles.expandCollapseButtonCollapsible\n )}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={expanded}\n >\n {renderTitleText()}\n {collapsible && (\n <span\n data-testid={`${testId}-expand-collapse-icon`}\n className={clsx(\n styles.iconContainer,\n expanded && styles.iconContainerExpanded\n )}\n >\n <ChevronUpIcon className={styles.chevronIcon} />\n </span>\n )}\n </button>\n </h3>\n );\n };\n\n return (\n <div\n data-testid={testId}\n className={clsx(\n styles.container,\n expanded && styles.containerExpanded,\n className\n )}\n id={id}\n ref={elementRef}\n >\n {renderTitle()}\n {renderContent()}\n </div>\n );\n}\n\nexport const AccordionItem = forwardRef<\n AccordionItemHandle,\n AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","resizeHeight","expandableStyles","useSpring","_jsxs","clsx","styles.container","styles.containerExpanded","_jsx","onClick","undefined","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","styles.expandCollapseButtonCollapsible","styles.title","styles.titleSmall","styles.iconContainer","styles.iconContainerExpanded","ChevronUpIcon","styles.chevronIcon","animated","div","styles.expandable","style","inert","inertValue","styles.contentContainer"],"mappings":"moBA0MaA,EAAgBC,EAAAA,YAlL7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAAA,OAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAAA,WAAWC,qBACRC,EAAcC,GAAmBC,EAAAA,UAAkB,GACpDC,EAAaC,EAAAA,QACbC,EAAY,GAAGF,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,EAAAA,oBACrCrB,EACmB,QAArBsB,EAAAb,EAAUO,UAAW,IAAAM,EAAAA,GACpBzB,IAAcI,QAAAA,EAAsBK,GAEzCiB,EAAAA,oBACIpB,GACA,IACIqB,OAAOC,OACHrB,EAAWsB,QACX,CACI,MAAAC,GACInB,EAAkBQ,GAAY,EAClC,EACA,QAAAY,GACIpB,EAAkBQ,GAAY,EAClC,EACAa,WAAU,IACC7B,KAKvB,CAACA,IAML8B,EAAAA,WAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KAEjC,IAEHc,EAAAA,WAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GAEF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMkC,EAA6BC,IAC/BA,EAAMC,iBACNzB,EAAkBQ,GAAahB,EAAS,EAOtCkC,EAAe,CACjBf,OAAQnB,EAAWmB,EAAS,GAE1BgB,EAAmBC,EAAAA,UAAUF,GA0EnC,OACIG,EAAAA,KAAA,MAAA,CAAA,cACiBnC,EACbJ,UAAWwC,EAAAA,QACPC,YACAvC,GAAYwC,EAAAA,kBACZ1C,GAEJC,GAAIA,EACJI,IAAKC,EAAUT,SAAA,CAzCf8C,EAAAA,IAAA,KAAA,CAAA,aAAgBlC,WACZ8B,OAAA,SAAA,CAAA,cACiB,GAAGnC,2BAChBwC,QACI7C,EAAckC,OAA4BY,EAE9C7C,UAAWwC,EAAAA,QACPM,EAAAA,qBACA5C,GAAY6C,+BACZhD,GAAeiD,EAAAA,iDAEJ5B,EAAS,iBACRrB,kBACDG,EAAQL,SAAA,CAhCd,iBAAVD,EACAA,EAIP+C,EAAAA,IAAA,OAAA,CAAA,cACiB,GAAGvC,UAChBJ,UAAWwC,EAAAA,QACPS,EAAAA,MACS,UAATnD,GAAoBoD,EAAAA,YACvBrD,SAEAD,IAuBIG,GACG4C,EAAAA,0BACiB,GAAGvC,yBAChBJ,UAAWwC,UACPW,EAAAA,cACAjD,GAAYkD,EAAAA,uBACfvD,SAED8C,EAAAA,IAACU,EAAAA,cAAa,CAACrD,UAAWsD,EAAAA,qBA9D1CX,EAAAA,IAACY,EAAAA,SAASC,IAAG,CACTvD,GAAImB,EACJpB,UAAWyD,EAAAA,WACXC,MAAO3C,EAAesB,OAAmBQ,EAAS,cACrC,GAAGzC,yBAChBuD,MAAOC,EAAAA,YAAY1D,GAASL,SAE5B8C,EAAAA,IAAA,MAAA,CACItC,IAAKiB,EACLtB,UAAW6D,EAAAA,iBAAuB,cACtB,oBAAmBhE,SAE9BA,QAyErB"}
1
+ {"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport * as styles from \"./accordion-item.styles\";\nimport type {\n AccordionItemApi,\n AccordionItemHandle,\n AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n {\n title,\n children,\n type = \"default\",\n collapsible = true,\n className,\n id,\n expanded: expandedControlled,\n onExpandChange,\n \"data-testid\": testId = \"accordion-item\",\n }: AccordionItemProps,\n ref: React.Ref<AccordionItemHandle>\n) {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const elementRef = useRef<HTMLDivElement>(null);\n const {\n expandAll,\n itemHeadingLevel,\n onItemStateChange,\n itemState,\n onItemDeregister,\n } = useContext(AccordionContext);\n const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const { height, ref: resizeDetectorRef } = useResizeDetector();\n const isControlled = onExpandChange !== undefined;\n const expanded = isControlled\n ? collapsible\n ? expandedControlled ?? false\n : true\n : itemState[internalId] ??\n (collapsible ? expandedControlled ?? expandAll : true);\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, AccordionItemApi>(\n elementRef.current!,\n {\n expand(): void {\n if (isControlled) {\n onExpandChange?.(true);\n } else {\n onItemStateChange(internalId, true);\n }\n },\n collapse(): void {\n if (isControlled) {\n onExpandChange?.(false);\n } else {\n onItemStateChange(internalId, false);\n }\n },\n isExpanded() {\n return expanded;\n },\n }\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [expanded]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setHasFirstLoad(true);\n\n return () => onItemDeregister?.(internalId);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled mode: keep parent itemState in sync so \"Show all\"/\"Hide all\" label stays accurate\n useEffect(() => {\n if (isControlled) {\n onItemStateChange(\n internalId,\n collapsible ? expandedControlled ?? false : true\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandedControlled, collapsible]);\n\n // Uncontrolled mode: sync state when expandAll button or the hint prop changes\n useEffect(() => {\n if (!isControlled) {\n onItemStateChange(\n internalId,\n collapsible ? expandedControlled ?? expandAll : true\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandAll, expandedControlled, collapsible]);\n\n // Controlled mode: forward expandAll button changes to the caller\n useEffect(() => {\n if (!isControlled || !hasFirstLoad) return;\n const next = collapsible ? expandAll : true;\n if (next !== expandedControlled) {\n onExpandChange?.(next);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expandAll]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n if (isControlled) {\n onExpandChange?.(!expanded);\n } else {\n onItemStateChange(internalId, !expanded);\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n // React spring animation configuration\n const resizeHeight = {\n height: expanded ? height : 0,\n };\n const expandableStyles = useSpring(resizeHeight);\n\n const renderContent = () => {\n return (\n <animated.div\n id={contentId}\n className={styles.expandable}\n style={hasFirstLoad ? expandableStyles : undefined}\n data-testid={`${testId}-expandable-container`}\n inert={inertValue(!expanded)}\n >\n <div\n ref={resizeDetectorRef}\n className={styles.contentContainer}\n data-testid=\"content-container\"\n >\n {children}\n </div>\n </animated.div>\n );\n };\n\n const renderTitleText = () => {\n if (typeof title !== \"string\") {\n return title;\n }\n\n return (\n <span\n data-testid={`${testId}-title`}\n className={clsx(\n styles.title,\n type === \"small\" && styles.titleSmall\n )}\n >\n {title}\n </span>\n );\n };\n\n const renderTitle = () => {\n return (\n <h3 aria-level={itemHeadingLevel}>\n <button\n data-testid={`${testId}-expand-collapse-button`}\n onClick={\n collapsible ? handleExpandCollapseClick : undefined\n }\n className={clsx(\n styles.expandCollapseButton,\n expanded && styles.expandCollapseButtonExpanded,\n collapsible && styles.expandCollapseButtonCollapsible\n )}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={expanded}\n >\n {renderTitleText()}\n {collapsible && (\n <span\n data-testid={`${testId}-expand-collapse-icon`}\n className={clsx(\n styles.iconContainer,\n expanded && styles.iconContainerExpanded\n )}\n >\n <ChevronUpIcon className={styles.chevronIcon} />\n </span>\n )}\n </button>\n </h3>\n );\n };\n\n return (\n <div\n data-testid={testId}\n className={clsx(\n styles.container,\n expanded && styles.containerExpanded,\n className\n )}\n id={id}\n ref={elementRef}\n >\n {renderTitle()}\n {renderContent()}\n </div>\n );\n}\n\nexport const AccordionItem = forwardRef<\n AccordionItemHandle,\n AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","onExpandChange","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","isControlled","undefined","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","next","handleExpandCollapseClick","event","preventDefault","resizeHeight","expandableStyles","useSpring","_jsxs","clsx","styles.container","styles.containerExpanded","_jsx","onClick","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","styles.expandCollapseButtonCollapsible","styles.title","styles.titleSmall","styles.iconContainer","styles.iconContainerExpanded","ChevronUpIcon","styles.chevronIcon","animated","div","styles.expandable","style","inert","inertValue","styles.contentContainer"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("../dashed-border/dashed-border.js"),t=require("../markup/markup.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var a=require("../theme/tokens/border.js"),d=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var n=require("./file-download.styles.js"),o=require("./file-list-card/file-list-card.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(i);exports.FileDownload=({id:i,fileItems:u,title:m,description:j,onDownload:h,"data-testid":q,className:p,styleType:x="bordered"})=>{const f=r=>e.__awaiter(void 0,void 0,void 0,(function*(){h&&(yield h(r))})),v="bordered"===x;return r.jsxs(s.DashedBorder,{id:i?`${i}-file-download`:"file-download",className:c.default(n.container,v&&n.containerBordered,p),"data-testid":q,enabled:v,thickness:a.Border["width-040"],radius:l.Radius.sm,colour:d.Colour.border,children:[(m||j)&&r.jsxs("div",{className:n.textContainer,children:[m?"string"==typeof m?r.jsx("p",{className:n.title,children:m}):r.jsx(t.Markup,{className:n.titleContainer,baseTextSize:"heading-xs",children:m}):null,j?"string"==typeof j?r.jsx("p",{className:n.description,children:j}):r.jsx(t.Markup,{className:n.descriptionContainer,baseTextSize:"body-md",children:j}):null]}),r.jsx("ul",{className:n.listWrapper,children:u&&u.length>0&&u.map((e=>r.jsx(o.FileListCard,{fileItem:e,onDownload:f},e.id)))})]})};
1
+ "use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("../dashed-border/dashed-border.js"),t=require("../markup/markup.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var a=require("../theme/tokens/border.js"),d=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var n=require("./file-download.styles.js"),o=require("./file-list-card/file-list-card.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(i);exports.FileDownload=({id:i,fileItems:u,title:m,description:j,onDownload:h,onClick:q,"data-testid":p,className:x,styleType:f="bordered"})=>{const v=r=>e.__awaiter(void 0,void 0,void 0,(function*(){h&&(yield h(r))})),b="bordered"===f;return r.jsxs(s.DashedBorder,{id:i?`${i}-file-download`:"file-download",className:c.default(n.container,b&&n.containerBordered,x),"data-testid":p,enabled:b,thickness:a.Border["width-040"],radius:l.Radius.sm,colour:d.Colour.border,children:[(m||j)&&r.jsxs("div",{className:n.textContainer,children:[m?"string"==typeof m?r.jsx("p",{className:n.title,children:m}):r.jsx(t.Markup,{className:n.titleContainer,baseTextSize:"heading-xs",children:m}):null,j?"string"==typeof j?r.jsx("p",{className:n.description,children:j}):r.jsx(t.Markup,{className:n.descriptionContainer,baseTextSize:"body-md",children:j}):null]}),r.jsx("ul",{className:n.listWrapper,children:u&&u.length>0&&u.map((e=>r.jsx(o.FileListCard,{fileItem:e,onDownload:v,onClick:q},e.id)))})]})};
2
2
  //# sourceMappingURL=file-download.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a list of downloadable files, optionally grouped under a title and description.\n *\n * Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n * @keywords attachment, document, download, file\n */\nexport const FileDownload = ({\n id,\n fileItems,\n title,\n description,\n onDownload,\n \"data-testid\": testId,\n className,\n styleType = \"bordered\",\n}: FileDownloadProps) => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDownloadItem = async (item: FileItemDownloadProps) => {\n if (onDownload) {\n await onDownload(item);\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderTitle = () => {\n if (!title) {\n return null;\n }\n\n if (typeof title === \"string\") {\n return <p className={styles.title}>{title}</p>;\n }\n\n return (\n <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n {title}\n </Markup>\n );\n };\n\n const renderDescription = () => {\n if (!description) {\n return null;\n }\n\n if (typeof description === \"string\") {\n return <p className={styles.description}>{description}</p>;\n }\n\n return (\n <Markup\n className={styles.descriptionContainer}\n baseTextSize=\"body-md\"\n >\n {description}\n </Markup>\n );\n };\n\n const isBordered = styleType === \"bordered\";\n\n return (\n <DashedBorder\n id={id ? `${id}-file-download` : \"file-download\"}\n className={clsx(\n styles.container,\n isBordered && styles.containerBordered,\n className\n )}\n data-testid={testId}\n enabled={isBordered}\n thickness={Border[\"width-040\"]}\n radius={Radius[\"sm\"]}\n colour={Colour[\"border\"]}\n >\n {(title || description) && (\n <div className={styles.textContainer}>\n {renderTitle()}\n {renderDescription()}\n </div>\n )}\n <ul className={styles.listWrapper}>\n {fileItems &&\n fileItems.length > 0 &&\n fileItems.map((item) => (\n <FileListCard\n key={item.id}\n fileItem={item}\n onDownload={handleDownloadItem}\n />\n ))}\n </ul>\n </DashedBorder>\n );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"85BAiB4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,OAACC,EAAAA,cACGb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWQ,EAAAA,QACPC,EAAAA,UACAJ,GAAcK,oBACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OAACC,SAAA,EAEtBtB,GAASC,IACPS,EAAAA,YAAKN,UAAWmB,EAAAA,wBAnDnBvB,EAIgB,iBAAVA,EACAwB,EAAAA,IAAA,IAAA,CAAGpB,UAAWqB,EAAAA,MAAYH,SAAGtB,IAIpCwB,EAAAA,IAACE,SAAM,CAACtB,UAAWuB,EAAAA,eAAuBC,aAAa,sBAClD5B,IATE,KAeNC,EAIsB,iBAAhBA,EACAuB,EAAAA,IAAA,IAAA,CAAGpB,UAAWyB,EAAAA,YAAkBP,SAAGrB,IAI1CuB,EAAAA,IAACE,SAAM,CACHtB,UAAW0B,EAAAA,qBACXF,aAAa,mBAEZ3B,IAZE,QAuCPuB,EAAAA,UAAIpB,UAAW2B,EAAAA,qBACVhC,GACGA,EAAUiC,OAAS,GACnBjC,EAAUkC,KAAK1B,GACXiB,EAAAA,IAACU,EAAAA,aAAY,CAETC,SAAU5B,EACVL,WAAYI,GAFPC,EAAKT,UAMf"}
1
+ {"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a list of downloadable files, optionally grouped under a title and description.\n *\n * Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n * @keywords attachment, document, download, file\n */\nexport const FileDownload = ({\n id,\n fileItems,\n title,\n description,\n onDownload,\n onClick,\n \"data-testid\": testId,\n className,\n styleType = \"bordered\",\n}: FileDownloadProps) => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDownloadItem = async (item: FileItemDownloadProps) => {\n if (onDownload) {\n await onDownload(item);\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderTitle = () => {\n if (!title) {\n return null;\n }\n\n if (typeof title === \"string\") {\n return <p className={styles.title}>{title}</p>;\n }\n\n return (\n <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n {title}\n </Markup>\n );\n };\n\n const renderDescription = () => {\n if (!description) {\n return null;\n }\n\n if (typeof description === \"string\") {\n return <p className={styles.description}>{description}</p>;\n }\n\n return (\n <Markup\n className={styles.descriptionContainer}\n baseTextSize=\"body-md\"\n >\n {description}\n </Markup>\n );\n };\n\n const isBordered = styleType === \"bordered\";\n\n return (\n <DashedBorder\n id={id ? `${id}-file-download` : \"file-download\"}\n className={clsx(\n styles.container,\n isBordered && styles.containerBordered,\n className\n )}\n data-testid={testId}\n enabled={isBordered}\n thickness={Border[\"width-040\"]}\n radius={Radius[\"sm\"]}\n colour={Colour[\"border\"]}\n >\n {(title || description) && (\n <div className={styles.textContainer}>\n {renderTitle()}\n {renderDescription()}\n </div>\n )}\n <ul className={styles.listWrapper}>\n {fileItems &&\n fileItems.length > 0 &&\n fileItems.map((item) => (\n <FileListCard\n key={item.id}\n fileItem={item}\n onDownload={handleDownloadItem}\n onClick={onClick}\n />\n ))}\n </ul>\n </DashedBorder>\n );\n};\n"],"names":["id","fileItems","title","description","onDownload","onClick","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"85BAiB4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACAC,UACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDP,UACMA,EAAWM,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,OAACC,EAAAA,cACGd,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCO,UAAWQ,EAAAA,QACPC,EAAAA,UACAJ,GAAcK,oBACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OAACC,SAAA,EAEtBvB,GAASC,IACPU,EAAAA,YAAKN,UAAWmB,EAAAA,wBAnDnBxB,EAIgB,iBAAVA,EACAyB,EAAAA,IAAA,IAAA,CAAGpB,UAAWqB,EAAAA,MAAYH,SAAGvB,IAIpCyB,EAAAA,IAACE,SAAM,CAACtB,UAAWuB,EAAAA,eAAuBC,aAAa,sBAClD7B,IATE,KAeNC,EAIsB,iBAAhBA,EACAwB,EAAAA,IAAA,IAAA,CAAGpB,UAAWyB,EAAAA,YAAkBP,SAAGtB,IAI1CwB,EAAAA,IAACE,SAAM,CACHtB,UAAW0B,EAAAA,qBACXF,aAAa,mBAEZ5B,IAZE,QAuCPwB,EAAAA,UAAIpB,UAAW2B,EAAAA,qBACVjC,GACGA,EAAUkC,OAAS,GACnBlC,EAAUmC,KAAK1B,GACXiB,EAAAA,IAACU,eAAY,CAETC,SAAU5B,EACVN,WAAYK,EACZJ,QAASA,GAHJK,EAAKV,UAOf"}
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),t=require("@lifesg/react-icons/exclamation-circle-fill"),a=require("clsx"),s=require("react"),n=require("../../button/button.js"),l=require("../../file-upload/helper.js"),c=require("../../shared/image-with-fallback/image-with-fallback.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var o=require("../../util/string-helper.js");require("@react-aria/live-announcer");var d=require("../../theme/utils/use-media-query.js"),u=require("./file-list-card.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=m(a);const j=s.memo((({fileItem:a,onDownload:m})=>{const{id:j,name:x,size:g,errorMessage:f,thumbnailImageDataUrl:v,truncateText:q=!0,ready:b=!0}=a,[N,p]=s.useState(!1),[S,y]=s.useState(!1),w=l.FileUploadHelper.formatFileSizeDisplay(g),F=d.useMaxWidthMediaQuery("sm"),[I,k]=s.useState(),C=s.useRef(null);s.useEffect((()=>{C.current&&k(F?E(x):x)}),[x,F]);const E=e=>{if(!q)return e;const r=C&&C.current?C.current.getBoundingClientRect().width:0;return o.StringHelper.truncateTwoLines(e,r,16,1.5)},M=()=>r.jsxs(r.Fragment,{children:[r.jsx("div",{className:u.itemNameText,ref:C,children:I}),S&&r.jsxs("div",{className:u.desktopErrorMessage,children:[r.jsx(t.ExclamationCircleFillIcon,{className:u.errorIcon}),f||"Something went wrong"]})]});return r.jsx("li",{className:u.item,"data-testid":j,children:r.jsxs("div",{className:h.default(u.box,S&&u.boxError),onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(b&&!N){p(!0);try{y(!1),yield m(a)}catch(e){y(!0)}finally{p(!1)}}})),children:[(()=>{let e;var i;return v?(i=v,e=r.jsxs(r.Fragment,{children:[r.jsx("div",{className:u.thumbnailContainer,"data-testid":`${j}-thumbnail`,children:r.jsx(c.ImageWithFallback,{className:u.thumbnail,"data-testid":`${j}-thumbnail-image`,src:i})}),r.jsxs("div",{className:u.extendedNameSection,children:[r.jsx("div",{className:u.nameSection,children:M()}),r.jsx("div",{className:u.fileSizeSection,children:w||"-"}),S&&r.jsxs("div",{className:u.mobileErrorMessage,children:[r.jsx(t.ExclamationCircleFillIcon,{className:u.errorIcon}),f||"Something went wrong"]})]})]})):e=r.jsxs(r.Fragment,{children:[r.jsx("div",{className:u.nameSection,children:M()}),r.jsx("div",{className:u.fileSizeSection,children:w||"-"}),S&&r.jsxs("div",{className:u.mobileErrorMessage,children:[r.jsx(t.ExclamationCircleFillIcon,{className:u.errorIcon}),f||"Something went wrong"]})]}),r.jsx("div",{className:h.default(u.contentSection,!!v&&u.contentSectionHasThumbnail),children:e})})(),r.jsx("div",{className:u.actionContainer,children:r.jsx(n.Button,{className:u.iconButton,"data-testid":`${j}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${x}`,loading:N||!b,icon:r.jsx(i.DownloadIcon,{})})})]})})}));exports.FileListCard=j;
1
+ "use strict";var e=require("../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("@lifesg/react-icons/exclamation-circle-fill"),a=require("clsx"),s=require("react"),l=require("../../button/button.js"),n=require("../../file-upload/helper.js"),o=require("../../shared/accessibility/index.js"),c=require("../../shared/image-with-fallback/image-with-fallback.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var d=require("../../util/string-helper.js");require("@react-aria/live-announcer");var u=require("../../theme/utils/use-media-query.js"),m=require("./file-list-card.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(a);const x=s.memo((({fileItem:a,onDownload:h,onClick:x})=>{const{id:p,name:b,mimeType:f,size:g,errorMessage:q,thumbnailImageDataUrl:y,truncateText:v=!0,ready:N=!0,clickLabel:k}=a,[w,S]=s.useState(!1),[C,F]=s.useState(!1),I=n.FileUploadHelper.formatFileSizeDisplay(g),T=n.FileUploadHelper.resolveThumbnailDisplay(f,y),D="none"!==T.type,E=u.useMaxWidthMediaQuery("sm"),[H,_]=s.useState(),M=s.useRef(null);s.useEffect((()=>{M.current&&_(E?L(b):b)}),[b,E]);const U=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(N&&!w){S(!0);try{F(!1),yield h(a)}catch(e){F(!0)}finally{S(!1)}}})),$=()=>{N&&(x?x(a):U())},z=e=>{e.stopPropagation(),$()},B=e=>{e.stopPropagation(),U()},L=e=>{if(!v)return e;const i=M&&M.current?M.current.getBoundingClientRect().width:0;return d.StringHelper.truncateTwoLines(e,i,16,1.5)},P=()=>{if("none"===T.type)return null;const e="pdf-icon"===T.type;return i.jsx("div",{className:m.thumbnailContainer,"data-testid":`${p}-thumbnail`,children:i.jsx(c.ImageWithFallback,{className:j.default(m.thumbnail,e&&m.thumbnailPdf),"data-testid":`${p}-thumbnail-image`,src:e?n.FileUploadHelper.PDF_ICON_URL:T.src})})},R=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:m.nameSection,children:i.jsxs(i.Fragment,{children:[i.jsx("div",{className:m.itemNameText,ref:M,children:H}),C&&i.jsxs("div",{className:m.desktopErrorMessage,children:[i.jsx(r.ExclamationCircleFillIcon,{className:m.errorIcon}),q||"Something went wrong"]})]})}),i.jsx("div",{className:m.fileSizeSection,children:I||"-"}),C&&i.jsxs("div",{className:m.mobileErrorMessage,children:[i.jsx(r.ExclamationCircleFillIcon,{className:m.errorIcon}),q||"Something went wrong"]})]});return i.jsx("li",{className:m.item,"data-testid":p,children:i.jsxs("div",{className:j.default(m.box,C&&m.boxError),onClick:$,children:[i.jsxs("div",{className:j.default(m.contentSection,D&&m.contentSectionHasThumbnail),children:[P(),D?i.jsx("div",{className:m.extendedNameSection,children:R()}):R()]}),x?i.jsx(o.VisuallyHidden,{children:i.jsx("button",{type:"button",className:m.cardButton,"data-testid":`${p}-card-button`,"aria-label":null!=k?k:b,disabled:!N,onClick:z})}):null,i.jsx("div",{className:m.actionContainer,children:i.jsx(l.Button,{className:m.iconButton,"data-testid":`${p}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${b}`,loading:w||!N,icon:i.jsx(t.DownloadIcon,{}),onClick:B})})]})})}));exports.FileListCard=x;
2
2
  //# sourceMappingURL=file-list-card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport clsx from \"clsx\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n errorMessage,\n thumbnailImageDataUrl,\n truncateText = true,\n ready = true,\n } = fileItem;\n\n // Local variables\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const [isError, setIsError] = useState<boolean>(false);\n const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const [displayText, setDisplayText] = useState<string>();\n const containerRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (!containerRef.current) return;\n if (isMobile) {\n setDisplayText(getTruncatedText(name));\n } else {\n setDisplayText(name);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [name, isMobile]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDownload = async () => {\n if (!ready || isLoading) {\n return;\n }\n\n setIsLoading(true);\n try {\n setIsError(false);\n await onDownload(fileItem);\n } catch {\n setIsError(true);\n } finally {\n setIsLoading(false);\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n containerRef && containerRef.current\n ? containerRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderNameDescription = () => (\n <>\n <div className={styles.itemNameText} ref={containerRef}>\n {displayText}\n </div>\n {isError && (\n <div className={styles.desktopErrorMessage}>\n <ExclamationCircleFillIcon className={styles.errorIcon} />\n {errorMessage ? errorMessage : \"Something went wrong\"}\n </div>\n )}\n </>\n );\n\n const renderWithThumbnail = (thumbnailSrc: string) => (\n <>\n <div\n className={styles.thumbnailContainer}\n data-testid={`${id}-thumbnail`}\n >\n <ImageWithFallback\n className={styles.thumbnail}\n data-testid={`${id}-thumbnail-image`}\n src={thumbnailSrc}\n />\n </div>\n <div className={styles.extendedNameSection}>\n <div className={styles.nameSection}>\n {renderNameDescription()}\n </div>\n <div className={styles.fileSizeSection}>\n {fileSize ? fileSize : \"-\"}\n </div>\n {isError && (\n <div className={styles.mobileErrorMessage}>\n <ExclamationCircleFillIcon\n className={styles.errorIcon}\n />\n {errorMessage ? errorMessage : \"Something went wrong\"}\n </div>\n )}\n </div>\n </>\n );\n\n const renderDefault = () => (\n <>\n <div className={styles.nameSection}>{renderNameDescription()}</div>\n <div className={styles.fileSizeSection}>\n {fileSize ? fileSize : \"-\"}\n </div>\n {isError && (\n <div className={styles.mobileErrorMessage}>\n <ExclamationCircleFillIcon className={styles.errorIcon} />\n {errorMessage ? errorMessage : \"Something went wrong\"}\n </div>\n )}\n </>\n );\n\n const renderContents = () => {\n let content: JSX.Element;\n\n if (thumbnailImageDataUrl) {\n content = renderWithThumbnail(thumbnailImageDataUrl);\n } else {\n content = renderDefault();\n }\n\n return (\n <div\n className={clsx(\n styles.contentSection,\n !!thumbnailImageDataUrl && styles.contentSectionHasThumbnail\n )}\n >\n {content}\n </div>\n );\n };\n\n const renderActions = () => {\n return (\n <div className={styles.actionContainer}>\n <Button\n className={styles.iconButton}\n data-testid={`${id}-download-button`}\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`download ${name}`}\n loading={isLoading || !ready}\n icon={<DownloadIcon />}\n />\n </div>\n );\n };\n\n return (\n <li className={styles.item} data-testid={id}>\n <div\n className={clsx(styles.box, isError && styles.boxError)}\n onClick={handleDownload}\n >\n {renderContents()}\n {renderActions()}\n </div>\n </li>\n );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_Fragment","children","_jsx","className","styles.itemNameText","ref","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.item","clsx","styles.box","styles.boxError","onClick","__awaiter","_a","content","thumbnailSrc","styles.thumbnailContainer","ImageWithFallback","styles.thumbnail","src","styles.extendedNameSection","styles.nameSection","styles.fileSizeSection","styles.mobileErrorMessage","styles.contentSection","styles.contentSectionHasThumbnail","renderContents","styles.actionContainer","Button","styles.iconButton","type","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"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"}
1
+ {"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport clsx from \"clsx\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload, onClick }: FileListItemProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n mimeType,\n size,\n errorMessage,\n thumbnailImageDataUrl,\n truncateText = true,\n ready = true,\n clickLabel,\n } = fileItem;\n\n // Local variables\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const [isError, setIsError] = useState<boolean>(false);\n const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n const thumbnailDisplay = FileUploadHelper.resolveThumbnailDisplay(\n mimeType,\n thumbnailImageDataUrl\n );\n const hasThumbnail = thumbnailDisplay.type !== \"none\";\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const [displayText, setDisplayText] = useState<string>();\n const containerRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (!containerRef.current) return;\n if (isMobile) {\n setDisplayText(getTruncatedText(name));\n } else {\n setDisplayText(name);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [name, isMobile]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDownload = async () => {\n if (!ready || isLoading) {\n return;\n }\n\n setIsLoading(true);\n try {\n setIsError(false);\n await onDownload(fileItem);\n } catch {\n setIsError(true);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleCardClick = () => {\n if (!ready) {\n return;\n }\n\n if (onClick) {\n onClick(fileItem);\n return;\n }\n\n handleDownload();\n };\n\n const handleCardButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>\n ) => {\n /*\n * The button sits inside the container, which handles clicks too.\n * Without this both handlers fire and the action runs twice.\n */\n event.stopPropagation();\n handleCardClick();\n };\n\n const handleDownloadButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>\n ) => {\n // Same reason: the container's handler must not also run.\n event.stopPropagation();\n handleDownload();\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n containerRef && containerRef.current\n ? containerRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderNameDescription = () => (\n <>\n <div className={styles.itemNameText} ref={containerRef}>\n {displayText}\n </div>\n {isError && (\n <div className={styles.desktopErrorMessage}>\n <ExclamationCircleFillIcon className={styles.errorIcon} />\n {errorMessage ? errorMessage : \"Something went wrong\"}\n </div>\n )}\n </>\n );\n\n const renderThumbnail = () => {\n if (thumbnailDisplay.type === \"none\") {\n return null;\n }\n\n const isPdfBadge = thumbnailDisplay.type === \"pdf-icon\";\n\n return (\n <div\n className={styles.thumbnailContainer}\n data-testid={`${id}-thumbnail`}\n >\n <ImageWithFallback\n className={clsx(\n styles.thumbnail,\n isPdfBadge && styles.thumbnailPdf\n )}\n data-testid={`${id}-thumbnail-image`}\n src={\n isPdfBadge\n ? FileUploadHelper.PDF_ICON_URL\n : thumbnailDisplay.src\n }\n />\n </div>\n );\n };\n\n const renderNameSizeError = () => (\n <>\n <div className={styles.nameSection}>{renderNameDescription()}</div>\n <div className={styles.fileSizeSection}>\n {fileSize ? fileSize : \"-\"}\n </div>\n {isError && (\n <div className={styles.mobileErrorMessage}>\n <ExclamationCircleFillIcon className={styles.errorIcon} />\n {errorMessage ? errorMessage : \"Something went wrong\"}\n </div>\n )}\n </>\n );\n\n const renderContents = () => (\n <div\n className={clsx(\n styles.contentSection,\n hasThumbnail && styles.contentSectionHasThumbnail\n )}\n >\n {renderThumbnail()}\n {hasThumbnail ? (\n <div className={styles.extendedNameSection}>\n {renderNameSizeError()}\n </div>\n ) : (\n renderNameSizeError()\n )}\n </div>\n );\n\n const renderCardButton = () => {\n if (!onClick) {\n return null;\n }\n\n return (\n <VisuallyHidden>\n <button\n type=\"button\"\n className={styles.cardButton}\n data-testid={`${id}-card-button`}\n aria-label={clickLabel ?? name}\n disabled={!ready}\n onClick={handleCardButtonClick}\n />\n </VisuallyHidden>\n );\n };\n\n const renderActions = () => {\n return (\n <div className={styles.actionContainer}>\n <Button\n className={styles.iconButton}\n data-testid={`${id}-download-button`}\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`download ${name}`}\n loading={isLoading || !ready}\n icon={<DownloadIcon />}\n onClick={handleDownloadButtonClick}\n />\n </div>\n );\n };\n\n return (\n <li className={styles.item} data-testid={id}>\n <div\n className={clsx(styles.box, isError && styles.boxError)}\n onClick={handleCardClick}\n >\n {renderContents()}\n {renderCardButton()}\n {renderActions()}\n </div>\n </li>\n );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","onClick","id","name","mimeType","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","clickLabel","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","thumbnailDisplay","resolveThumbnailDisplay","hasThumbnail","type","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","handleDownload","__awaiter","_a","handleCardClick","handleCardButtonClick","event","stopPropagation","handleDownloadButtonClick","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderThumbnail","isPdfBadge","_jsx","className","styles.thumbnailContainer","children","ImageWithFallback","clsx","styles.thumbnail","styles.thumbnailPdf","src","PDF_ICON_URL","renderNameSizeError","_jsxs","_Fragment","styles.nameSection","styles.itemNameText","ref","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.fileSizeSection","styles.mobileErrorMessage","styles.item","styles.box","styles.boxError","styles.contentSection","styles.contentSectionHasThumbnail","styles.extendedNameSection","VisuallyHidden","styles.cardButton","disabled","styles.actionContainer","Button","styles.iconButton","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";require("./file-list-card.styles_18j2gut.css");exports.actionContainer="a1xq0zd",exports.box="b7grm6i",exports.boxError="b1ryf4f4",exports.contentSection="casceiz",exports.contentSectionHasThumbnail="c83cih3",exports.desktopErrorMessage="dga23xt",exports.errorIcon="e4y82lx",exports.extendedNameSection="ethi1vt",exports.fileSizeSection="ff8ofzq",exports.iconButton="i18nltf5",exports.item="ifkrwze",exports.itemNameText="iytzo9z",exports.mobileErrorMessage="m1qdniby",exports.nameSection="n13wqyhg",exports.thumbnail="t4orgj8",exports.thumbnailContainer="tmpqdeo";
1
+ "use strict";require("./file-list-card.styles_lzbqkk.css");exports.actionContainer="a18nltf5",exports.box="b1ryf4f4",exports.boxError="basceiz",exports.cardButton="c7grm6i",exports.contentSection="c83cih3",exports.contentSectionHasThumbnail="c13wqyhg",exports.desktopErrorMessage="d1qdniby",exports.errorIcon="ega23xt",exports.extendedNameSection="ef8ofzq",exports.fileSizeSection="fytzo9z",exports.iconButton="impqdeo",exports.item="ifkrwze",exports.itemNameText="i4y82lx",exports.mobileErrorMessage="m1xq0zd",exports.nameSection="nthi1vt",exports.thumbnail="t96jkl",exports.thumbnailContainer="t4orgj8",exports.thumbnailPdf="t1l7ztkl";
2
2
  //# sourceMappingURL=file-list-card.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\n display: flex;\n align-items: center;\n\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const box = css`\n display: flex;\n align-items: center;\n\n width: 100%;\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n cursor: pointer;\n\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n }\n`;\n\nexport const boxError = css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n\n &:hover {\n background: ${Colour[\"bg-error\"]};\n }\n`;\n\nexport const contentSection = css`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n }\n`;\n\nexport const contentSectionHasThumbnail = css`\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: row;\n align-items: center;\n }\n`;\n\nexport const nameSection = css`\n display: flex;\n flex: 1;\n flex-direction: column;\n\n width: 100%;\n\n overflow-wrap: break-word;\n word-break: break-all;\n white-space: normal;\n`;\n\nexport const extendedNameSection = css`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n }\n`;\n\nexport const fileSizeSection = css`\n display: flex;\n justify-content: flex-end;\n\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n justify-content: flex-start;\n\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n\n ${lineClampCss(2)}\n }\n`;\n\nexport const itemNameText = css`\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n ${lineClampCss(2)}\n }\n`;\n\nexport const errorIcon = css`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n ${baseErrorMessage}\n margin-top: ${Spacing[\"spacing-8\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const mobileErrorMessage = css`\n ${baseErrorMessage}\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const actionContainer = css`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n margin-left: ${Spacing[\"spacing-32\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n margin-left: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const iconButton = css`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const thumbnailContainer = css`\n width: auto;\n margin-right: ${Spacing[\"spacing-32\"]};\n\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n justify-content: center;\n\n ${MediaQuery.MaxWidth.lg} {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const thumbnail = css`\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n width: 96px;\n height: 96px;\n aspect-ratio: 1;\n object-fit: cover;\n\n ${MediaQuery.MaxWidth.lg} {\n width: 64px;\n height: 64px;\n }\n`;\n"],"names":[],"mappings":"gIAgK4B,sBA5IZ,2BAqBK,kCASM,6CAYY,sCAyEP,4BAZV,sCA1CU,kCAYJ,6BA+EL,wBApKN,+BA0GQ,qCAiCM,+BA9EP,6BA6HF,qCAdS"}
1
+ {"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\n display: flex;\n align-items: center;\n\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const cardButton = css`\n appearance: none;\n padding: 0;\n background: none;\n border: none;\n`;\n\nexport const box = css`\n position: relative;\n display: flex;\n align-items: center;\n\n width: 100%;\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n cursor: pointer;\n\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n }\n\n @supports selector(:has(*)) {\n &:has(.${cardButton}:focus-visible) {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: -2px;\n }\n }\n`;\n\nexport const boxError = css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n\n &:hover {\n background: ${Colour[\"bg-error\"]};\n }\n\n @supports selector(:has(*)) {\n &:has(.${cardButton}:focus-visible) {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n }\n`;\n\nexport const contentSection = css`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n }\n`;\n\nexport const contentSectionHasThumbnail = css`\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: row;\n align-items: center;\n }\n`;\n\nexport const nameSection = css`\n display: flex;\n flex: 1;\n flex-direction: column;\n\n width: 100%;\n\n overflow-wrap: break-word;\n word-break: break-all;\n white-space: normal;\n`;\n\nexport const extendedNameSection = css`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n }\n`;\n\nexport const fileSizeSection = css`\n display: flex;\n justify-content: flex-end;\n\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n justify-content: flex-start;\n\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n\n ${lineClampCss(2)}\n }\n`;\n\nexport const itemNameText = css`\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n ${lineClampCss(2)}\n }\n`;\n\nexport const errorIcon = css`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n ${baseErrorMessage}\n margin-top: ${Spacing[\"spacing-8\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const mobileErrorMessage = css`\n ${baseErrorMessage}\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const actionContainer = css`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n margin-left: ${Spacing[\"spacing-32\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n margin-left: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const iconButton = css`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const thumbnailContainer = css`\n width: auto;\n margin-right: ${Spacing[\"spacing-32\"]};\n\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n justify-content: center;\n\n ${MediaQuery.MaxWidth.lg} {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const thumbnail = css`\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n width: 96px;\n height: 96px;\n aspect-ratio: 1;\n object-fit: cover;\n\n ${MediaQuery.MaxWidth.lg} {\n width: 64px;\n height: 64px;\n }\n`;\n\nexport const thumbnailPdf = css`\n border: none;\n`;\n"],"names":[],"mappings":"+HAqL4B,uBA1JZ,4BA6BK,6BApCE,iCAmDI,6CAYY,uCAyEP,6BAZV,sCA1CU,kCAYJ,6BA+EL,uBAzLN,+BA+HQ,qCAiCM,8BA9EP,4BA6HF,oCAdS,+BA6BN"}
@@ -0,0 +1,18 @@
1
+ @layer fds{.ifkrwze{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;width:100%;border:none;}.ifkrwze:not(:last-child){margin-bottom:var(--fds-spacing-16);}
2
+ .c7grm6i{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;padding:0;background:none;border:none;}
3
+ .b1ryf4f4{position:relative;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;width:100%;padding:var(--fds-spacing-16) var(--fds-spacing-32);cursor:pointer;background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}:where(body.fds-breakpoint-lg-max) .b1ryf4f4{padding:var(--fds-spacing-16);}.b1ryf4f4:hover{background:var(--fds-colour-bg-hover);}@supports selector(:has(*)){.b1ryf4f4:has(.c7grm6i:focus-visible){outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}}
4
+ .basceiz{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}.basceiz:hover{background:var(--fds-colour-bg-error);}@supports selector(:has(*)){.basceiz:has(.c7grm6i:focus-visible){outline-color:var(--fds-colour-border-error-focus);}}
5
+ .c83cih3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .c83cih3{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
6
+ :where(body.fds-breakpoint-lg-max) .c13wqyhg{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
7
+ .nthi1vt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;overflow-wrap:break-word;word-break:break-all;white-space:normal;}
8
+ .ef8ofzq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .ef8ofzq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
9
+ .fytzo9z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;width:5rem;margin-left:var(--fds-spacing-8);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .fytzo9z{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;margin-left:0;margin-top:var(--fds-spacing-8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
10
+ .i4y82lx{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .i4y82lx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
11
+ .ega23xt{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
12
+ .d1qdniby{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-lg-max) .d1qdniby{display:none;visibility:hidden;}
13
+ .m1xq0zd{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-lg-max) .m1xq0zd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
14
+ .a18nltf5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--fds-spacing-32);}:where(body.fds-breakpoint-lg-max) .a18nltf5{margin-left:var(--fds-spacing-16);}
15
+ .impqdeo{min-width:unset;}.impqdeo:not(:last-child){margin-right:var(--fds-spacing-16);}
16
+ .t4orgj8{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .t4orgj8{margin-right:var(--fds-spacing-16);}
17
+ .t96jkl{border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);width:96px;height:96px;aspect-ratio:1;object-fit:cover;}:where(body.fds-breakpoint-lg-max) .t96jkl{width:64px;height:64px;}
18
+ .t1l7ztkl{border:none;}}
@@ -1,2 +1,2 @@
1
- "use strict";class e{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}}e.PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",exports.FileUploadHelper=e;
1
+ "use strict";class e{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const t=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,t)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}static resolveThumbnailDisplay(t,i){return i?{type:"image",src:i}:t===e.PDF_MIME_TYPE?{type:"pdf-icon"}:{type:"none"}}}e.PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",exports.FileUploadHelper=e;
2
2
  //# sourceMappingURL=helper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export class FileUploadHelper {\n public static readonly PDF_MIME_TYPE = \"application/pdf\";\n public static readonly PDF_ICON_URL =\n \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n public static formatFileSizeDisplay(size?: number) {\n if (!size || size === 0) return \"0 KB\";\n\n const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n const value = Number(size / Math.pow(1024, index)).toFixed(0);\n const measurement = sizes[index];\n\n return `${value} ${measurement}`;\n }\n\n public static isSupportedImageType(type: string): boolean {\n /** Currently only images supported by html <img> */\n const acceptedImageTypes = [\n \"image/avif\",\n \"image/gif\",\n \"image/jpeg\",\n \"image/png\",\n \"image/svg+xml\",\n \"image/webp\",\n ];\n\n return acceptedImageTypes.includes(type);\n }\n}\n"],"names":["FileUploadHelper","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","PDF_MIME_TYPE","PDF_ICON_URL"],"mappings":"mBAAaA,EAMF,4BAAOC,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC,EA9BuBX,EAAAa,cAAgB,kBAChBb,EAAAc,aACnB"}
1
+ {"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["/**\n * How a file's thumbnail slot should be rendered.\n *\n * - `image` — a thumbnail was supplied; render it at `src`\n * - `pdf-icon` — a PDF with no thumbnail; render the PDF badge borderless\n * - `none` — nothing to show; render no thumbnail slot at all\n */\nexport type FileThumbnailDisplay =\n | { type: \"image\"; src: string }\n | { type: \"pdf-icon\" }\n | { type: \"none\" };\n\nexport class FileUploadHelper {\n public static readonly PDF_MIME_TYPE = \"application/pdf\";\n public static readonly PDF_ICON_URL =\n \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n public static formatFileSizeDisplay(size?: number) {\n if (!size || size === 0) return \"0 KB\";\n\n const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n const value = Number(size / Math.pow(1024, index)).toFixed(0);\n const measurement = sizes[index];\n\n return `${value} ${measurement}`;\n }\n\n public static isSupportedImageType(type: string): boolean {\n /** Currently only images supported by html <img> */\n const acceptedImageTypes = [\n \"image/avif\",\n \"image/gif\",\n \"image/jpeg\",\n \"image/png\",\n \"image/svg+xml\",\n \"image/webp\",\n ];\n\n return acceptedImageTypes.includes(type);\n }\n\n /**\n * Decides how a file's thumbnail slot should render, given its MIME type\n * and any thumbnail the consumer supplied.\n *\n * Lives on `FileUploadHelper` so `FileUpload` can adopt it later. Today\n * only `FileDownload` calls it: `FileUpload` still decides this inline in\n * `file-list-item-thumbnail.tsx`, and the two do NOT yet agree — for a\n * non-PDF with no thumbnail this returns `\"none\"` while `FileUpload`\n * renders an `<img>` with an empty `src`. Do not read this as an invariant\n * the two components already share.\n *\n * Callers render the result with their own markup, because their thumbnails\n * change size at different breakpoints.\n */\n public static resolveThumbnailDisplay(\n mimeType: string | undefined,\n thumbnailImageDataUrl: string | undefined\n ): FileThumbnailDisplay {\n if (thumbnailImageDataUrl) {\n return { type: \"image\", src: thumbnailImageDataUrl };\n }\n\n if (mimeType === FileUploadHelper.PDF_MIME_TYPE) {\n return { type: \"pdf-icon\" };\n }\n\n return { type: \"none\" };\n }\n}\n"],"names":["FileUploadHelper","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","resolveThumbnailDisplay","mimeType","thumbnailImageDataUrl","src","PDF_MIME_TYPE","PDF_ICON_URL"],"mappings":"mBAYaA,EAMF,4BAAOC,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC,CAgBO,8BAAOE,CACVC,EACAC,GAEA,OAAIA,EACO,CAAEJ,KAAM,QAASK,IAAKD,GAG7BD,IAAad,EAAiBiB,cACvB,CAAEN,KAAM,YAGZ,CAAEA,KAAM,OACnB,EA3DuBX,EAAAiB,cAAgB,kBAChBjB,EAAAkB,aACnB"}
@@ -1,2 +1,2 @@
1
- "use strict";const e={privacy:{href:"https://www.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},r={privacy:{href:"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},t={privacy:{href:"https://www.imda.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.imda.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},o={privacy:{href:"https://mylegacy.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://mylegacy.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},s={privacy:{href:"https://www.police.gov.sg/Privacy-Statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.police.gov.sg/Terms-of-Use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report-vulnerability",target:"_blank",rel:"noopener",external:!0}},n={privacy:{href:"https://supportgowhere.life.gov.sg/privacy-statement.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://supportgowhere.life.gov.sg/terms-of-use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}};exports.getDefaultDisclaimerLinks=a=>{switch(a){case"bookingsg":return r;case"imda":return t;case"mylegacy":return o;case"spf":return s;case"supportgowhere":return n;default:return e}};
1
+ "use strict";const e={privacy:{href:"https://www.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},r={privacy:{href:"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},t={privacy:{href:"https://www.imda.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.imda.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},o={privacy:{href:"https://mylegacy.life.gov.sg/privacy-statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://mylegacy.life.gov.sg/terms-of-use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},s={privacy:{href:"https://www.police.gov.sg/Privacy-Statement",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.police.gov.sg/Terms-of-Use",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report-vulnerability",target:"_blank",rel:"noopener",external:!0}},n={privacy:{href:"https://www.sportsingapore.gov.sg/privacy/",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://www.sportsingapore.gov.sg/terms-of-use/",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}},a={privacy:{href:"https://supportgowhere.life.gov.sg/privacy-statement.pdf",target:"_blank",rel:"noopener"},termsOfUse:{href:"https://supportgowhere.life.gov.sg/terms-of-use.pdf",target:"_blank",rel:"noopener"},reportVulnerability:{href:"https://www.tech.gov.sg/report_vulnerability",target:"_blank",rel:"noopener",external:!0}};exports.getDefaultDisclaimerLinks=l=>{switch(l){case"bookingsg":return r;case"imda":return t;case"mylegacy":return o;case"spf":return s;case"sportsg-orange":return n;case"supportgowhere":return a;default:return e}};
2
2
  //# sourceMappingURL=footer-disclaimer-links-data.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"footer-disclaimer-links-data.js","sources":["../../../src/footer/footer-disclaimer-links-data.tsx"],"sourcesContent":["import type { ThemeType } from \"../theme/types\";\nimport type { InternalDisclaimerLinks } from \"./footer-helper\";\n\nconst BaseDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.life.gov.sg/privacy-statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.life.gov.sg/terms-of-use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst BookingSgDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst IMDADisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.imda.gov.sg/privacy-statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.imda.gov.sg/terms-of-use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst MyLegacyDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://mylegacy.life.gov.sg/privacy-statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://mylegacy.life.gov.sg/terms-of-use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst SPFDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.police.gov.sg/Privacy-Statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.police.gov.sg/Terms-of-Use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report-vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst SupportGoWhereDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://supportgowhere.life.gov.sg/privacy-statement.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://supportgowhere.life.gov.sg/terms-of-use.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nexport const getDefaultDisclaimerLinks = (resourceScheme?: ThemeType) => {\n switch (resourceScheme) {\n case \"bookingsg\":\n return BookingSgDisclaimerLinks;\n case \"imda\":\n return IMDADisclaimerLinks;\n case \"mylegacy\":\n return MyLegacyDisclaimerLinks;\n case \"spf\":\n return SPFDisclaimerLinks;\n case \"supportgowhere\":\n return SupportGoWhereDisclaimerLinks;\n default:\n return BaseDisclaimerLinks;\n }\n};\n"],"names":["BaseDisclaimerLinks","privacy","href","target","rel","termsOfUse","reportVulnerability","external","BookingSgDisclaimerLinks","IMDADisclaimerLinks","MyLegacyDisclaimerLinks","SPFDisclaimerLinks","SupportGoWhereDisclaimerLinks","resourceScheme"],"mappings":"aAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZC,EAAoD,CACtDP,QAAS,CACLC,KAAM,8DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4DACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZE,EAA+C,CACjDR,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZG,EAAmD,CACrDT,QAAS,CACLC,KAAM,iDACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZI,EAA8C,CAChDV,QAAS,CACLC,KAAM,8CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,yCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZK,EAAyD,CAC3DX,QAAS,CACLC,KAAM,2DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,sDACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,sCAIwBM,IACtC,OAAQA,GACJ,IAAK,YACD,OAAOL,EACX,IAAK,OACD,OAAOC,EACX,IAAK,WACD,OAAOC,EACX,IAAK,MACD,OAAOC,EACX,IAAK,iBACD,OAAOC,EACX,QACI,OAAOZ"}
1
+ {"version":3,"file":"footer-disclaimer-links-data.js","sources":["../../../src/footer/footer-disclaimer-links-data.tsx"],"sourcesContent":["import type { ThemeType } from \"../theme/types\";\nimport type { InternalDisclaimerLinks } from \"./footer-helper\";\n\nconst BaseDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.life.gov.sg/privacy-statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.life.gov.sg/terms-of-use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst BookingSgDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst IMDADisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.imda.gov.sg/privacy-statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.imda.gov.sg/terms-of-use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst MyLegacyDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://mylegacy.life.gov.sg/privacy-statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://mylegacy.life.gov.sg/terms-of-use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst SPFDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.police.gov.sg/Privacy-Statement\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.police.gov.sg/Terms-of-Use\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report-vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst SportSGOrangeWhereDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://www.sportsingapore.gov.sg/privacy/\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://www.sportsingapore.gov.sg/terms-of-use/\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nconst SupportGoWhereDisclaimerLinks: InternalDisclaimerLinks = {\n privacy: {\n href: \"https://supportgowhere.life.gov.sg/privacy-statement.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n termsOfUse: {\n href: \"https://supportgowhere.life.gov.sg/terms-of-use.pdf\",\n target: \"_blank\",\n rel: \"noopener\",\n },\n reportVulnerability: {\n href: \"https://www.tech.gov.sg/report_vulnerability\",\n target: \"_blank\",\n rel: \"noopener\",\n external: true,\n },\n};\n\nexport const getDefaultDisclaimerLinks = (resourceScheme?: ThemeType) => {\n switch (resourceScheme) {\n case \"bookingsg\":\n return BookingSgDisclaimerLinks;\n case \"imda\":\n return IMDADisclaimerLinks;\n case \"mylegacy\":\n return MyLegacyDisclaimerLinks;\n case \"spf\":\n return SPFDisclaimerLinks;\n case \"sportsg-orange\":\n return SportSGOrangeWhereDisclaimerLinks;\n case \"supportgowhere\":\n return SupportGoWhereDisclaimerLinks;\n default:\n return BaseDisclaimerLinks;\n }\n};\n"],"names":["BaseDisclaimerLinks","privacy","href","target","rel","termsOfUse","reportVulnerability","external","BookingSgDisclaimerLinks","IMDADisclaimerLinks","MyLegacyDisclaimerLinks","SPFDisclaimerLinks","SportSGOrangeWhereDisclaimerLinks","SupportGoWhereDisclaimerLinks","resourceScheme"],"mappings":"aAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZC,EAAoD,CACtDP,QAAS,CACLC,KAAM,8DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4DACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZE,EAA+C,CACjDR,QAAS,CACLC,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,uCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZG,EAAmD,CACrDT,QAAS,CACLC,KAAM,iDACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,4CACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,2CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZI,EAA8C,CAChDV,QAAS,CACLC,KAAM,8CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,yCACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZK,EAA6D,CAC/DX,QAAS,CACLC,KAAM,6CACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,kDACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,IAIZM,EAAyD,CAC3DZ,QAAS,CACLC,KAAM,2DACNC,OAAQ,SACRC,IAAK,YAETC,WAAY,CACRH,KAAM,sDACNC,OAAQ,SACRC,IAAK,YAETE,oBAAqB,CACjBJ,KAAM,+CACNC,OAAQ,SACRC,IAAK,WACLG,UAAU,sCAIwBO,IACtC,OAAQA,GACJ,IAAK,YACD,OAAON,EACX,IAAK,OACD,OAAOC,EACX,IAAK,WACD,OAAOC,EACX,IAAK,MACD,OAAOC,EACX,IAAK,iBACD,OAAOC,EACX,IAAK,iBACD,OAAOC,EACX,QACI,OAAOb"}
@@ -1,2 +1,2 @@
1
- "use strict";require("./footer.styles_1msorhc.css");exports.addonSection="a1r2lyba",exports.baseFooter="b1ozupxm",exports.bottomSection="b1ni5lnl",exports.bottomSectionContent="bakpusz",exports.copyrightSection="cb1d27e",exports.copyrightText="cntgl6w",exports.disclaimerTextLink="d2vgmpj",exports.footerLink="f1b3ng0m",exports.fullWidthDivider="f1f7a2pi",exports.linkSection="l1dnmj9w",exports.linkSectionWrapper="l1guit5j",exports.logoImage="l14ev7f9",exports.logoSection="l1t4stq",exports.logoSize={lifesg:"l1rsy8ww",bookingsg:"bsv4pll",mylegacy:"m1m4savg",ccube:"c6zlk1a",supportgowhere:"sdqdit1"},exports.topSection="t1nab4kr";
1
+ "use strict";require("./footer.styles_14hnlcq.css");exports.addonSection="a1r2lyba",exports.baseFooter="b1ozupxm",exports.bottomSection="b1ni5lnl",exports.bottomSectionContent="bakpusz",exports.copyrightSection="cb1d27e",exports.copyrightText="cntgl6w",exports.disclaimerTextLink="d2vgmpj",exports.footerLink="f1b3ng0m",exports.fullWidthDivider="f1f7a2pi",exports.linkSection="l1dnmj9w",exports.linkSectionWrapper="l1guit5j",exports.logoImage="l14ev7f9",exports.logoSection="l1t4stq",exports.logoSize={bookingsg:"b1rsy8ww",ccube:"csv4pll",lifesg:"l1m4savg",mylegacy:"m6zlk1a",supportgowhere:"sdqdit1"},exports.topSection="t1nab4kr";
2
2
  //# sourceMappingURL=footer.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"footer.styles.js","sources":["../../../src/footer/footer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { ComponentToken, MediaQuery, Spacing } from \"../theme\";\nimport type { ThemeType } from \"../theme/types\";\n\n// =============================================================================\n// GENERIC\n// =============================================================================\n\nexport const baseFooter = css`\n background: ${ComponentToken.Footer[\"colour-bg\"]};\n`;\n\nexport const footerLink = css`\n color: ${ComponentToken.Footer[\"link-colour-text\"]};\n\n &:hover {\n color: ${ComponentToken.Footer[\"link-colour-text-hover\"]};\n }\n`;\n\n// =============================================================================\n// TOP SECTION\n// =============================================================================\n\nexport const fullWidthDivider = css`\n width: 100%;\n`;\n\nexport const topSection = css`\n padding: ${Spacing[\"spacing-64\"]} 0;\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-32\"]} 0;\n\n [data-id=\"container\"] {\n flex-direction: column;\n gap: ${Spacing[\"spacing-32\"]};\n }\n }\n`;\n\nexport const logoSection = css`\n display: flex;\n width: fit-content;\n margin-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n margin-right: 0;\n }\n`;\n\nexport const logoImage = css`\n max-height: 4rem;\n max-width: 100%;\n object-fit: contain;\n`;\n\nexport const logoSize: Partial<Record<ThemeType, string>> = {\n lifesg: css`\n width: 4rem;\n `,\n bookingsg: css`\n width: 4rem;\n `,\n mylegacy: css`\n width: 10rem;\n max-height: 2rem;\n `,\n ccube: css`\n width: 10rem;\n `,\n supportgowhere: css`\n width: 10rem;\n `,\n};\n\nexport const linkSectionWrapper = css`\n display: flex;\n gap: ${Spacing[\"spacing-32\"]};\n flex: 1 1 auto;\n max-width: calc(32% + ${Spacing[\"spacing-32\"]});\n\n ${MediaQuery.MaxWidth.lg} {\n max-width: 100%;\n }\n`;\n\nexport const linkSection = css`\n flex: 1 1 50%;\n list-style-type: none;\n\n &:nth-of-type(2) {\n // 2nd col\n grid-column: 7 / span 4;\n }\n\n li {\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-8\"]};\n }\n\n a {\n display: inline-block;\n }\n }\n\n ${MediaQuery.MaxWidth.lg} {\n // first col\n grid-column: 1 / span 6;\n\n &:nth-of-type(2) {\n // 2nd col\n grid-column: 7 / span 6;\n }\n }\n\n ${MediaQuery.MaxWidth.md} {\n // first col\n grid-column: 1 / span 4;\n\n &:nth-of-type(2) {\n // 2nd col\n grid-column: 5 / span 4;\n }\n }\n`;\n\nexport const addonSection = css`\n flex: 0 1 33%;\n margin-left: auto;\n\n ${MediaQuery.MaxWidth.lg} {\n flex: 1 1 100%;\n margin-left: 0;\n }\n`;\n\n// =============================================================================\n// BOTTOM SECTION\n// =============================================================================\n\nexport const bottomSection = css`\n padding: ${Spacing[\"spacing-20\"]} 0;\n\n [data-id=\"container\"] {\n column-gap: ${Spacing[\"spacing-32\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n border-top: none;\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n [data-id=\"container\"] {\n flex-direction: column;\n }\n }\n`;\n\nexport const bottomSectionContent = css`\n flex: 1 1 50%;\n display: flex;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n gap: ${Spacing[\"spacing-8\"]};\n &:not(:last-child) {\n margin-right: 0;\n }\n }\n`;\n\nexport const copyrightSection = css`\n justify-content: flex-end;\n\n ${MediaQuery.MaxWidth.lg} {\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-start;\n }\n`;\n\nexport const copyrightText = css`\n color: ${ComponentToken.Footer[\"colour-text\"]};\n`;\n\nexport const disclaimerTextLink = css`\n color: ${ComponentToken.Footer[\"disclaimer-link-colour-text\"]};\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n\n &:hover {\n color: ${ComponentToken.Footer[\"disclaimer-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &:not(:last-child) {\n margin-right: 0;\n }\n }\n`;\n"],"names":["lifesg","bookingsg","mylegacy","ccube","supportgowhere"],"mappings":"+FAiIyB,8BAxHF,iCAsIG,wCAiBO,mCAaJ,gCASH,qCAIK,6BA7KR,oCAYM,+BAgEL,sCAXO,6BAzBT,+BAXE,2BAiBoC,CACxDA,OAAM,WAGNC,UAAS,UAGTC,SAAQ,WAIRC,MAAK,UAGLC,eAAc,8BA5CK"}
1
+ {"version":3,"file":"footer.styles.js","sources":["../../../src/footer/footer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { ComponentToken, MediaQuery, Spacing } from \"../theme\";\nimport type { ThemeType } from \"../theme/types\";\n\n// =============================================================================\n// GENERIC\n// =============================================================================\n\nexport const baseFooter = css`\n background: ${ComponentToken.Footer[\"colour-bg\"]};\n`;\n\nexport const footerLink = css`\n color: ${ComponentToken.Footer[\"link-colour-text\"]};\n\n &:hover {\n color: ${ComponentToken.Footer[\"link-colour-text-hover\"]};\n }\n`;\n\n// =============================================================================\n// TOP SECTION\n// =============================================================================\n\nexport const fullWidthDivider = css`\n width: 100%;\n`;\n\nexport const topSection = css`\n padding: ${Spacing[\"spacing-64\"]} 0;\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-32\"]} 0;\n\n [data-id=\"container\"] {\n flex-direction: column;\n gap: ${Spacing[\"spacing-32\"]};\n }\n }\n`;\n\nexport const logoSection = css`\n display: flex;\n width: fit-content;\n margin-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n margin-right: 0;\n }\n`;\n\nexport const logoImage = css`\n max-height: 4rem;\n max-width: 100%;\n object-fit: contain;\n`;\n\nexport const logoSize: Partial<Record<ThemeType, string>> = {\n bookingsg: css`\n width: 4rem;\n `,\n ccube: css`\n width: 10rem;\n `,\n lifesg: css`\n width: 4rem;\n `,\n mylegacy: css`\n width: 10rem;\n max-height: 2rem;\n `,\n supportgowhere: css`\n width: 10rem;\n `,\n};\n\nexport const linkSectionWrapper = css`\n display: flex;\n gap: ${Spacing[\"spacing-32\"]};\n flex: 1 1 auto;\n max-width: calc(32% + ${Spacing[\"spacing-32\"]});\n\n ${MediaQuery.MaxWidth.lg} {\n max-width: 100%;\n }\n`;\n\nexport const linkSection = css`\n flex: 1 1 50%;\n list-style-type: none;\n\n &:nth-of-type(2) {\n // 2nd col\n grid-column: 7 / span 4;\n }\n\n li {\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-8\"]};\n }\n\n a {\n display: inline-block;\n }\n }\n\n ${MediaQuery.MaxWidth.lg} {\n // first col\n grid-column: 1 / span 6;\n\n &:nth-of-type(2) {\n // 2nd col\n grid-column: 7 / span 6;\n }\n }\n\n ${MediaQuery.MaxWidth.md} {\n // first col\n grid-column: 1 / span 4;\n\n &:nth-of-type(2) {\n // 2nd col\n grid-column: 5 / span 4;\n }\n }\n`;\n\nexport const addonSection = css`\n flex: 0 1 33%;\n margin-left: auto;\n\n ${MediaQuery.MaxWidth.lg} {\n flex: 1 1 100%;\n margin-left: 0;\n }\n`;\n\n// =============================================================================\n// BOTTOM SECTION\n// =============================================================================\n\nexport const bottomSection = css`\n padding: ${Spacing[\"spacing-20\"]} 0;\n\n [data-id=\"container\"] {\n column-gap: ${Spacing[\"spacing-32\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n border-top: none;\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n [data-id=\"container\"] {\n flex-direction: column;\n }\n }\n`;\n\nexport const bottomSectionContent = css`\n flex: 1 1 50%;\n display: flex;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n gap: ${Spacing[\"spacing-8\"]};\n &:not(:last-child) {\n margin-right: 0;\n }\n }\n`;\n\nexport const copyrightSection = css`\n justify-content: flex-end;\n\n ${MediaQuery.MaxWidth.lg} {\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-start;\n }\n`;\n\nexport const copyrightText = css`\n color: ${ComponentToken.Footer[\"colour-text\"]};\n`;\n\nexport const disclaimerTextLink = css`\n color: ${ComponentToken.Footer[\"disclaimer-link-colour-text\"]};\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n\n &:hover {\n color: ${ComponentToken.Footer[\"disclaimer-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &:not(:last-child) {\n margin-right: 0;\n }\n }\n`;\n"],"names":["bookingsg","ccube","lifesg","mylegacy","supportgowhere"],"mappings":"+FAiIyB,8BAxHF,iCAsIG,wCAiBO,mCAaJ,gCASH,qCAIK,6BA7KR,oCAYM,+BAgEL,sCAXO,6BAzBT,+BAXE,2BAiBoC,CACxDA,UAAS,WAGTC,MAAK,UAGLC,OAAM,WAGNC,SAAQ,UAIRC,eAAc,8BA5CK"}
@@ -4,10 +4,10 @@
4
4
  .t1nab4kr{padding:var(--fds-spacing-64) 0;}:where(body.fds-breakpoint-lg-max) .t1nab4kr{padding:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-lg-max) .t1nab4kr [data-id="container"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-32);}
5
5
  .l1t4stq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .l1t4stq{width:100%;margin-right:0;}
6
6
  .l14ev7f9{max-height:4rem;max-width:100%;object-fit:contain;}
7
- .l1rsy8ww{width:4rem;}
8
- .bsv4pll{width:4rem;}
9
- .m1m4savg{width:10rem;max-height:2rem;}
10
- .c6zlk1a{width:10rem;}
7
+ .b1rsy8ww{width:4rem;}
8
+ .csv4pll{width:10rem;}
9
+ .l1m4savg{width:4rem;}
10
+ .m6zlk1a{width:10rem;max-height:2rem;}
11
11
  .sdqdit1{width:10rem;}
12
12
  .l1guit5j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-32);-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;max-width:calc(32% + var(--fds-spacing-32));}:where(body.fds-breakpoint-lg-max) .l1guit5j{max-width:100%;}
13
13
  .l1dnmj9w{-webkit-flex:1 1 50%;-ms-flex:1 1 50%;flex:1 1 50%;list-style-type:none;}.l1dnmj9w:nth-of-type(2){-ms-grid-column:7;-ms-grid-column-span:4;grid-column:7/span 4;}.l1dnmj9w li:not(:last-child){margin-bottom:var(--fds-spacing-8);}.l1dnmj9w li a{display:inline-block;}:where(body.fds-breakpoint-lg-max) .l1dnmj9w{-ms-grid-column:1;-ms-grid-column-span:6;grid-column:1/span 6;}:where(body.fds-breakpoint-lg-max) .l1dnmj9w:nth-of-type(2){-ms-grid-column:7;-ms-grid-column-span:6;grid-column:7/span 6;}:where(body.fds-breakpoint-md-max) .l1dnmj9w{-ms-grid-column:1;-ms-grid-column-span:4;grid-column:1/span 4;}:where(body.fds-breakpoint-md-max) .l1dnmj9w:nth-of-type(2){-ms-grid-column:5;-ms-grid-column-span:4;grid-column:5/span 4;}