@lifesg/react-design-system 3.4.0-canary.7 → 3.4.0
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.
- package/cjs/external/dompurify/dist/purify.es.js +3 -3
- package/cjs/external/dompurify/dist/purify.es.js.map +1 -1
- package/cjs/footer/footer.js +1 -1
- package/cjs/footer/footer.js.map +1 -1
- package/cjs/form/form-masked-input.js +1 -1
- package/cjs/form/form-masked-input.js.map +1 -1
- package/cjs/link-list/link-list.styles.js +6 -7
- package/cjs/link-list/link-list.styles.js.map +1 -1
- package/cjs/navbar/navbar-items.styles.js +41 -27
- package/cjs/navbar/navbar-items.styles.js.map +1 -1
- package/cjs/shared/dropdown-list/dropdown-list.styles.js +1 -0
- package/cjs/shared/dropdown-list/dropdown-list.styles.js.map +1 -1
- package/cjs/tab/tab-link-chain.js +1 -1
- package/cjs/tab/tab-link-chain.js.map +1 -1
- package/cjs/timetable/timetable-header/timetable-header.js +1 -1
- package/cjs/timetable/timetable-header/timetable-header.js.map +1 -1
- package/external/dompurify/dist/purify.es.js +2 -2
- package/external/dompurify/dist/purify.es.js.map +1 -1
- package/footer/footer.d.ts +1 -1
- package/footer/footer.js +1 -1
- package/footer/footer.js.map +1 -1
- package/footer/types.d.ts +2 -0
- package/form/form-masked-input.js +1 -1
- package/form/form-masked-input.js.map +1 -1
- package/link-list/link-list.styles.js +12 -13
- package/link-list/link-list.styles.js.map +1 -1
- package/navbar/navbar-items.styles.js +29 -15
- package/navbar/navbar-items.styles.js.map +1 -1
- package/package.json +1 -1
- package/shared/dropdown-list/dropdown-list.styles.js +17 -16
- package/shared/dropdown-list/dropdown-list.styles.js.map +1 -1
- package/tab/tab-link-chain.js +1 -1
- package/tab/tab-link-chain.js.map +1 -1
- package/timetable/timetable-header/timetable-header.js +1 -1
- package/timetable/timetable-header/timetable-header.js.map +1 -1
package/cjs/footer/footer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),r=require("./footer-download-app.js"),i=require("./footer-helper.js"),n=require("./footer.style.js"),s=require("./footer-resource-addon.js"),l=require("styled-components");exports.Footer=c=>{var{children:d,links:a,lastUpdated:h,disclaimerLinks:u,showDownloadAddon:j,showResourceAddon:x,logoSrc:p,copyrightInfo:
|
|
1
|
+
"use strict";var e=require("../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),r=require("./footer-download-app.js"),i=require("./footer-helper.js"),n=require("./footer.style.js"),s=require("./footer-resource-addon.js"),l=require("styled-components");exports.Footer=c=>{var{children:d,links:a,lastUpdated:h,disclaimerLinks:u,showDownloadAddon:j,showResourceAddon:x,logoSrc:g,logoAlt:p="",copyrightInfo:k,onFooterLinkClick:m,layout:S="default",hideLogo:y}=c,L=e.__rest(c,["children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","logoAlt","copyrightInfo","onFooterLinkClick","layout","hideLogo"]);const F="stretch"===S,f=t.useContext(l.ThemeContext),v=t=>t.map(((t,r)=>{const{"data-options":i}=t,s=e.__rest(t,["data-options"]);return o.jsx("li",{children:o.jsx(n.StyledFooterLink,Object.assign({underlineStyle:"none"},s,{onClick:e=>((e,o)=>{o.onClick?(e.preventDefault(),o.onClick(e)):m&&(e.preventDefault(),m(o))})(e,t)}))},r)}));return o.jsxs(n.BaseFooter,Object.assign({},L,{children:[(()=>{let t=null;if(d)return d;if(a||j){const l=i.FooterHelper.getFooterLogoAttribute(null==f?void 0:f.resourceScheme),{src:c,alt:d}=l,h=e.__rest(l,["src","alt"]);t=o.jsxs(o.Fragment,{children:[(g||c)&&!y&&o.jsx(n.LogoSection,{"data-testid":"logo-section",children:o.jsx("img",Object.assign({src:g||c,"data-testid":"logo",alt:p||d},h))}),o.jsxs(n.LinkSectionWrapper,{children:[(null==a?void 0:a[0])&&o.jsx(n.LinkSection,{"data-testid":"link-col-1",children:v(a[0])},"link-col-1"),(null==a?void 0:a[1])&&o.jsx(n.LinkSection,{"data-testid":"link-col-2",children:v(a[1])},"link-col-2")]}),j&&o.jsx(n.AddonSection,{children:o.jsx(r.DownloadApp,{})}),!j&&x&&o.jsx(n.AddonSection,{children:o.jsx(s.ResourceAddon,{})})]})}return t?o.jsxs(o.Fragment,{children:[o.jsx(n.TopSection,{stretch:F,children:t}),o.jsx(n.FullWidthDivider,{})]}):null})(),o.jsxs(n.BottomSection,{stretch:F,children:[o.jsx(n.BottomSectionContent,{children:(()=>{const e=i.FooterHelper.getDisclaimerLinks(null==f?void 0:f.resourceScheme,u);return Object.keys(e).map((t=>o.jsx(n.DisclaimerTextLink,Object.assign({underlineStyle:"none"},e[t]),t)))})()},"disclaimer"),o.jsx(n.CopyrightSection,{children:o.jsx(n.CopyrightText,{"data-testid":"copyright-text",children:k||o.jsxs(o.Fragment,{children:["©"," ",i.FooterHelper.getCopyrightInfo(h,null==f?void 0:f.resourceScheme)]})})},"copyright")]})]}))};
|
|
2
2
|
//# sourceMappingURL=footer.js.map
|
package/cjs/footer/footer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.js","sources":["../../../src/footer/footer.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { DownloadApp } from \"./footer-download-app\";\nimport { FooterHelper, InternalDisclaimerLinks } from \"./footer-helper\";\nimport {\n AddonSection,\n BaseFooter,\n BottomSection,\n BottomSectionContent,\n CopyrightSection,\n CopyrightText,\n DisclaimerTextLink,\n FullWidthDivider,\n LinkSection,\n LinkSectionWrapper,\n LogoSection,\n StyledFooterLink,\n TopSection,\n} from \"./footer.style\";\nimport { ResourceAddon } from \"./footer-resource-addon\";\nimport { FooterLinkProps, FooterProps } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\n\nexport const Footer = <T,>({\n children,\n links,\n lastUpdated,\n disclaimerLinks,\n showDownloadAddon,\n showResourceAddon,\n logoSrc,\n copyrightInfo,\n onFooterLinkClick,\n layout = \"default\",\n hideLogo,\n ...otherProps\n}: FooterProps<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const isStretch = layout === \"stretch\";\n const theme = useContext(ThemeContext);\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = <K extends T>(\n event: React.MouseEvent<HTMLAnchorElement>,\n item: FooterLinkProps<K>\n ) => {\n /**\n * Individual link onClick will override\n * the onFooterLinkClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onFooterLinkClick) {\n event.preventDefault();\n onFooterLinkClick(item);\n } else {\n // do nothing, let default behaviour happen\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDisclaimerLinks = () => {\n const links = FooterHelper.getDisclaimerLinks(\n theme?.resourceScheme,\n disclaimerLinks\n );\n\n return (Object.keys(links) as (keyof InternalDisclaimerLinks)[]).map(\n (key) => {\n return (\n <DisclaimerTextLink\n key={key}\n underlineStyle=\"none\"\n {...links[key]}\n />\n );\n }\n );\n };\n\n const renderFooterLinks = (links: FooterLinkProps<T>[]) => {\n return links.map((link, index) => {\n const { \"data-options\": _options, ...otherProps } = link;\n\n return (\n <li key={index}>\n <StyledFooterLink\n underlineStyle=\"none\"\n {...otherProps}\n onClick={(event) => handleLinkClick(event, link)}\n />\n </li>\n );\n });\n };\n\n const renderTopSection = () => {\n let component: React.ReactNode = null;\n\n if (children) {\n return children;\n }\n\n if (links || showDownloadAddon) {\n const { src, ...otherLogoAttributes } =\n FooterHelper.getFooterLogoAttribute(theme?.resourceScheme);\n component = (\n <>\n {(logoSrc || src) && !hideLogo && (\n <LogoSection data-testid=\"logo-section\">\n <img\n src={logoSrc || src}\n data-testid=\"logo\"\n {...otherLogoAttributes}\n />\n </LogoSection>\n )}\n <LinkSectionWrapper>\n {links?.[0] && (\n <LinkSection\n key=\"link-col-1\"\n data-testid=\"link-col-1\"\n >\n {renderFooterLinks(links[0])}\n </LinkSection>\n )}\n {links?.[1] && (\n <LinkSection\n key=\"link-col-2\"\n data-testid=\"link-col-2\"\n >\n {renderFooterLinks(links[1])}\n </LinkSection>\n )}\n </LinkSectionWrapper>\n {showDownloadAddon && (\n <AddonSection>\n <DownloadApp />\n </AddonSection>\n )}\n {/* when showDownloadAddon and showResourceAddon are enabled, showDownloadAddon should take priority to being rendered */}\n {!showDownloadAddon && showResourceAddon && (\n <AddonSection>\n <ResourceAddon />\n </AddonSection>\n )}\n </>\n );\n }\n\n if (component) {\n return (\n <>\n <TopSection stretch={isStretch}>{component}</TopSection>\n <FullWidthDivider />\n </>\n );\n }\n\n return null;\n };\n return (\n <BaseFooter {...otherProps}>\n {renderTopSection()}\n <BottomSection stretch={isStretch}>\n <BottomSectionContent key=\"disclaimer\">\n {renderDisclaimerLinks()}\n </BottomSectionContent>\n <CopyrightSection key=\"copyright\">\n <CopyrightText data-testid={\"copyright-text\"}>\n {copyrightInfo || (\n <>\n ©{\" \"}\n {FooterHelper.getCopyrightInfo(\n lastUpdated,\n theme?.resourceScheme\n )}\n </>\n )}\n </CopyrightText>\n </CopyrightSection>\n </BottomSection>\n </BaseFooter>\n );\n};\n"],"names":["_a","children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","copyrightInfo","onFooterLinkClick","layout","hideLogo","otherProps","__rest","isStretch","theme","useContext","ThemeContext","renderFooterLinks","map","link","index","_options","_jsx","StyledFooterLink","Object","assign","underlineStyle","onClick","event","item","preventDefault","handleLinkClick","_jsxs","BaseFooter","component","FooterHelper","getFooterLogoAttribute","resourceScheme","src","otherLogoAttributes","_Fragment","LogoSection","LinkSectionWrapper","LinkSection","AddonSection","DownloadApp","ResourceAddon","TopSection","stretch","FullWidthDivider","renderTopSection","BottomSection","BottomSectionContent","getDisclaimerLinks","keys","key","DisclaimerTextLink","renderDisclaimerLinks","CopyrightSection","CopyrightText","getCopyrightInfo"],"mappings":"iSAsB2BA,IAAA,IAAAC,SACvBA,EAAQC,MACRA,EAAKC,YACLA,EAAWC,gBACXA,EAAeC,kBACfA,EAAiBC,kBACjBA,EAAiBC,QACjBA,EAAOC,
|
|
1
|
+
{"version":3,"file":"footer.js","sources":["../../../src/footer/footer.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { DownloadApp } from \"./footer-download-app\";\nimport { FooterHelper, InternalDisclaimerLinks } from \"./footer-helper\";\nimport {\n AddonSection,\n BaseFooter,\n BottomSection,\n BottomSectionContent,\n CopyrightSection,\n CopyrightText,\n DisclaimerTextLink,\n FullWidthDivider,\n LinkSection,\n LinkSectionWrapper,\n LogoSection,\n StyledFooterLink,\n TopSection,\n} from \"./footer.style\";\nimport { ResourceAddon } from \"./footer-resource-addon\";\nimport { FooterLinkProps, FooterProps } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\n\nexport const Footer = <T,>({\n children,\n links,\n lastUpdated,\n disclaimerLinks,\n showDownloadAddon,\n showResourceAddon,\n logoSrc,\n logoAlt = \"\",\n copyrightInfo,\n onFooterLinkClick,\n layout = \"default\",\n hideLogo,\n ...otherProps\n}: FooterProps<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const isStretch = layout === \"stretch\";\n const theme = useContext(ThemeContext);\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = <K extends T>(\n event: React.MouseEvent<HTMLAnchorElement>,\n item: FooterLinkProps<K>\n ) => {\n /**\n * Individual link onClick will override\n * the onFooterLinkClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onFooterLinkClick) {\n event.preventDefault();\n onFooterLinkClick(item);\n } else {\n // do nothing, let default behaviour happen\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDisclaimerLinks = () => {\n const links = FooterHelper.getDisclaimerLinks(\n theme?.resourceScheme,\n disclaimerLinks\n );\n\n return (Object.keys(links) as (keyof InternalDisclaimerLinks)[]).map(\n (key) => {\n return (\n <DisclaimerTextLink\n key={key}\n underlineStyle=\"none\"\n {...links[key]}\n />\n );\n }\n );\n };\n\n const renderFooterLinks = (links: FooterLinkProps<T>[]) => {\n return links.map((link, index) => {\n const { \"data-options\": _options, ...otherProps } = link;\n\n return (\n <li key={index}>\n <StyledFooterLink\n underlineStyle=\"none\"\n {...otherProps}\n onClick={(event) => handleLinkClick(event, link)}\n />\n </li>\n );\n });\n };\n\n const renderTopSection = () => {\n let component: React.ReactNode = null;\n\n if (children) {\n return children;\n }\n\n if (links || showDownloadAddon) {\n const { src, alt, ...otherLogoAttributes } =\n FooterHelper.getFooterLogoAttribute(theme?.resourceScheme);\n component = (\n <>\n {(logoSrc || src) && !hideLogo && (\n <LogoSection data-testid=\"logo-section\">\n <img\n src={logoSrc || src}\n data-testid=\"logo\"\n alt={logoAlt || alt}\n {...otherLogoAttributes}\n />\n </LogoSection>\n )}\n <LinkSectionWrapper>\n {links?.[0] && (\n <LinkSection\n key=\"link-col-1\"\n data-testid=\"link-col-1\"\n >\n {renderFooterLinks(links[0])}\n </LinkSection>\n )}\n {links?.[1] && (\n <LinkSection\n key=\"link-col-2\"\n data-testid=\"link-col-2\"\n >\n {renderFooterLinks(links[1])}\n </LinkSection>\n )}\n </LinkSectionWrapper>\n {showDownloadAddon && (\n <AddonSection>\n <DownloadApp />\n </AddonSection>\n )}\n {/* when showDownloadAddon and showResourceAddon are enabled, showDownloadAddon should take priority to being rendered */}\n {!showDownloadAddon && showResourceAddon && (\n <AddonSection>\n <ResourceAddon />\n </AddonSection>\n )}\n </>\n );\n }\n\n if (component) {\n return (\n <>\n <TopSection stretch={isStretch}>{component}</TopSection>\n <FullWidthDivider />\n </>\n );\n }\n\n return null;\n };\n return (\n <BaseFooter {...otherProps}>\n {renderTopSection()}\n <BottomSection stretch={isStretch}>\n <BottomSectionContent key=\"disclaimer\">\n {renderDisclaimerLinks()}\n </BottomSectionContent>\n <CopyrightSection key=\"copyright\">\n <CopyrightText data-testid={\"copyright-text\"}>\n {copyrightInfo || (\n <>\n ©{\" \"}\n {FooterHelper.getCopyrightInfo(\n lastUpdated,\n theme?.resourceScheme\n )}\n </>\n )}\n </CopyrightText>\n </CopyrightSection>\n </BottomSection>\n </BaseFooter>\n );\n};\n"],"names":["_a","children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","logoAlt","copyrightInfo","onFooterLinkClick","layout","hideLogo","otherProps","__rest","isStretch","theme","useContext","ThemeContext","renderFooterLinks","map","link","index","_options","_jsx","StyledFooterLink","Object","assign","underlineStyle","onClick","event","item","preventDefault","handleLinkClick","_jsxs","BaseFooter","component","FooterHelper","getFooterLogoAttribute","resourceScheme","src","alt","otherLogoAttributes","_Fragment","LogoSection","LinkSectionWrapper","LinkSection","AddonSection","DownloadApp","ResourceAddon","TopSection","stretch","FullWidthDivider","renderTopSection","BottomSection","BottomSectionContent","getDisclaimerLinks","keys","key","DisclaimerTextLink","renderDisclaimerLinks","CopyrightSection","CopyrightText","getCopyrightInfo"],"mappings":"iSAsB2BA,IAAA,IAAAC,SACvBA,EAAQC,MACRA,EAAKC,YACLA,EAAWC,gBACXA,EAAeC,kBACfA,EAAiBC,kBACjBA,EAAiBC,QACjBA,EAAOC,QACPA,EAAU,GAAEC,cACZA,EAAaC,kBACbA,EAAiBC,OACjBA,EAAS,UAASC,SAClBA,GAAQZ,EACLa,EAAUC,EAAAA,OAAAd,EAbU,0KAkBvB,MAAMe,EAAuB,YAAXJ,EACZK,EAAQC,EAAAA,WAAWC,gBA6CnBC,EAAqBjB,GAChBA,EAAMkB,KAAI,CAACC,EAAMC,KACpB,MAAQ,eAAgBC,GAA4BF,EAAfR,EAAUC,SAAKO,EAA9C,CAAA,iBAEN,OACIG,EAAAA,IAAA,KAAA,CAAAvB,SACIuB,EAAAA,IAACC,EAAAA,iBAAgBC,OAAAC,OAAA,CACbC,eAAe,QACXf,EAAU,CACdgB,QAAUC,GAlDN,EACpBA,EACAC,KAMIA,EAAKF,SACLC,EAAME,iBACND,EAAKF,QAAQC,IACNpB,IACPoB,EAAME,iBACNtB,EAAkBqB,GACf,EAoC6BE,CAAgBH,EAAOT,OAJ1CC,EAMJ,IAuEjB,OACIY,EAAAA,KAACC,EAAAA,WAAUT,OAAAC,OAAA,CAAA,EAAKd,EAAU,CAAAZ,SAAA,CAnEL,MACrB,IAAImC,EAA6B,KAEjC,GAAInC,EACA,OAAOA,EAGX,GAAIC,GAASG,EAAmB,CAC5B,MAAML,EACFqC,eAAaC,uBAAuBtB,aAAK,EAALA,EAAOuB,iBADzCC,IAAEA,EAAGC,IAAEA,GAAGzC,EAAK0C,EAAmB5B,EAAAA,OAAAd,EAAlC,CAAA,MAAA,QAENoC,EACIF,EAAAA,KAAAS,WAAA,CAAA1C,SAAA,EACMM,GAAWiC,KAAS5B,GAClBY,EAAAA,IAACoB,EAAAA,YAAW,CAAA,cAAa,eAAc3C,SACnCuB,MAAA,MAAAE,OAAAC,OAAA,CACIa,IAAKjC,GAAWiC,EAAG,cACP,OACZC,IAAKjC,GAAWiC,GACZC,MAIhBR,EAAAA,KAACW,EAAAA,mBAAkB,CAAA5C,SAAA,EACdC,aAAK,EAALA,EAAQ,KACLsB,EAAAA,IAACsB,cAAW,CAAA,cAEI,aAAY7C,SAEvBkB,EAAkBjB,EAAM,KAHrB,eAMXA,aAAK,EAALA,EAAQ,KACLsB,MAACsB,EAAAA,YAAW,CAAA,cAEI,aAAY7C,SAEvBkB,EAAkBjB,EAAM,KAHrB,iBAOfG,GACGmB,EAAAA,IAACuB,eAAY,CAAA9C,SACTuB,EAAAA,IAACwB,EAAAA,YAAW,OAIlB3C,GAAqBC,GACnBkB,EAAAA,IAACuB,eAAY,CAAA9C,SACTuB,EAAAA,IAACyB,EAAAA,cAAa,QAKlC,CAEA,OAAIb,EAEIF,EAAAA,KAAAS,EAAAA,SAAA,CAAA1C,SAAA,CACIuB,EAAAA,IAAC0B,EAAAA,WAAU,CAACC,QAASpC,EAASd,SAAGmC,IACjCZ,EAAAA,IAAC4B,EAAAA,iBAAgB,CAAA,MAKtB,IAAI,EAINC,GACDnB,EAAAA,KAACoB,EAAAA,cAAa,CAACH,QAASpC,EAASd,SAAA,CAC7BuB,EAAAA,IAAC+B,EAAAA,qBAAoB,CAAAtD,SAzGH,MAC1B,MAAMC,EAAQmC,EAAAA,aAAamB,mBACvBxC,aAAK,EAALA,EAAOuB,eACPnC,GAGJ,OAAQsB,OAAO+B,KAAKvD,GAA6CkB,KAC5DsC,GAEOlC,MAACmC,EAAAA,mBAAkBjC,OAAAC,OAAA,CAEfC,eAAe,QACX1B,EAAMwD,IAFLA,IAMpB,EA0FYE,IADqB,cAG1BpC,EAAAA,IAACqC,EAAAA,iBAAgB,CAAA5D,SACbuB,EAAAA,IAACsC,EAAAA,cAAa,CAAA,cAAc,iBAAgB7D,SACvCQ,GACGyB,EAAAA,KAAAS,EAAAA,SAAA,CAAA1C,SAAA,CAAA,IACW,IACNoC,EAAAA,aAAa0B,iBACV5D,EACAa,aAAK,EAALA,EAAOuB,sBAPL,mBAcjB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../_virtual/_tslib.js"),
|
|
1
|
+
"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),l=require("../masked-input/masked-input.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./form-wrapper.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=a(r).default.forwardRef(((r,a)=>{const{label:i,errorMessage:d,id:u,"data-error-testid":C,"data-testid":n,layoutType:p,mobileCols:x,tabletCols:m,desktopCols:b,xxsCols:j,xsCols:c,smCols:f,mdCols:q,lgCols:g,xlCols:k,xxlCols:y}=r,v=e.__rest(r,["label","errorMessage","id","data-error-testid","data-testid","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols"]),h=t.useId(),M=null!=u?u:`form-field-masked-input-${h}`;return s.jsx(o.FormWrapper,{id:M,label:i,errorMessage:d,disabled:v.disabled,"data-error-testid":C,layoutType:p,mobileCols:x,tabletCols:m,desktopCols:b,xxsCols:j,xsCols:c,smCols:f,mdCols:q,lgCols:g,xlCols:k,xxlCols:y,children:s.jsx(l.MaskedInput,Object.assign({ref:a,id:`${M}-base`,"data-testid":n?`${n}-base`:void 0,error:!!d},v))})}));exports.FormMaskedInput=i;
|
|
2
2
|
//# sourceMappingURL=form-masked-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-masked-input.js","sources":["../../../src/form/form-masked-input.tsx"],"sourcesContent":["import React from \"react\";\nimport { MaskedInput } from \"../masked-input/masked-input\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport { FormMaskedInputProps } from \"./types\";\n\nconst Component = (\n props: FormMaskedInputProps,\n ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n const {\n label,\n errorMessage,\n id,\n \"data-error-testid\": errorTestId,\n \"data-testid\": testId,\n layoutType,\n mobileCols,\n tabletCols,\n desktopCols,\n ...otherProps\n } = props;\n\n const internalId = useId();\n const inputId = id ?? `form-field-masked-input-${internalId}`;\n\n return (\n <FormWrapper\n id={inputId}\n label={label}\n errorMessage={errorMessage}\n disabled={otherProps.disabled}\n data-error-testid={errorTestId}\n layoutType={layoutType}\n mobileCols={mobileCols}\n tabletCols={tabletCols}\n desktopCols={desktopCols}\n >\n <MaskedInput\n ref={ref}\n id={`${inputId}-base`}\n data-testid={testId ? `${testId}-base` : undefined}\n error={!!errorMessage}\n {...otherProps}\n />\n </FormWrapper>\n );\n};\n\nexport const FormMaskedInput = React.forwardRef(Component);\n"],"names":["FormMaskedInput","React","forwardRef","props","ref","label","errorMessage","id","errorTestId","testId","layoutType","mobileCols","tabletCols","desktopCols","
|
|
1
|
+
{"version":3,"file":"form-masked-input.js","sources":["../../../src/form/form-masked-input.tsx"],"sourcesContent":["import React from \"react\";\nimport { MaskedInput } from \"../masked-input/masked-input\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport { FormMaskedInputProps } from \"./types\";\n\nconst Component = (\n props: FormMaskedInputProps,\n ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n const {\n label,\n errorMessage,\n id,\n \"data-error-testid\": errorTestId,\n \"data-testid\": testId,\n layoutType,\n mobileCols,\n tabletCols,\n desktopCols,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n } = props;\n\n const internalId = useId();\n const inputId = id ?? `form-field-masked-input-${internalId}`;\n\n return (\n <FormWrapper\n id={inputId}\n label={label}\n errorMessage={errorMessage}\n disabled={otherProps.disabled}\n data-error-testid={errorTestId}\n layoutType={layoutType}\n mobileCols={mobileCols}\n tabletCols={tabletCols}\n desktopCols={desktopCols}\n xxsCols={xxsCols}\n xsCols={xsCols}\n smCols={smCols}\n mdCols={mdCols}\n lgCols={lgCols}\n xlCols={xlCols}\n xxlCols={xxlCols}\n >\n <MaskedInput\n ref={ref}\n id={`${inputId}-base`}\n data-testid={testId ? `${testId}-base` : undefined}\n error={!!errorMessage}\n {...otherProps}\n />\n </FormWrapper>\n );\n};\n\nexport const FormMaskedInput = React.forwardRef(Component);\n"],"names":["FormMaskedInput","React","forwardRef","props","ref","label","errorMessage","id","errorTestId","testId","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","internalId","useId","inputId","_jsx","FormWrapper","disabled","children","MaskedInput","Object","assign","undefined","error"],"mappings":"weAMA,MAyDaA,OAAkBC,QAAMC,YAzDnB,CACdC,EACAC,KAEA,MAAMC,MACFA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,EAAUC,WACVA,EAAUC,WACVA,EAAUC,YACVA,EAAWC,QACXA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAEAjB,EADGkB,WACHlB,EAlBE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,YAoBAmB,EAAaC,EAAAA,QACbC,EAAUjB,QAAAA,EAAM,2BAA2Be,IAEjD,OACIG,EAAAA,IAACC,EAAAA,YAAW,CACRnB,GAAIiB,EACJnB,MAAOA,EACPC,aAAcA,EACdqB,SAAUN,EAAWM,SAAQ,oBACVnB,EACnBE,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,QAASA,EACTC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EAAOQ,SAEhBH,EAAAA,IAACI,EAAAA,YAAWC,OAAAC,OAAA,CACR3B,IAAKA,EACLG,GAAI,GAAGiB,SAAc,cACRf,EAAS,GAAGA,cAAgBuB,EACzCC,QAAS3B,GACLe,KAEE"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
"use strict";var e=require("@lifesg/react-icons/chevron-right"),r=require("@lifesg/react-icons/minus"),o=require("@lifesg/react-icons/plus"),t=require("@react-spring/web"),i=require("styled-components"),d=require("../theme/index.js"),l=require("../typography/typography.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(i);const s=i.css`
|
|
2
|
-
height: 1.
|
|
3
|
-
width: 1.
|
|
2
|
+
height: 1.375rem;
|
|
3
|
+
width: 1.375rem;
|
|
4
4
|
color: ${d.Colour["icon-primary"]};
|
|
5
5
|
`,u=a.default.div`
|
|
6
6
|
border-top: ${d.Border["width-010"]} ${d.Border.solid} ${d.Colour.border};
|
|
7
7
|
border-bottom: ${d.Border["width-010"]} ${d.Border.solid} ${d.Colour.border};
|
|
8
8
|
`,p=a.default(l.Typography.HeadingSM)`
|
|
9
9
|
color: ${d.Colour["text-primary"]};
|
|
10
|
-
margin-bottom: 0.5rem;
|
|
11
10
|
`,c=a.default(l.Typography.HeadingXS)`
|
|
12
11
|
color: ${d.Colour["text-primary"]};
|
|
13
12
|
`,$=a.default(e.ChevronRightIcon)`
|
|
14
13
|
${s}
|
|
15
|
-
`,
|
|
14
|
+
`,f=a.default.a`
|
|
16
15
|
padding: 1rem 0;
|
|
17
16
|
display: flex;
|
|
18
17
|
justify-content: space-between;
|
|
@@ -30,12 +29,12 @@
|
|
|
30
29
|
color: ${d.Colour["text-hover"]};
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
|
-
`,
|
|
32
|
+
`,g=a.default.div`
|
|
34
33
|
display: flex;
|
|
35
34
|
flex-direction: column;
|
|
36
35
|
flex: 1;
|
|
37
36
|
margin-right: 1rem;
|
|
38
|
-
`,
|
|
37
|
+
`,m=a.default(l.Typography.BodyMD)`
|
|
39
38
|
margin-top: 0.25rem;
|
|
40
39
|
`,x=t.animated(a.default.div`
|
|
41
40
|
overflow: hidden;
|
|
@@ -83,5 +82,5 @@
|
|
|
83
82
|
}
|
|
84
83
|
}
|
|
85
84
|
`}
|
|
86
|
-
`;exports.Container=u,exports.Description=
|
|
85
|
+
`;exports.Container=u,exports.Description=m,exports.Expandable=x,exports.ExpandableChild=h,exports.ItemContainer=f,exports.ItemContentContainer=g,exports.ItemIcon=$,exports.ItemTitleDefault=p,exports.ItemTitleSmall=c,exports.ToggleButton=v,exports.ToggleButtonLabel=y,exports.ViewLessIcon=C,exports.ViewMoreIcon=b;
|
|
87
86
|
//# sourceMappingURL=link-list.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-list.styles.js","sources":["../../../src/link-list/link-list.styles.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ExpandableChildStyleProps {\n $border?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n $loading?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst iconStyle = css`\n height: 1.
|
|
1
|
+
{"version":3,"file":"link-list.styles.js","sources":["../../../src/link-list/link-list.styles.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ExpandableChildStyleProps {\n $border?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n $loading?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst iconStyle = css`\n height: 1.375rem;\n width: 1.375rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const Container = styled.div`\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const ItemTitleDefault = styled(Typography.HeadingSM)`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ItemTitleSmall = styled(Typography.HeadingXS)`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ItemIcon = styled(ChevronRightIcon)`\n ${iconStyle}\n`;\n\nexport const ItemContainer = styled.a`\n padding: 1rem 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 4rem;\n\n &:not(:last-of-type) {\n border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n }\n\n &:hover {\n ${ItemTitleDefault},\n ${ItemTitleSmall},\n ${ItemIcon} {\n color: ${Colour[\"text-hover\"]};\n }\n }\n`;\n\nexport const ItemContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n margin-right: 1rem;\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n margin-top: 0.25rem;\n`;\n\nexport const Expandable = animated(styled.div`\n overflow: hidden;\n`);\n\nexport const ExpandableChild = styled.div<ExpandableChildStyleProps>`\n ${(props) =>\n props.$border &&\n css`\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n `}\n`;\n\nexport const ToggleButtonLabel = styled(Typography.BodyMD)`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ViewMoreIcon = styled(PlusIcon)`\n ${iconStyle}\n`;\nexport const ViewLessIcon = styled(MinusIcon)`\n ${iconStyle}\n`;\n\nexport const ToggleButton = styled.button<ToggleButtonStyleProps>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem 0;\n border: none;\n background: none;\n cursor: pointer;\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n gap: 1rem;\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: default;\n flex-direction: row-reverse;\n\n ${ToggleButtonLabel},\n ${ViewMoreIcon},\n ${ViewLessIcon} {\n color: ${Colour[\"text-disabled\"]};\n text-decoration: none;\n }\n `}\n\n ${(props) =>\n !props.$loading &&\n css`\n &:hover {\n ${ToggleButtonLabel},\n ${ViewMoreIcon},\n ${ViewLessIcon} {\n color: ${Colour[\"text-hover\"]};\n text-decoration: underline;\n }\n }\n `}\n`;\n"],"names":["iconStyle","css","Colour","Container","styled","div","Border","solid","border","ItemTitleDefault","Typography","HeadingSM","ItemTitleSmall","HeadingXS","ItemIcon","ChevronRightIcon","ItemContainer","a","ItemContentContainer","Description","BodyMD","Expandable","animated","ExpandableChild","props","$border","ToggleButtonLabel","ViewMoreIcon","PlusIcon","ViewLessIcon","MinusIcon","ToggleButton","button","$loading"],"mappings":"sWAuBA,MAAMA,EAAYC,EAAAA,GAAG;;;aAGRC,EAAAA,OAAO;EAGPC,EAAYC,EAAAA,QAAOC,GAAG;kBACjBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;qBAC3CF,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;EAGtDC,EAAmBL,EAAAA,QAAOM,aAAWC,UAAU;aAC/CT,EAAAA,OAAO;EAGPU,EAAiBR,EAAAA,QAAOM,aAAWG,UAAU;aAC7CX,EAAAA,OAAO;EAGPY,EAAWV,EAAAA,QAAOW,EAAAA,iBAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAAA,QAAOa,CAAC;;;;;;;;yBAQZX,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;;;UAI7DC;UACAG;UACAE;qBACWZ,EAAAA,OAAO;;;EAKfgB,EAAuBd,EAAAA,QAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAAA,QAAOM,aAAWU,OAAO;;EAIvCC,EAAaC,EAAAA,SAASlB,EAAAA,QAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAAA,QAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,KAAG;0BACeK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;EAI3DkB,EAAoBtB,EAAAA,QAAOM,aAAWU,OAAO;aAC7ClB,EAAAA,OAAO;EAGPyB,EAAevB,EAAAA,QAAOwB,EAAAA,SAAS;MACtC5B;EAEO6B,EAAezB,EAAAA,QAAO0B,EAAAA,UAAU;MACvC9B;EAGO+B,EAAe3B,EAAAA,QAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;;MAGzDgB,GACCA,EAAMS,UACNhC,KAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAAA,OAAO;;;;;MAKzBsB,IACEA,EAAMS,UACPhC,KAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAAA,OAAO;;;;;"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),
|
|
1
|
+
"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),o=require("../theme/index.js"),i=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);const l=a.default.ul`
|
|
2
2
|
display: flex;
|
|
3
3
|
list-style: none;
|
|
4
4
|
position: relative;
|
|
5
5
|
|
|
6
6
|
${e=>e.$alignLeft&&"margin-right: auto;"}
|
|
7
7
|
|
|
8
|
-
${
|
|
8
|
+
${o.MediaQuery.MaxWidth.lg} {
|
|
9
9
|
display: none;
|
|
10
10
|
}
|
|
11
|
-
`,d=
|
|
11
|
+
`,d=a.default.ul`
|
|
12
12
|
display: none;
|
|
13
13
|
list-style: none;
|
|
14
14
|
|
|
15
|
-
${
|
|
15
|
+
${o.MediaQuery.MaxWidth.lg} {
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
}
|
|
20
|
-
`,s=
|
|
20
|
+
`,s=a.default.li`
|
|
21
21
|
display: flex;
|
|
22
22
|
margin: 0 1rem;
|
|
23
23
|
|
|
@@ -26,37 +26,38 @@
|
|
|
26
26
|
margin-left: ${e=>e.$hiddenBranding?"-0.5rem":"0"};
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
${
|
|
29
|
+
${o.MediaQuery.MaxWidth.lg} {
|
|
30
30
|
flex-direction: column;
|
|
31
31
|
padding: 0.125rem 0;
|
|
32
32
|
width: 100%;
|
|
33
33
|
margin-left: 0rem;
|
|
34
34
|
}
|
|
35
35
|
`,c=t.css`
|
|
36
|
-
${e=>
|
|
36
|
+
${e=>o.Font[`body-md-${e.weight}`]}
|
|
37
37
|
|
|
38
38
|
display: flex;
|
|
39
39
|
position: relative;
|
|
40
40
|
align-items: center;
|
|
41
41
|
text-align: center;
|
|
42
|
-
color: ${
|
|
42
|
+
color: ${i.ThemeNavbar["navbar-link-colour-text"]};
|
|
43
43
|
height: 100%;
|
|
44
44
|
|
|
45
45
|
&:active,
|
|
46
46
|
&:hover,
|
|
47
|
-
&:focus
|
|
48
|
-
|
|
47
|
+
&:focus,
|
|
48
|
+
&:focus-within {
|
|
49
|
+
color: ${e=>e.$selected?i.ThemeNavbar["navbar-link-colour-text-selected-hover"]:i.ThemeNavbar["navbar-link-colour-text-hover"]};
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
${
|
|
52
|
+
${o.MediaQuery.MaxWidth.lg} {
|
|
52
53
|
width: 100%;
|
|
53
54
|
padding: 0.5rem 1rem;
|
|
54
55
|
text-align: left;
|
|
55
56
|
align-items: flex-start;
|
|
56
57
|
}
|
|
57
|
-
`,u=
|
|
58
|
+
`,u=a.default.a`
|
|
58
59
|
${c}
|
|
59
|
-
`,h=
|
|
60
|
+
`,h=a.default.button`
|
|
60
61
|
${c}
|
|
61
62
|
background: none;
|
|
62
63
|
border: 0;
|
|
@@ -67,7 +68,7 @@
|
|
|
67
68
|
box-shadow: none;
|
|
68
69
|
font: inherit;
|
|
69
70
|
color: inherit;
|
|
70
|
-
`,p=
|
|
71
|
+
`,p=a.default.div`
|
|
71
72
|
flex: 1;
|
|
72
73
|
margin-top: 0.25rem;
|
|
73
74
|
|
|
@@ -76,19 +77,26 @@
|
|
|
76
77
|
-webkit-box-orient: vertical;
|
|
77
78
|
-webkit-line-clamp: 3;
|
|
78
79
|
white-space: pre-wrap;
|
|
79
|
-
`,
|
|
80
|
+
`,f=a.default.div`
|
|
80
81
|
position: absolute;
|
|
81
82
|
bottom: 0;
|
|
82
83
|
left: 0;
|
|
83
84
|
right: 0;
|
|
84
85
|
height: 0.25rem;
|
|
85
|
-
background-color: ${
|
|
86
|
+
background-color: ${o.Colour["border-selected"]};
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
${e=>e.$selected&&t.css`
|
|
89
|
+
${u}:active &,
|
|
90
|
+
${u}:hover &,
|
|
91
|
+
${u}:focus &,
|
|
92
|
+
${h}:active &,
|
|
93
|
+
${h}:hover &,
|
|
94
|
+
${h}:focus & {
|
|
95
|
+
background-color: ${o.Colour["border-selected-hover"]};
|
|
96
|
+
}
|
|
97
|
+
`};
|
|
90
98
|
|
|
91
|
-
${
|
|
99
|
+
${o.MediaQuery.MaxWidth.lg} {
|
|
92
100
|
left: 0;
|
|
93
101
|
right: unset;
|
|
94
102
|
top: 0;
|
|
@@ -96,20 +104,26 @@
|
|
|
96
104
|
height: 100%;
|
|
97
105
|
width: 0.25rem;
|
|
98
106
|
}
|
|
99
|
-
`,
|
|
107
|
+
`,m=a.default.div`
|
|
100
108
|
padding-left: 0.5rem;
|
|
101
109
|
margin-right: -0.5rem;
|
|
102
|
-
`,
|
|
110
|
+
`,g=a.default(r.ClickableIcon)`
|
|
103
111
|
padding: 0.5rem;
|
|
104
112
|
transform: rotate(${e=>e.$selected?0:180}deg);
|
|
105
113
|
transition: transform 300ms ease-in-out;
|
|
106
114
|
margin: auto 0.25rem auto 0;
|
|
107
|
-
|
|
115
|
+
`,$=a.default(e.ChevronUpIcon)`
|
|
108
116
|
height: 1.25rem;
|
|
109
117
|
width: 1.25rem;
|
|
110
|
-
color: ${
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
color: ${o.Colour.icon};
|
|
119
|
+
|
|
120
|
+
${u}:active &,
|
|
121
|
+
${u}:hover &,
|
|
122
|
+
${u}:focus &,
|
|
123
|
+
${h}:active &,
|
|
124
|
+
${h}:hover &,
|
|
125
|
+
${h}:focus & {
|
|
126
|
+
color: ${e=>e.$selected?o.Colour["icon-selected-hover"]:o.Colour["icon-hover"]};
|
|
113
127
|
}
|
|
114
|
-
`;exports.ChevronIcon
|
|
128
|
+
`;exports.ChevronIcon=$,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=m,exports.LinkIndicator=f,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
|
|
115
129
|
//# sourceMappingURL=navbar-items.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n align-items: flex-start;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n margin-top: 0.25rem;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n
|
|
1
|
+
{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n align-items: flex-start;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n margin-top: 0.25rem;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n padding-left: 0.5rem;\n margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"uTA4BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;iBAOPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAAA,QAAO6B,EAAAA,cAA0B;;;aAG/CL,EAAAA,OAAOM;;MAEdb;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;"}
|
|
@@ -105,6 +105,7 @@
|
|
|
105
105
|
display: flex;
|
|
106
106
|
padding: ${n.Spacing["spacing-12"]} ${n.Spacing["spacing-16"]};
|
|
107
107
|
align-items: center;
|
|
108
|
+
color: ${n.Colour.text};
|
|
108
109
|
`,y=p.default(e.ExclamationCircleFillIcon)`
|
|
109
110
|
margin-right: ${n.Spacing["spacing-4"]};
|
|
110
111
|
color: ${n.Colour["icon-error"]};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\nimport {\n Border,\n Breakpoint,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Spacing,\n} from \"../../theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n $width?: number;\n $customWidth?: string;\n $variant: DropdownVariantType;\n}\n\nexport interface ListItemStyleProps {\n $active: boolean;\n $selected: boolean;\n $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n\n --x-spacing: 0px;\n --available-width: calc(100vw - var(--x-spacing) * 2);\n\n ${MediaQuery.MaxWidth.sm} {\n --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n max-height: 15rem;\n }\n\n ${MediaQuery.MaxWidth.xs} {\n --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n }\n\n max-width: var(--available-width);\n\n ${(props) => {\n if (props.$customWidth) return `width: ${props.$customWidth};`;\n if (props.$width)\n return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n return \"min-width: min(23rem, var(--available-width));\";\n }}\n\n max-height: min(27rem, var(--available-height, infinity * 1px));\n overflow: hidden;\n overflow-y: auto;\n ${(props) =>\n props.$variant === \"small\"\n ? Font[\"body-md-regular\"]\n : Font[\"body-baseline-regular\"]}\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n`;\nexport const List = styled.div`\n background: transparent;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n display: flex;\n align-items: flex-start;\n gap: ${Spacing[\"spacing-8\"]};\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n cursor: pointer;\n border: none;\n border-radius: ${Radius[\"none\"]};\n outline: none;\n\n ${(props) => {\n if (props.$disabled) {\n return css`\n cursor: not-allowed;\n `;\n } else if (props.$active && props.$selected) {\n return css`\n background: ${Colour[\"bg-hover\"]};\n `;\n } else if (props.$active) {\n return css`\n background: ${Colour[\"bg-hover-subtle\"]};\n `;\n }\n }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1rem;\n color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n flex-shrink: 0;\n height: 1lh;\n width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n cursor: pointer;\n overflow: hidden;\n color: ${Colour[\"text-primary\"]};\n font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n ${Font[\"body-md-semibold\"]}\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n width: 100%;\n display: flex;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n align-items: center;\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n margin-right: ${Spacing[\"spacing-4\"]};\n color: ${Colour[\"icon-error\"]};\n height: 1em;\n width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n margin-right: ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n ${applyHtmlContentStyle()}\n color: ${Colour[\"text-subtle\"]};\n padding: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-12\"]}\n ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","Border","Colour","Radius","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","props","$customWidth","$width","$variant","Font","List","Spacing","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"8iBA0CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;cAC1CC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;MAKvBE,EAAAA,WAAWC,SAASC;uBACHC,EAAAA,WAAW;;;;MAI5BH,EAAAA,WAAWC,SAASG;uBACHD,EAAAA,WAAW;;;MAG5BH,EAAAA,WAAWC,SAASI;uBACHF,EAAAA,WAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;;;;;;;;;;sBAWGZ,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;EAIzBY,EAAOhB,EAAAA,QAAOC,GAAG;;eAEfgB,EAAAA,QAAQ;EAOVC,EAAWlB,EAAAA,QAAOmB,EAAsB;;;WAG1CF,EAAAA,QAAQ;eACJA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;qBAG3Bb,EAAAA,OAAa;;;MAG3BO,GACKA,EAAMS,UACCC,KAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,KAAG;8BACQlB,EAAAA,OAAO;cAElBQ,EAAMW,QACND,KAAG;8BACQlB,EAAAA,OAAO;mBAFtB;EAQFqB,EAAoBxB,EAAAA,QAAOyB,EAAAA,SAAS;;;;aAIpCtB,EAAAA,OAAO;EAGPuB,EAAsB1B,EAAAA,QAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAAA,QAAO4B,EAAAA,mBAAmB;;;;aAItDzB,EAAAA,OAAO;EAGP0B,EAA8B7B,EAAAA,QAAO8B,EAAAA,WAAW;;;;aAIhD3B,EAAAA,OAAO;EAGP4B,EAA4B/B,EAAAA,QAAOgC,EAAAA,eAAe;;;;aAIlD7B,EAAAA,OAAO;EAOP8B,EAAqBjC,EAAAA,QAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAAA,QAAOmC,EAAAA,YAAY;;;aAG1ChC,EAAAA,OAAO;;EAIPiC,EAAiBpC,EAAAA,QAAOkC,EAAqB;MACpDnB,EAAAA,KAAK;EAGEsB,EAAkBrC,EAAAA,QAAOkC,EAAqB;MACrDnB,EAAAA,KAAK;eACIE,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;EAGlCqB,EAAuBtC,EAAAA,QAAOC,GAAG;;;eAG/BgB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;
|
|
1
|
+
{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\nimport {\n Border,\n Breakpoint,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Spacing,\n} from \"../../theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n $width?: number;\n $customWidth?: string;\n $variant: DropdownVariantType;\n}\n\nexport interface ListItemStyleProps {\n $active: boolean;\n $selected: boolean;\n $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n\n --x-spacing: 0px;\n --available-width: calc(100vw - var(--x-spacing) * 2);\n\n ${MediaQuery.MaxWidth.sm} {\n --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n max-height: 15rem;\n }\n\n ${MediaQuery.MaxWidth.xs} {\n --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n }\n\n max-width: var(--available-width);\n\n ${(props) => {\n if (props.$customWidth) return `width: ${props.$customWidth};`;\n if (props.$width)\n return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n return \"min-width: min(23rem, var(--available-width));\";\n }}\n\n max-height: min(27rem, var(--available-height, infinity * 1px));\n overflow: hidden;\n overflow-y: auto;\n ${(props) =>\n props.$variant === \"small\"\n ? Font[\"body-md-regular\"]\n : Font[\"body-baseline-regular\"]}\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n`;\nexport const List = styled.div`\n background: transparent;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n display: flex;\n align-items: flex-start;\n gap: ${Spacing[\"spacing-8\"]};\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n cursor: pointer;\n border: none;\n border-radius: ${Radius[\"none\"]};\n outline: none;\n\n ${(props) => {\n if (props.$disabled) {\n return css`\n cursor: not-allowed;\n `;\n } else if (props.$active && props.$selected) {\n return css`\n background: ${Colour[\"bg-hover\"]};\n `;\n } else if (props.$active) {\n return css`\n background: ${Colour[\"bg-hover-subtle\"]};\n `;\n }\n }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1rem;\n color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n flex-shrink: 0;\n height: 1lh;\n width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n cursor: pointer;\n overflow: hidden;\n color: ${Colour[\"text-primary\"]};\n font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n ${Font[\"body-md-semibold\"]}\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n width: 100%;\n display: flex;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n align-items: center;\n color: ${Colour[\"text\"]};\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n margin-right: ${Spacing[\"spacing-4\"]};\n color: ${Colour[\"icon-error\"]};\n height: 1em;\n width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n margin-right: ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n ${applyHtmlContentStyle()}\n color: ${Colour[\"text-subtle\"]};\n padding: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-12\"]}\n ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","Border","Colour","Radius","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","props","$customWidth","$width","$variant","Font","List","Spacing","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"8iBA0CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;cAC1CC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;MAKvBE,EAAAA,WAAWC,SAASC;uBACHC,EAAAA,WAAW;;;;MAI5BH,EAAAA,WAAWC,SAASG;uBACHD,EAAAA,WAAW;;;MAG5BH,EAAAA,WAAWC,SAASI;uBACHF,EAAAA,WAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;;;;;;;;;;sBAWGZ,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;EAIzBY,EAAOhB,EAAAA,QAAOC,GAAG;;eAEfgB,EAAAA,QAAQ;EAOVC,EAAWlB,EAAAA,QAAOmB,EAAsB;;;WAG1CF,EAAAA,QAAQ;eACJA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;qBAG3Bb,EAAAA,OAAa;;;MAG3BO,GACKA,EAAMS,UACCC,KAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,KAAG;8BACQlB,EAAAA,OAAO;cAElBQ,EAAMW,QACND,KAAG;8BACQlB,EAAAA,OAAO;mBAFtB;EAQFqB,EAAoBxB,EAAAA,QAAOyB,EAAAA,SAAS;;;;aAIpCtB,EAAAA,OAAO;EAGPuB,EAAsB1B,EAAAA,QAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAAA,QAAO4B,EAAAA,mBAAmB;;;;aAItDzB,EAAAA,OAAO;EAGP0B,EAA8B7B,EAAAA,QAAO8B,EAAAA,WAAW;;;;aAIhD3B,EAAAA,OAAO;EAGP4B,EAA4B/B,EAAAA,QAAOgC,EAAAA,eAAe;;;;aAIlD7B,EAAAA,OAAO;EAOP8B,EAAqBjC,EAAAA,QAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAAA,QAAOmC,EAAAA,YAAY;;;aAG1ChC,EAAAA,OAAO;;EAIPiC,EAAiBpC,EAAAA,QAAOkC,EAAqB;MACpDnB,EAAAA,KAAK;EAGEsB,EAAkBrC,EAAAA,QAAOkC,EAAqB;MACrDnB,EAAAA,KAAK;eACIE,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;EAGlCqB,EAAuBtC,EAAAA,QAAOC,GAAG;;;eAG/BgB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCd,EAAAA,OAAa;EAGboC,EAAYvC,EAAAA,QAAOwC,EAAAA,0BAA0B;oBACtCvB,EAAAA,QAAQ;aACfd,EAAAA,OAAO;;;EAKPsC,EAAUzC,EAAAA,QAAO0C,EAAAA,wBAAwB;oBAClCzB,EAAAA,QAAQ;aACfd,EAAAA,OAAa;EAGbwC,EAAwB3C,EAAAA,QAAOC,GAAG;MACzC2C;aACOzC,EAAAA,OAAO;iBACHc,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;UACxCA,EAAAA,QAAQ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../external/react-responsive/dist/react-responsive.js"),r=require("styled-components"),i=require("../theme/index.js"),l=require("./tab-context.js"),o=require("./tab-link-chain.style.js");exports.TabLinkChain=({controlledMode:a,"data-testid":s,onTabClick:d,fullWidthIndicatorLine:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../external/react-responsive/dist/react-responsive.js"),r=require("styled-components"),i=require("../theme/index.js"),l=require("./tab-context.js"),o=require("./tab-link-chain.style.js");exports.TabLinkChain=({controlledMode:a,"data-testid":s,onTabClick:d,fullWidthIndicatorLine:u,fadeColor:c})=>{const{setCurrentActiveIndex:h,currentActiveIndex:x,tabLinks:p}=t.useContext(l.TabContext),f=t.useContext(r.ThemeContext),C=i.Breakpoint["md-max"]({theme:f}),v=n.reactResponsiveExports.useMediaQuery({maxWidth:C}),b=i.Breakpoint["lg-max"]({theme:f}),m=t.useRef(null),g=t.useRef([]),j=t.useRef(null),k=e=>t=>{t.preventDefault(),t.stopPropagation(),a||h(e),d&&d(p[e].title,e)},L=e=>v&&e.length>20?`${e.substring(0,20)}...`:e;return e.jsx(o.CustomFadeWrapper,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=b&&m.current&&j.current&&(e.scrollLeft=m.current.getBoundingClientRect().left-j.current.getBoundingClientRect().left)},"data-testid":s,fadeColor:c,children:e.jsx(o.Chain,{role:"tablist",$fullWidthIndicatorLine:u,ref:j,children:p.map((({title:t,width:n,titleAddon:r},i)=>{const l=x===i;return e.jsx(o.ChainItem,{role:"none",$active:l,ref:l?m:null,$width:n,children:e.jsxs(o.ChainLink,{role:"none",onClick:k(i),"data-testid":`${s}-link-${i}`,$reversed:"left"===(null==r?void 0:r.position),children:[e.jsxs(o.LabelContainer,{role:"none",children:[e.jsx(o.Label,{$active:l,onClick:k(i),"aria-hidden":"true",children:L(t)}),e.jsx(o.BoldLabel,{role:"tab",type:"button","aria-selected":l,tabIndex:l?0:-1,onKeyDown:e=>((e,t)=>{var n;let r=t;"ArrowRight"===e.key?(r=(t+1)%p.length,e.preventDefault()):"ArrowLeft"===e.key&&(r=(t-1+p.length)%p.length,e.preventDefault()),null===(n=g.current[r])||void 0===n||n.focus()})(e,i),ref:e=>g.current[i]=e,$active:l,children:L(t)})]}),null==r?void 0:r.content]})},i)}))})})};
|
|
2
2
|
//# sourceMappingURL=tab-link-chain.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-link-chain.js","sources":["../../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Breakpoint } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n BoldLabel,\n Chain,\n ChainItem,\n ChainLink,\n CustomFadeWrapper,\n Label,\n LabelContainer,\n} from \"./tab-link-chain.style\";\nimport { TabProps } from \"./types\";\n\ninterface Props\n extends Pick<\n TabProps,\n \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n > {\n controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n controlledMode,\n \"data-testid\": testId,\n onTabClick,\n fullWidthIndicatorLine,\n fadeColor,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n useContext(TabContext);\n\n const theme = useContext(ThemeContext);\n const mobileBreakpoint = Breakpoint[\"md-max\"]({ theme });\n\n const isMobile = useMediaQuery({\n maxWidth: mobileBreakpoint,\n });\n\n const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n const activeLinkRef = useRef<HTMLLIElement>(null);\n const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChainLinkClick =\n (index: number) =>\n (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n if (!controlledMode) {\n setCurrentActiveIndex(index);\n }\n\n if (onTabClick) {\n onTabClick(tabLinks[index].title, index);\n }\n };\n\n const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n if (\n content &&\n wrapper &&\n window.innerWidth <= tabletBreakpoint &&\n activeLinkRef.current\n ) {\n content.scrollLeft =\n activeLinkRef.current.getBoundingClientRect().left;\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n let nextIndex = index;\n if (e.key === \"ArrowRight\") {\n nextIndex = (index + 1) % tabLinks.length;\n e.preventDefault();\n } else if (e.key === \"ArrowLeft\") {\n nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n e.preventDefault();\n }\n\n chainLinkRefs.current[nextIndex]?.focus();\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const truncateText = (value: string) => {\n if (isMobile) {\n return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n }\n\n return value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <CustomFadeWrapper\n onResize={handleResize}\n data-testid={testId}\n fadeColor={fadeColor}\n >\n <Chain\n role=\"tablist\"\n $fullWidthIndicatorLine={fullWidthIndicatorLine}\n >\n {tabLinks.map(({ title, width, titleAddon }, index) => {\n const isActive = currentActiveIndex === index;\n\n return (\n <ChainItem\n key={index}\n role=\"none\"\n $active={isActive}\n ref={isActive ? activeLinkRef : null}\n $width={width}\n >\n <ChainLink\n role=\"none\"\n onClick={handleChainLinkClick(index)}\n data-testid={`${testId}-link-${index}`}\n $reversed={titleAddon?.position === \"left\"}\n >\n <LabelContainer role=\"none\">\n <Label\n $active={isActive}\n onClick={handleChainLinkClick(index)}\n aria-hidden=\"true\"\n >\n {truncateText(title)}\n </Label>\n <BoldLabel\n role=\"tab\"\n type=\"button\"\n aria-selected={isActive}\n tabIndex={isActive ? 0 : -1}\n onKeyDown={(e) =>\n handleKeyDown(e, index)\n }\n ref={(el) =>\n (chainLinkRefs.current[index] = el)\n }\n $active={isActive}\n >\n {truncateText(title)}\n </BoldLabel>\n </LabelContainer>\n {titleAddon?.content}\n </ChainLink>\n </ChainItem>\n );\n })}\n </Chain>\n </CustomFadeWrapper>\n );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","Chain","role","$fullWidthIndicatorLine","
|
|
1
|
+
{"version":3,"file":"tab-link-chain.js","sources":["../../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Breakpoint } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n BoldLabel,\n Chain,\n ChainItem,\n ChainLink,\n CustomFadeWrapper,\n Label,\n LabelContainer,\n} from \"./tab-link-chain.style\";\nimport { TabProps } from \"./types\";\n\ninterface Props\n extends Pick<\n TabProps,\n \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n > {\n controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n controlledMode,\n \"data-testid\": testId,\n onTabClick,\n fullWidthIndicatorLine,\n fadeColor,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n useContext(TabContext);\n\n const theme = useContext(ThemeContext);\n const mobileBreakpoint = Breakpoint[\"md-max\"]({ theme });\n\n const isMobile = useMediaQuery({\n maxWidth: mobileBreakpoint,\n });\n\n const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n const activeLinkRef = useRef<HTMLLIElement>(null);\n const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const chainRef = useRef<HTMLUListElement | null>(null);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChainLinkClick =\n (index: number) =>\n (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n if (!controlledMode) {\n setCurrentActiveIndex(index);\n }\n\n if (onTabClick) {\n onTabClick(tabLinks[index].title, index);\n }\n };\n\n const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n if (\n content &&\n wrapper &&\n window.innerWidth <= tabletBreakpoint &&\n activeLinkRef.current &&\n chainRef.current\n ) {\n content.scrollLeft =\n activeLinkRef.current.getBoundingClientRect().left -\n chainRef.current.getBoundingClientRect().left;\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n let nextIndex = index;\n if (e.key === \"ArrowRight\") {\n nextIndex = (index + 1) % tabLinks.length;\n e.preventDefault();\n } else if (e.key === \"ArrowLeft\") {\n nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n e.preventDefault();\n }\n\n chainLinkRefs.current[nextIndex]?.focus();\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const truncateText = (value: string) => {\n if (isMobile) {\n return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n }\n\n return value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <CustomFadeWrapper\n onResize={handleResize}\n data-testid={testId}\n fadeColor={fadeColor}\n >\n <Chain\n role=\"tablist\"\n $fullWidthIndicatorLine={fullWidthIndicatorLine}\n ref={chainRef}\n >\n {tabLinks.map(({ title, width, titleAddon }, index) => {\n const isActive = currentActiveIndex === index;\n\n return (\n <ChainItem\n key={index}\n role=\"none\"\n $active={isActive}\n ref={isActive ? activeLinkRef : null}\n $width={width}\n >\n <ChainLink\n role=\"none\"\n onClick={handleChainLinkClick(index)}\n data-testid={`${testId}-link-${index}`}\n $reversed={titleAddon?.position === \"left\"}\n >\n <LabelContainer role=\"none\">\n <Label\n $active={isActive}\n onClick={handleChainLinkClick(index)}\n aria-hidden=\"true\"\n >\n {truncateText(title)}\n </Label>\n <BoldLabel\n role=\"tab\"\n type=\"button\"\n aria-selected={isActive}\n tabIndex={isActive ? 0 : -1}\n onKeyDown={(e) =>\n handleKeyDown(e, index)\n }\n ref={(el) =>\n (chainLinkRefs.current[index] = el)\n }\n $active={isActive}\n >\n {truncateText(title)}\n </BoldLabel>\n </LabelContainer>\n {titleAddon?.content}\n </ChainLink>\n </ChainItem>\n );\n })}\n </Chain>\n </CustomFadeWrapper>\n );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","chainRef","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","children","Chain","role","$fullWidthIndicatorLine","ref","map","width","titleAddon","isActive","ChainItem","$active","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"8RAyB4B,EACxBA,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAAA,WAAWC,EAAAA,YAETC,EAAQF,EAAAA,WAAWG,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEH,UAE1CI,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAAA,WAAW,UAAU,CAAEH,UAE1CQ,EAAgBC,EAAAA,OAAsB,MACtCC,EAAgBD,EAAAA,OAAqC,IACrDE,EAAWF,EAAAA,OAAgC,MAK3CG,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACD1B,GACDK,EAAsBkB,GAGtBrB,GACAA,EAAWK,EAASgB,GAAOI,MAAOJ,EACtC,EAiCFK,EAAgBC,GACdf,GACOe,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAAAA,IAACC,EAAAA,mBACGC,SA3Ca,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcrB,GACrBC,EAAcqB,SACdlB,EAASkB,UAETJ,EAAQK,WACJtB,EAAcqB,QAAQE,wBAAwBC,KAC9CrB,EAASkB,QAAQE,wBAAwBC,KACjD,EAgC0B,cACTzC,EACbG,UAAWA,EAASuC,SAEpBX,EAAAA,IAACY,EAAAA,MAAK,CACFC,KAAK,UAASC,wBACW3C,EACzB4C,IAAK1B,WAEJd,EAASyC,KAAI,EAAGrB,QAAOsB,QAAOC,cAAc3B,KACzC,MAAM4B,EAAW7C,IAAuBiB,EAExC,OACIS,MAACoB,EAAAA,UAAS,CAENP,KAAK,OAAMQ,QACFF,EACTJ,IAAKI,EAAWjC,EAAgB,KAAIoC,OAC5BL,EAAKN,SAEbY,EAAAA,KAACC,YAAS,CACNX,KAAK,OACLY,QAASnC,EAAqBC,GAAM,cACvB,GAAGtB,UAAesB,IAAOmC,UACF,UAAzBR,aAAU,EAAVA,EAAYS,UAAmBhB,SAAA,CAE1CY,EAAAA,KAACK,EAAAA,eAAc,CAACf,KAAK,iBACjBb,EAAAA,IAAC6B,EAAAA,MAAK,CAAAR,QACOF,EACTM,QAASnC,EAAqBC,GAAM,cACxB,OAAMoB,SAEjBf,EAAaD,KAElBK,MAAC8B,EAAAA,UAAS,CACNjB,KAAK,MACLkB,KAAK,yBACUZ,EACfa,SAAUb,EAAW,KACrBc,UAAYC,GApE1B,EAACA,EAAwB3C,WAC3C,IAAI4C,EAAY5C,EACF,eAAV2C,EAAEE,KACFD,GAAa5C,EAAQ,GAAKhB,EAASuB,OACnCoC,EAAEzC,kBACe,cAAVyC,EAAEE,MACTD,GAAa5C,EAAQ,EAAIhB,EAASuB,QAAUvB,EAASuB,OACrDoC,EAAEzC,kBAG0B,QAAhC4C,EAAAjD,EAAcmB,QAAQ4B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA2DLC,CAAcL,EAAG3C,GAErBwB,IAAMyB,GACDpD,EAAcmB,QAAQhB,GAASiD,UAE3BrB,EAAQR,SAEhBf,EAAaD,QAGrBuB,aAAU,EAAVA,EAAYf,YApCZZ,EAsCG,OAIR"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("./timetable-header.style.js");exports.TimeTableHeader=l=>{var{selectedDate:s,loading:i,tableContainerRef:o,totalRecords:n,onPreviousDayClick:d,onNextDayClick:c,onRefresh:u,onCalendarDateSelect:b}=l,h=e.__rest(l,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const g=()=>{o.current&&(o.current.scrollTop=0)},x=()=>{u&&(g(),u())};return t.jsxs(a.NavigationHeaderWrapper,{children:[t.jsx(a.StyledDateNavigator,Object.assign({selectedDate:s,loading:i},h,{onRightArrowClick:e=>{g(),c(e)},onLeftArrowClick:e=>{g(),d(e)},onCalendarDateSelect:b})),void 0===n?t.jsx(t.Fragment,{}):t.jsxs(a.NavigationHeaderSubtitleWrapper,{children:[t.jsxs(a.StyledResultText,{"data-testid":"timetable-records-results",weight:"semibold",children:[n,"
|
|
1
|
+
"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("./timetable-header.style.js");exports.TimeTableHeader=l=>{var{selectedDate:s,loading:i,tableContainerRef:o,totalRecords:n,onPreviousDayClick:d,onNextDayClick:c,onRefresh:u,onCalendarDateSelect:b}=l,h=e.__rest(l,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const g=()=>{o.current&&(o.current.scrollTop=0)},x=()=>{u&&(g(),u())};return t.jsxs(a.NavigationHeaderWrapper,{children:[t.jsx(a.StyledDateNavigator,Object.assign({selectedDate:s,loading:i},h,{onRightArrowClick:e=>{g(),c(e)},onLeftArrowClick:e=>{g(),d(e)},onCalendarDateSelect:b})),void 0===n?t.jsx(t.Fragment,{}):t.jsxs(a.NavigationHeaderSubtitleWrapper,{children:[t.jsxs(a.StyledResultText,{"data-testid":"timetable-records-results",weight:"semibold",children:[n," result",1!==n?"s":""," found"]}),u&&t.jsx(a.StyledRefreshButton,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:i,onClick:x,$loading:i,children:t.jsx(r.RefreshIcon,{})})]})]})};
|
|
2
2
|
//# sourceMappingURL=timetable-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport { RefObject } from \"react\";\nimport {\n NavigationHeaderSubtitleWrapper,\n NavigationHeaderWrapper,\n StyledDateNavigator,\n StyledRefreshButton,\n StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n selectedDate: string;\n loading: boolean;\n tableContainerRef: RefObject<HTMLDivElement>;\n minDate?: string | undefined;\n maxDate?: string | undefined;\n totalRecords?: number | undefined;\n showDateAsShortForm?: boolean | undefined;\n showCurrentDateAsToday?: boolean | undefined;\n onPreviousDayClick: (currentDate: string) => void | undefined;\n onNextDayClick: (currentDate: string) => void | undefined;\n onRefresh?: (() => void) | undefined;\n onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n selectedDate,\n loading,\n tableContainerRef,\n totalRecords,\n onPreviousDayClick,\n onNextDayClick,\n onRefresh,\n onCalendarDateSelect,\n ...otherProps\n}: TimeTableHeaderProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const scrollToTop = () => {\n if (tableContainerRef.current) {\n tableContainerRef.current.scrollTop = 0;\n }\n };\n\n const handleRefresh = () => {\n if (!onRefresh) return;\n scrollToTop();\n onRefresh();\n };\n\n const handleRightArrowClick = (date: string) => {\n scrollToTop();\n onNextDayClick(date);\n };\n\n const handleLeftArrowClick = (date: string) => {\n scrollToTop();\n onPreviousDayClick(date);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderRecordsSection = () => {\n if (totalRecords === undefined) return <></>;\n return (\n <NavigationHeaderSubtitleWrapper>\n <StyledResultText\n data-testid=\"timetable-records-results\"\n weight={\"semibold\"}\n >\n {totalRecords}
|
|
1
|
+
{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport { RefObject } from \"react\";\nimport {\n NavigationHeaderSubtitleWrapper,\n NavigationHeaderWrapper,\n StyledDateNavigator,\n StyledRefreshButton,\n StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n selectedDate: string;\n loading: boolean;\n tableContainerRef: RefObject<HTMLDivElement>;\n minDate?: string | undefined;\n maxDate?: string | undefined;\n totalRecords?: number | undefined;\n showDateAsShortForm?: boolean | undefined;\n showCurrentDateAsToday?: boolean | undefined;\n onPreviousDayClick: (currentDate: string) => void | undefined;\n onNextDayClick: (currentDate: string) => void | undefined;\n onRefresh?: (() => void) | undefined;\n onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n selectedDate,\n loading,\n tableContainerRef,\n totalRecords,\n onPreviousDayClick,\n onNextDayClick,\n onRefresh,\n onCalendarDateSelect,\n ...otherProps\n}: TimeTableHeaderProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const scrollToTop = () => {\n if (tableContainerRef.current) {\n tableContainerRef.current.scrollTop = 0;\n }\n };\n\n const handleRefresh = () => {\n if (!onRefresh) return;\n scrollToTop();\n onRefresh();\n };\n\n const handleRightArrowClick = (date: string) => {\n scrollToTop();\n onNextDayClick(date);\n };\n\n const handleLeftArrowClick = (date: string) => {\n scrollToTop();\n onPreviousDayClick(date);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderRecordsSection = () => {\n if (totalRecords === undefined) return <></>;\n return (\n <NavigationHeaderSubtitleWrapper>\n <StyledResultText\n data-testid=\"timetable-records-results\"\n weight={\"semibold\"}\n >\n {totalRecords} result{totalRecords !== 1 ? \"s\" : \"\"} found\n </StyledResultText>\n {onRefresh && (\n <StyledRefreshButton\n data-testid=\"timetable-records-refresh-btn\"\n aria-label=\"Refresh timetable records\"\n styleType=\"light\"\n sizeType=\"small\"\n disabled={loading}\n onClick={handleRefresh}\n $loading={loading}\n >\n <RefreshIcon />\n </StyledRefreshButton>\n )}\n </NavigationHeaderSubtitleWrapper>\n );\n };\n\n return (\n <NavigationHeaderWrapper>\n <StyledDateNavigator\n selectedDate={selectedDate}\n loading={loading}\n {...otherProps}\n onRightArrowClick={handleRightArrowClick}\n onLeftArrowClick={handleLeftArrowClick}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n {renderRecordsSection()}\n </NavigationHeaderWrapper>\n );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","RefreshIcon"],"mappings":"wLAyBgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA2Cf,OACIQ,OAACC,EAAAA,wBAAuB,CAAAC,SAAA,CACpBC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA9CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA6CZC,iBA1CkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAyChBf,qBAAsBA,UAlCTiB,IAAjBrB,EAAmCc,EAAAA,mBAEnCH,EAAAA,KAACW,kCAA+B,CAAAT,SAAA,CAC5BF,OAACY,EAAAA,iBAAgB,CAAA,cACD,4BACZC,OAAQ,WAAUX,SAAA,CAEjBb,EAAY,UAA0B,IAAjBA,EAAqB,IAAM,GAAE,YAEtDG,GACGW,EAAAA,IAACW,EAAAA,oBAAmB,CAAA,cACJ,gCAA+B,aAChC,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EAAOe,SAEjBC,EAAAA,IAACiB,EAAAA,YAAW,WAkBF"}
|