@lifesg/react-design-system 3.4.0 → 3.5.0-canary.1
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/e-signature/e-signature-canvas.js +1 -1
- package/cjs/e-signature/e-signature-canvas.js.map +1 -1
- package/cjs/e-signature/e-signature.styles.js +19 -15
- package/cjs/e-signature/e-signature.styles.js.map +1 -1
- package/cjs/file-download/file-list-card/file-list-card.styles.js +1 -1
- package/cjs/file-download/file-list-card/file-list-card.styles.js.map +1 -1
- package/cjs/file-upload/file-item-edit.js +1 -1
- package/cjs/file-upload/file-item-edit.js.map +1 -1
- package/cjs/file-upload/file-item-edit.styles.js +12 -7
- package/cjs/file-upload/file-item-edit.styles.js.map +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.js +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.js.map +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.styles.js +74 -52
- package/cjs/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
- package/cjs/file-upload/file-list.js +1 -1
- package/cjs/file-upload/file-list.js.map +1 -1
- package/cjs/file-upload/file-list.styles.js +4 -11
- package/cjs/file-upload/file-list.styles.js.map +1 -1
- package/cjs/file-upload/file-upload.js +1 -1
- package/cjs/file-upload/file-upload.js.map +1 -1
- package/cjs/form/form-label.style.js +11 -8
- package/cjs/form/form-label.style.js.map +1 -1
- package/cjs/theme/font-spec/specs/bookingsg-font-spec-set.js +1 -1
- package/cjs/theme/font-spec/specs/bookingsg-font-spec-set.js.map +1 -1
- package/cjs/theme/font-spec/specs/default-font-spec-set.js +1 -1
- package/cjs/theme/font-spec/specs/default-font-spec-set.js.map +1 -1
- package/cjs/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js +1 -1
- package/cjs/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js.map +1 -1
- package/cjs/typography/typography.styles.js +6 -6
- package/cjs/typography/typography.styles.js.map +1 -1
- package/e-signature/e-signature-canvas.js +1 -1
- package/e-signature/e-signature-canvas.js.map +1 -1
- package/e-signature/e-signature.styles.js +20 -16
- package/e-signature/e-signature.styles.js.map +1 -1
- package/file-download/file-list-card/file-list-card.styles.js +1 -1
- package/file-download/file-list-card/file-list-card.styles.js.map +1 -1
- package/file-upload/file-item-edit.d.ts +4 -1
- package/file-upload/file-item-edit.js +1 -1
- package/file-upload/file-item-edit.js.map +1 -1
- package/file-upload/file-item-edit.styles.js +21 -16
- package/file-upload/file-item-edit.styles.js.map +1 -1
- package/file-upload/file-list-item/file-list-item.d.ts +3 -1
- package/file-upload/file-list-item/file-list-item.js +1 -1
- package/file-upload/file-list-item/file-list-item.js.map +1 -1
- package/file-upload/file-list-item/file-list-item.styles.d.ts +14 -0
- package/file-upload/file-list-item/file-list-item.styles.js +67 -45
- package/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
- package/file-upload/file-list.d.ts +3 -0
- package/file-upload/file-list.js +1 -1
- package/file-upload/file-list.js.map +1 -1
- package/file-upload/file-list.styles.js +4 -11
- package/file-upload/file-list.styles.js.map +1 -1
- package/file-upload/file-upload.d.ts +1 -1
- package/file-upload/file-upload.js +1 -1
- package/file-upload/file-upload.js.map +1 -1
- package/file-upload/types.d.ts +5 -0
- package/form/form-label.style.js +12 -9
- package/form/form-label.style.js.map +1 -1
- package/package.json +1 -1
- package/theme/font-spec/specs/bookingsg-font-spec-set.js +1 -1
- package/theme/font-spec/specs/bookingsg-font-spec-set.js.map +1 -1
- package/theme/font-spec/specs/default-font-spec-set.js +1 -1
- package/theme/font-spec/specs/default-font-spec-set.js.map +1 -1
- package/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js +1 -1
- package/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js.map +1 -1
- package/typography/typography.styles.js +4 -4
- package/typography/typography.styles.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-label.style.js","sources":["../../../src/form/form-label.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const LabelContainer = styled.div`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\nexport const Label = styled.label`\n color: ${Colour[\"text-subtle\"]};\n display: inline-block;\n\n ${Font[\"form-label\"]}\n ${applyHtmlContentStyle()}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessage = styled.p`\n color: ${Colour[\"text-error\"]};\n margin-bottom: 0;\n outline: none;\n`;\n\nexport const Subtitle = styled.span`\n ${Font[\"form-description\"]}\n color: ${Colour[\"text-subtler\"]};\n display: block;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","Label","label","Colour","Font","applyHtmlContentStyle","Spec","ErrorIcon","ExclamationCircleFillIcon","ErrorMessageContainer","ErrorMessage","p","Subtitle","span"],"mappings":"+QAQO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;qBACnBC,EAAAA,QAAQ;
|
|
1
|
+
{"version":3,"file":"form-label.style.js","sources":["../../../src/form/form-label.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const LabelContainer = styled.div`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n display: flex;\n flex-direction: column;\n gap: ${Spacing[\"spacing-4\"]};\n`;\nexport const Label = styled.label`\n color: ${Colour[\"text-subtle\"]};\n display: inline-block;\n\n ${Font[\"form-label\"]}\n ${applyHtmlContentStyle()}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessage = styled.p`\n color: ${Colour[\"text-error\"]};\n margin-bottom: 0;\n outline: none;\n`;\n\nexport const Subtitle = styled.span`\n ${Font[\"form-description\"]}\n color: ${Colour[\"text-subtler\"]};\n display: block;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","Label","label","Colour","Font","applyHtmlContentStyle","Spec","ErrorIcon","ExclamationCircleFillIcon","ErrorMessageContainer","ErrorMessage","p","Subtitle","span"],"mappings":"+QAQO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;qBACnBC,EAAAA,QAAQ;;;WAGlBA,EAAAA,QAAQ;EAENC,EAAQH,EAAAA,QAAOI,KAAK;aACpBC,EAAAA,OAAO;;;MAGdC,EAAAA,KAAK;MACLC;mBACaD,EAAAA,KAAKE,KAAK;EAGhBC,EAAYT,EAAAA,QAAOU,EAAAA,0BAA0B;;;;aAI7CL,EAAAA,OAAO;EAGPM,EAAwBX,EAAAA,QAAOC,GAAG;MACzCK,EAAAA,KAAK;;WAEAJ,EAAAA,QAAQ;kBACDA,EAAAA,QAAQ;EAGbU,EAAeZ,EAAAA,QAAOa,CAAC;aACvBR,EAAAA,OAAO;;;EAKPS,EAAWd,EAAAA,QAAOe,IAAI;MAC7BT,EAAAA,KAAK;aACED,EAAAA,OAAO;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.BookingSgFontSpecSet={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.
|
|
1
|
+
"use strict";exports.BookingSgFontSpecSet={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.625rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Plus Jakarta Sans","heading-font-family":"Plus Jakarta Sans","body-font-family":"Plus Jakarta Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.625rem","body-lh-md":"1.5rem","body-lh-sm":"1.625rem","body-lh-xs":"1.25rem","body-ls-baseline":"0rem","body-ls-md":"0.009rem","body-ls-sm":"0.008rem","body-ls-xs":"0.008rem","form-label-size":"1rem","form-description-size":"0.875rem","form-label-lh":"1.5rem","form-description-lh":"1.625rem","form-label-ls":"0.009rem","form-description-ls":"0.008rem"};
|
|
2
2
|
//# sourceMappingURL=bookingsg-font-spec-set.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bookingsg-font-spec-set.js","sources":["../../../../../src/theme/font-spec/specs/bookingsg-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const BookingSgFontSpecSet: FontSpecSet = {\n \"heading-size-xxl\": \"3rem\",\n \"heading-size-xl\": \"2.5rem\",\n \"heading-size-lg\": \"2rem\",\n \"heading-size-md\": \"1.625rem\",\n \"heading-size-sm\": \"1.375rem\",\n \"heading-size-xs\": \"1.125rem\",\n\n \"heading-lh-xxl\": \"3.5rem\",\n \"heading-lh-xl\": \"3rem\",\n \"heading-lh-lg\": \"2.5rem\",\n \"heading-lh-md\": \"2.25rem\",\n \"heading-lh-sm\": \"1.75rem\",\n \"heading-lh-xs\": \"1.
|
|
1
|
+
{"version":3,"file":"bookingsg-font-spec-set.js","sources":["../../../../../src/theme/font-spec/specs/bookingsg-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const BookingSgFontSpecSet: FontSpecSet = {\n \"heading-size-xxl\": \"3rem\",\n \"heading-size-xl\": \"2.5rem\",\n \"heading-size-lg\": \"2rem\",\n \"heading-size-md\": \"1.625rem\",\n \"heading-size-sm\": \"1.375rem\",\n \"heading-size-xs\": \"1.125rem\",\n\n \"heading-lh-xxl\": \"3.5rem\",\n \"heading-lh-xl\": \"3rem\",\n \"heading-lh-lg\": \"2.5rem\",\n \"heading-lh-md\": \"2.25rem\",\n \"heading-lh-sm\": \"1.75rem\",\n \"heading-lh-xs\": \"1.625rem\",\n\n \"heading-ls-xxl\": \"-0.035rem\",\n \"heading-ls-xl\": \"-0.02rem\",\n \"heading-ls-lg\": \"-0.02rem\",\n \"heading-ls-md\": \"0rem\",\n \"heading-ls-sm\": \"0rem\",\n \"heading-ls-xs\": \"0rem\",\n\n \"weight-light\": \"300\",\n \"weight-regular\": \"400\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n \"font-family\": \"Plus Jakarta Sans\",\n \"heading-font-family\": \"Plus Jakarta Sans\",\n \"body-font-family\": \"Plus Jakarta Sans\",\n\n \"body-size-baseline\": \"1.125rem\",\n \"body-size-md\": \"1rem\",\n \"body-size-sm\": \"0.875rem\",\n \"body-size-xs\": \"0.75rem\",\n\n \"body-lh-baseline\": \"1.625rem\",\n \"body-lh-md\": \"1.5rem\",\n \"body-lh-sm\": \"1.625rem\",\n \"body-lh-xs\": \"1.25rem\",\n\n \"body-ls-baseline\": \"0rem\",\n \"body-ls-md\": \"0.009rem\",\n \"body-ls-sm\": \"0.008rem\",\n \"body-ls-xs\": \"0.008rem\",\n\n \"form-label-size\": \"1rem\",\n \"form-description-size\": \"0.875rem\",\n\n \"form-label-lh\": \"1.5rem\",\n \"form-description-lh\": \"1.625rem\",\n\n \"form-label-ls\": \"0.009rem\",\n \"form-description-ls\": \"0.008rem\",\n};\n"],"names":[],"mappings":"0CAEiD,CAC7C,mBAAoB,OACpB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,WAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,oBACf,sBAAuB,oBACvB,mBAAoB,oBAEpB,qBAAsB,WACtB,eAAgB,OAChB,eAAgB,WAChB,eAAgB,UAEhB,mBAAoB,WACpB,aAAc,SACd,aAAc,WACd,aAAc,UAEd,mBAAoB,OACpB,aAAc,WACd,aAAc,WACd,aAAc,WAEd,kBAAmB,OACnB,wBAAyB,WAEzB,gBAAiB,SACjB,sBAAuB,WAEvB,gBAAiB,WACjB,sBAAuB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.DefaultFontSpecSet={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.625rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Open Sans","heading-font-family":"Open Sans","body-font-family":"Open Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.625rem","body-lh-md":"1.5rem","body-lh-sm":"1.
|
|
1
|
+
"use strict";exports.DefaultFontSpecSet={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.625rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Open Sans","heading-font-family":"Open Sans","body-font-family":"Open Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.625rem","body-lh-md":"1.5rem","body-lh-sm":"1.25rem","body-lh-xs":"1.25rem","body-ls-baseline":"0rem","body-ls-md":"0.009rem","body-ls-sm":"0.008rem","body-ls-xs":"0.008rem","form-label-size":"1rem","form-description-size":"0.875rem","form-label-lh":"1.375rem","form-description-lh":"1.25rem","form-label-ls":"0rem","form-description-ls":"0rem"};
|
|
2
2
|
//# sourceMappingURL=default-font-spec-set.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-font-spec-set.js","sources":["../../../../../src/theme/font-spec/specs/default-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const DefaultFontSpecSet: FontSpecSet = {\n \"heading-size-xxl\": \"3rem\",\n \"heading-size-xl\": \"2.5rem\",\n \"heading-size-lg\": \"2rem\",\n \"heading-size-md\": \"1.625rem\",\n \"heading-size-sm\": \"1.375rem\",\n \"heading-size-xs\": \"1.125rem\",\n\n \"heading-lh-xxl\": \"3.5rem\",\n \"heading-lh-xl\": \"3rem\",\n \"heading-lh-lg\": \"2.5rem\",\n \"heading-lh-md\": \"2.25rem\",\n \"heading-lh-sm\": \"1.75rem\",\n \"heading-lh-xs\": \"1.625rem\",\n\n \"heading-ls-xxl\": \"-0.035rem\",\n \"heading-ls-xl\": \"-0.02rem\",\n \"heading-ls-lg\": \"-0.02rem\",\n \"heading-ls-md\": \"0rem\",\n \"heading-ls-sm\": \"0rem\",\n \"heading-ls-xs\": \"0rem\",\n\n \"weight-light\": \"300\",\n \"weight-regular\": \"400\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n \"font-family\": \"Open Sans\",\n \"heading-font-family\": \"Open Sans\",\n \"body-font-family\": \"Open Sans\",\n\n \"body-size-baseline\": \"1.125rem\",\n \"body-size-md\": \"1rem\",\n \"body-size-sm\": \"0.875rem\",\n \"body-size-xs\": \"0.75rem\",\n\n \"body-lh-baseline\": \"1.625rem\",\n \"body-lh-md\": \"1.5rem\",\n \"body-lh-sm\": \"1.
|
|
1
|
+
{"version":3,"file":"default-font-spec-set.js","sources":["../../../../../src/theme/font-spec/specs/default-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const DefaultFontSpecSet: FontSpecSet = {\n \"heading-size-xxl\": \"3rem\",\n \"heading-size-xl\": \"2.5rem\",\n \"heading-size-lg\": \"2rem\",\n \"heading-size-md\": \"1.625rem\",\n \"heading-size-sm\": \"1.375rem\",\n \"heading-size-xs\": \"1.125rem\",\n\n \"heading-lh-xxl\": \"3.5rem\",\n \"heading-lh-xl\": \"3rem\",\n \"heading-lh-lg\": \"2.5rem\",\n \"heading-lh-md\": \"2.25rem\",\n \"heading-lh-sm\": \"1.75rem\",\n \"heading-lh-xs\": \"1.625rem\",\n\n \"heading-ls-xxl\": \"-0.035rem\",\n \"heading-ls-xl\": \"-0.02rem\",\n \"heading-ls-lg\": \"-0.02rem\",\n \"heading-ls-md\": \"0rem\",\n \"heading-ls-sm\": \"0rem\",\n \"heading-ls-xs\": \"0rem\",\n\n \"weight-light\": \"300\",\n \"weight-regular\": \"400\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n \"font-family\": \"Open Sans\",\n \"heading-font-family\": \"Open Sans\",\n \"body-font-family\": \"Open Sans\",\n\n \"body-size-baseline\": \"1.125rem\",\n \"body-size-md\": \"1rem\",\n \"body-size-sm\": \"0.875rem\",\n \"body-size-xs\": \"0.75rem\",\n\n \"body-lh-baseline\": \"1.625rem\",\n \"body-lh-md\": \"1.5rem\",\n \"body-lh-sm\": \"1.25rem\",\n \"body-lh-xs\": \"1.25rem\",\n\n \"body-ls-baseline\": \"0rem\",\n \"body-ls-md\": \"0.009rem\",\n \"body-ls-sm\": \"0.008rem\",\n \"body-ls-xs\": \"0.008rem\",\n\n \"form-label-size\": \"1rem\",\n \"form-description-size\": \"0.875rem\",\n\n \"form-label-lh\": \"1.375rem\",\n \"form-description-lh\": \"1.25rem\",\n\n \"form-label-ls\": \"0rem\",\n \"form-description-ls\": \"0rem\",\n};\n"],"names":[],"mappings":"wCAE+C,CAC3C,mBAAoB,OACpB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,WAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,YACf,sBAAuB,YACvB,mBAAoB,YAEpB,qBAAsB,WACtB,eAAgB,OAChB,eAAgB,WAChB,eAAgB,UAEhB,mBAAoB,WACpB,aAAc,SACd,aAAc,UACd,aAAc,UAEd,mBAAoB,OACpB,aAAc,WACd,aAAc,WACd,aAAc,WAEd,kBAAmB,OACnB,wBAAyB,WAEzB,gBAAiB,WACjB,sBAAuB,UAEvB,gBAAiB,OACjB,sBAAuB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.SGWDigitalLobbyFontSpecSet={"heading-size-xxl":"3.75rem","heading-size-xl":"3rem","heading-size-lg":"2.5rem","heading-size-md":"2rem","heading-size-sm":"1.625rem","heading-size-xs":"1.375rem","heading-lh-xxl":"4.5rem","heading-lh-xl":"3.5rem","heading-lh-lg":"3rem","heading-lh-md":"2.5rem","heading-lh-sm":"2.25rem","heading-lh-xs":"1.75rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.
|
|
1
|
+
"use strict";exports.SGWDigitalLobbyFontSpecSet={"heading-size-xxl":"3.75rem","heading-size-xl":"3rem","heading-size-lg":"2.5rem","heading-size-md":"2rem","heading-size-sm":"1.625rem","heading-size-xs":"1.375rem","heading-lh-xxl":"4.5rem","heading-lh-xl":"3.5rem","heading-lh-lg":"3rem","heading-lh-md":"2.5rem","heading-lh-sm":"2.25rem","heading-lh-xs":"1.75rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.035rem","heading-ls-lg":"-0.02rem","heading-ls-md":"-0.02rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Libre Franklin","heading-font-family":"Libre Franklin","body-font-family":"Libre Franklin","body-size-baseline":"1.375rem","body-size-md":"1.25rem","body-size-sm":"1.125rem","body-size-xs":"1rem","body-lh-baseline":"1.75rem","body-lh-md":"1.625rem","body-lh-sm":"1.625rem","body-lh-xs":"1.5rem","body-ls-baseline":"0rem","body-ls-md":"0rem","body-ls-sm":"0rem","body-ls-xs":"0.009rem","form-label-size":"1.25rem","form-description-size":"1.125rem","form-label-lh":"1.625rem","form-description-lh":"1.625rem","form-label-ls":"0rem","form-description-ls":"0rem"};
|
|
2
2
|
//# sourceMappingURL=sgw-digital-lobby-font-spec-set.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgw-digital-lobby-font-spec-set.js","sources":["../../../../../src/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const SGWDigitalLobbyFontSpecSet: FontSpecSet = {\n \"heading-size-xxl\": \"3.75rem\",\n \"heading-size-xl\": \"3rem\",\n \"heading-size-lg\": \"2.5rem\",\n \"heading-size-md\": \"2rem\",\n \"heading-size-sm\": \"1.625rem\",\n \"heading-size-xs\": \"1.375rem\",\n\n \"heading-lh-xxl\": \"4.5rem\",\n \"heading-lh-xl\": \"3.5rem\",\n \"heading-lh-lg\": \"3rem\",\n \"heading-lh-md\": \"2.5rem\",\n \"heading-lh-sm\": \"2.25rem\",\n \"heading-lh-xs\": \"1.75rem\",\n\n \"heading-ls-xxl\": \"-0.035rem\",\n \"heading-ls-xl\": \"-0.
|
|
1
|
+
{"version":3,"file":"sgw-digital-lobby-font-spec-set.js","sources":["../../../../../src/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const SGWDigitalLobbyFontSpecSet: FontSpecSet = {\n \"heading-size-xxl\": \"3.75rem\",\n \"heading-size-xl\": \"3rem\",\n \"heading-size-lg\": \"2.5rem\",\n \"heading-size-md\": \"2rem\",\n \"heading-size-sm\": \"1.625rem\",\n \"heading-size-xs\": \"1.375rem\",\n\n \"heading-lh-xxl\": \"4.5rem\",\n \"heading-lh-xl\": \"3.5rem\",\n \"heading-lh-lg\": \"3rem\",\n \"heading-lh-md\": \"2.5rem\",\n \"heading-lh-sm\": \"2.25rem\",\n \"heading-lh-xs\": \"1.75rem\",\n\n \"heading-ls-xxl\": \"-0.035rem\",\n \"heading-ls-xl\": \"-0.035rem\",\n \"heading-ls-lg\": \"-0.02rem\",\n \"heading-ls-md\": \"-0.02rem\",\n \"heading-ls-sm\": \"0rem\",\n \"heading-ls-xs\": \"0rem\",\n\n \"weight-light\": \"300\",\n \"weight-regular\": \"400\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n \"font-family\": \"Libre Franklin\",\n \"heading-font-family\": \"Libre Franklin\",\n \"body-font-family\": \"Libre Franklin\",\n\n \"body-size-baseline\": \"1.375rem\",\n \"body-size-md\": \"1.25rem\",\n \"body-size-sm\": \"1.125rem\",\n \"body-size-xs\": \"1rem\",\n\n \"body-lh-baseline\": \"1.75rem\",\n \"body-lh-md\": \"1.625rem\",\n \"body-lh-sm\": \"1.625rem\",\n \"body-lh-xs\": \"1.5rem\",\n\n \"body-ls-baseline\": \"0rem\",\n \"body-ls-md\": \"0rem\",\n \"body-ls-sm\": \"0rem\",\n \"body-ls-xs\": \"0.009rem\",\n\n \"form-label-size\": \"1.25rem\",\n \"form-description-size\": \"1.125rem\",\n\n \"form-label-lh\": \"1.625rem\",\n \"form-description-lh\": \"1.625rem\",\n\n \"form-label-ls\": \"0rem\",\n \"form-description-ls\": \"0rem\",\n};\n"],"names":[],"mappings":"gDAEuD,CACnD,mBAAoB,UACpB,kBAAmB,OACnB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,SACjB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UAEjB,iBAAkB,YAClB,gBAAiB,YACjB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,iBACf,sBAAuB,iBACvB,mBAAoB,iBAEpB,qBAAsB,WACtB,eAAgB,UAChB,eAAgB,WAChB,eAAgB,OAEhB,mBAAoB,UACpB,aAAc,WACd,aAAc,WACd,aAAc,SAEd,mBAAoB,OACpB,aAAc,OACd,aAAc,OACd,aAAc,WAEd,kBAAmB,UACnB,wBAAyB,WAEzB,gBAAiB,WACjB,sBAAuB,WAEvB,gBAAiB,OACjB,sBAAuB"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var e=require("@lifesg/react-icons/external"),t=require("styled-components"),r=require("../theme/index.js"),l=require("./helper.js");function
|
|
1
|
+
"use strict";var e=require("@lifesg/react-icons/external"),t=require("styled-components"),r=require("../theme/index.js"),l=require("./helper.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);const i=a.default.div`
|
|
2
2
|
${e=>l.createTypographyStyles(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
|
|
3
|
-
`,
|
|
4
|
-
${e=>{var
|
|
3
|
+
`,n=a.default.a`
|
|
4
|
+
${e=>{var o;return t.css`
|
|
5
5
|
${l.getTextStyle(e.$textStyle,e.$weight||"regular")}
|
|
6
6
|
color: ${r.Colour.hyperlink};
|
|
7
|
-
text-decoration: ${null!==(
|
|
7
|
+
text-decoration: ${null!==(o=e.$underlineStyle)&&void 0!==o?o:"underline"};
|
|
8
8
|
|
|
9
9
|
&:hover,
|
|
10
10
|
&:active,
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
height: 1lh;
|
|
17
17
|
width: 1em;
|
|
18
18
|
margin-left: 0.4em;
|
|
19
|
-
vertical-align:
|
|
20
|
-
`;exports.HyperlinkBase=
|
|
19
|
+
vertical-align: top;
|
|
20
|
+
`;exports.HyperlinkBase=n,exports.StyledExternalIcon=u,exports.TypographyBase=i;
|
|
21
21
|
//# sourceMappingURL=typography.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n $textStyle: TypographySizeType;\n $weight?: TypographyWeight | undefined;\n $inline?: boolean | undefined;\n $paragraph?: boolean | undefined;\n $maxLines?: number | undefined;\n $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n ${(props) =>\n createTypographyStyles(\n props.$textStyle,\n props.$weight,\n props.$inline,\n props.$paragraph,\n props.$maxLines\n )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n ${(props) => css`\n ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n color: ${Colour.hyperlink};\n text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align:
|
|
1
|
+
{"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n $textStyle: TypographySizeType;\n $weight?: TypographyWeight | undefined;\n $inline?: boolean | undefined;\n $paragraph?: boolean | undefined;\n $maxLines?: number | undefined;\n $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n ${(props) =>\n createTypographyStyles(\n props.$textStyle,\n props.$weight,\n props.$inline,\n props.$paragraph,\n props.$maxLines\n )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n ${(props) => css`\n ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n color: ${Colour.hyperlink};\n text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: top;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"qOAuBO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAgB;MAC9CC,GACCC,EAAAA,uBACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAAA,QAAOU,CAAc;MAC3CR,UAAU,OAAAS,KAAG;UACVC,EAAAA,aAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAAA,OAAOC;2BACwB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAAA,OAAO;;KAEvB;EAGQI,EAAqBjB,EAAAA,QAAOkB,EAAAA,aAAa;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__awaiter as r}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as c,useRef as
|
|
1
|
+
import{__awaiter as r}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as c,useRef as o,useContext as u,useImperativeHandle as a,useCallback as s,useEffect as l}from"react";import{ThemeContext as d}from"styled-components";import{Colour as m}from"../theme/index.js";import{SignatureCanvasContainer as v,SignatureCanvas as f}from"./e-signature.styles.js";const h=c(((c,h)=>{const{baseImageDataURL:g}=c,w=o(null),p=o(null),b=o(),j=o(),L=u(d);a(h,(()=>({clear:()=>{var r;return null===(r=b.current)||void 0===r?void 0:r.clear()},export:()=>O()})));const O=()=>{if(!b.current)return null;if(!b.current.getObjects().length)return null;return b.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},x=s((()=>r(void 0,void 0,void 0,(function*(){if(yield new Promise((r=>setTimeout(r))),w.current&&p.current&&b.current){const r=w.current.clientWidth,e=w.current.clientHeight;p.current.width=r,p.current.height=e,b.current.setDimensions({width:r,height:e}),b.current.forEachObject((r=>{b.current&&b.current.centerObject(r)}))}}))),[]);return l((()=>{if(w.current&&p.current)return b.current=new t("eSignatureCanvas"),b.current.selection=!1,b.current.isDrawingMode=!0,j.current=new n(b.current),j.current.color=L?m.text({theme:Object.assign(Object.assign({},L),{colourMode:"light"})}):"#000000",j.current.width=3,b.current.freeDrawingBrush=j.current,()=>{var r;null===(r=b.current)||void 0===r||r.dispose()}}),[]),l((()=>{var r;if(window)return window.addEventListener("resize",x),null===(r=screen.orientation)||void 0===r||r.addEventListener("change",x),x(),()=>{var r;window.removeEventListener("resize",x),null===(r=screen.orientation)||void 0===r||r.removeEventListener("change",x)}}),[x]),l((()=>{r(void 0,void 0,void 0,(function*(){if(g){const r=yield i.fromURL(g);b.current&&(b.current.clear(),r.selectable=!1,r.hoverCursor="default",b.current.width&&r.width&&r.scale(b.current.width/r.width),b.current.add(r),b.current.centerObject(r))}}))}),[g]),e(v,{ref:w,children:e(f,{id:"eSignatureCanvas",ref:p})})}));export{h as ESignatureCanvas};
|
|
2
2
|
//# sourceMappingURL=e-signature-canvas.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"e-signature-canvas.js","sources":["../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport {\n Ref,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport {\n SignatureCanvas,\n SignatureCanvasContainer,\n} from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string | null | undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string | null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const theme = useContext(ThemeContext);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n pencilBrush.current.color = Colour[\"text\"]({ theme });\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <SignatureCanvasContainer ref={containerRef}>\n <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n </SignatureCanvasContainer>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","theme","useContext","ThemeContext","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","Colour","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"wcA2BA,
|
|
1
|
+
{"version":3,"file":"e-signature-canvas.js","sources":["../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport {\n Ref,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport {\n SignatureCanvas,\n SignatureCanvasContainer,\n} from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string | null | undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string | null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const theme = useContext(ThemeContext);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n if (theme) {\n pencilBrush.current.color = Colour[\"text\"]({\n theme: {\n ...theme,\n colourMode: \"light\",\n },\n });\n } else {\n pencilBrush.current.color = \"#000000\";\n }\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <SignatureCanvasContainer ref={containerRef}>\n <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n </SignatureCanvasContainer>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","theme","useContext","ThemeContext","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","Colour","colourMode","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"wcA2BA,MAsIaA,EAAmBC,GAtId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAuB,MACtCC,EAAYD,EAA0B,MACtCE,EAAeF,IACfG,EAAcH,IACdI,EAAQC,EAAWC,GAKzBC,EAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,GAAY,IAAWC,OAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IAuEH,OAjEAE,GAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAoBlC,OAnBAR,EAAaQ,QAAU,IAAI2B,EAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,EAAYtC,EAAaQ,SAE/CP,EAAYO,QAAQ+B,MADpBrC,EAC4BsC,EAAa,KAAE,CACvCtC,qCACOA,GAAK,CACRuC,WAAY,YAIQ,UAEhCxC,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQkC,iBAAmBzC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEoC,SAAS,CAEvC,GACD,IAGHT,GAAU,WACN,GAAIU,OAIA,OAHAA,OAAOC,iBAAiB,SAAU3B,GAChB,QAAlBX,EAAAuC,OAAOC,mBAAW,IAAAxC,GAAAA,EAAEsC,iBAAiB,SAAU3B,GAC/CA,IACO,WACH0B,OAAOI,oBAAoB,SAAU9B,GACnB,QAAlBX,EAAAuC,OAAOC,mBAAW,IAAAxC,GAAAA,EAAEyC,oBAAoB,SAAU9B,EAAa,CAEvE,GACD,CAACA,IAGJgB,GAAU,KACyBd,OAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMqD,QAAYC,EAAYC,QAAQvD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrB2C,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdrD,EAAaQ,QAAQoB,OAASqB,EAAIrB,OAClCqB,EAAIK,MAAMtD,EAAaQ,QAAQoB,MAAQqB,EAAIrB,OAE/C5B,EAAaQ,QAAQ+C,IAAIN,GACzBjD,EAAaQ,QAAQyB,aAAagB,GAE1C,CACJ,GAEa,GACd,CAACrD,IAMA4D,EAACC,EAAwB,CAAC9D,IAAKE,WAC3B2D,EAACE,GAAgBC,GAAG,mBAAmBhE,IAAKI,KACrB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import i,{css as t}from"styled-components";import{Button as e}from"../button/button.js";import{IconButton as o}from"../icon-button/icon-button.js";import{Modal as
|
|
2
|
-
${i=>`\n ${n.MaxWidth.sm(i)},\n (orientation: landscape) and (max-height: ${
|
|
1
|
+
import i,{css as t}from"styled-components";import{Button as e}from"../button/button.js";import{IconButton as o}from"../icon-button/icon-button.js";import{Modal as r}from"../modal/index.js";import{MediaQuery as n,Breakpoint as a,Colour as d,Border as s,Radius as g,Spacing as c,Font as l}from"../theme/index.js";import{Typography as h}from"../typography/typography.js";const p=t`
|
|
2
|
+
${i=>`\n ${n.MaxWidth.sm(i)},\n (orientation: landscape) and (max-height: ${a["sm-max"](i)}px)\n `}
|
|
3
3
|
`,m=t`
|
|
4
|
-
${i=>`\n @media (orientation: landscape) and (max-height: ${
|
|
4
|
+
${i=>`\n @media (orientation: landscape) and (max-height: ${a["sm-max"](i)}px)\n `}
|
|
5
5
|
`,$=i.div`
|
|
6
6
|
position: relative;
|
|
7
7
|
display: flex;
|
|
@@ -34,6 +34,8 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
34
34
|
object-position: center;
|
|
35
35
|
width: calc(100% - (3rem + ${c["spacing-16"]}) * 2);
|
|
36
36
|
height: 100%;
|
|
37
|
+
|
|
38
|
+
${i=>{var t;return"dark"===(null===(t=i.theme)||void 0===t?void 0:t.colourMode)&&"filter: invert(1);"}}
|
|
37
39
|
`,f=i.div`
|
|
38
40
|
background: ${d["bg-primary-subtlest"]};
|
|
39
41
|
border: ${s["width-010"]} ${s.solid} ${d.border};
|
|
@@ -45,25 +47,25 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
45
47
|
flex: 1;
|
|
46
48
|
flex-direction: column;
|
|
47
49
|
align-items: center;
|
|
48
|
-
`,
|
|
50
|
+
`,v=i(h.BodySM)`
|
|
49
51
|
margin-top: ${c["spacing-16"]};
|
|
50
|
-
`,
|
|
52
|
+
`,w=i(r)`
|
|
51
53
|
/* increase specificity as the styles are overwritten */
|
|
52
54
|
&& {
|
|
53
55
|
height: 100%;
|
|
54
56
|
overflow-y: auto;
|
|
55
57
|
}
|
|
56
|
-
`,
|
|
58
|
+
`,y=i.div`
|
|
57
59
|
width: 100%;
|
|
58
60
|
margin: auto;
|
|
59
61
|
padding: ${c["layout-xxl"]} ${c["layout-sm"]};
|
|
60
62
|
|
|
61
|
-
${
|
|
63
|
+
${p} {
|
|
62
64
|
padding: 0;
|
|
63
65
|
width: 100%;
|
|
64
66
|
height: 100%;
|
|
65
67
|
}
|
|
66
|
-
`,j=i(
|
|
68
|
+
`,j=i(r.Box)`
|
|
67
69
|
width: 100%;
|
|
68
70
|
height: 29rem;
|
|
69
71
|
max-width: 672px;
|
|
@@ -71,7 +73,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
71
73
|
margin: 0 auto;
|
|
72
74
|
padding: ${c["spacing-16"]};
|
|
73
75
|
|
|
74
|
-
${
|
|
76
|
+
${p} {
|
|
75
77
|
display: flex;
|
|
76
78
|
flex-direction: column;
|
|
77
79
|
max-width: none;
|
|
@@ -83,13 +85,13 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
83
85
|
--close-button-right-inset: ${c["spacing-20"]};
|
|
84
86
|
}
|
|
85
87
|
`,k=i.h2`
|
|
86
|
-
${
|
|
88
|
+
${l["body-baseline-semibold"]}
|
|
87
89
|
color: ${d.text};
|
|
88
90
|
margin-bottom: ${c["spacing-16"]};
|
|
89
91
|
text-align: center;
|
|
90
92
|
|
|
91
|
-
${
|
|
92
|
-
${
|
|
93
|
+
${p} {
|
|
94
|
+
${l["body-md-semibold"]}
|
|
93
95
|
margin: ${c["spacing-12"]} 0;
|
|
94
96
|
}
|
|
95
97
|
`,M=i.div`
|
|
@@ -98,7 +100,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
98
100
|
border-radius: ${g.lg};
|
|
99
101
|
overflow: hidden;
|
|
100
102
|
|
|
101
|
-
${
|
|
103
|
+
${p} {
|
|
102
104
|
border-radius: 0;
|
|
103
105
|
flex: 1;
|
|
104
106
|
}
|
|
@@ -113,7 +115,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
113
115
|
background: ${d["bg-stronger"]};
|
|
114
116
|
margin: auto;
|
|
115
117
|
|
|
116
|
-
${
|
|
118
|
+
${p} {
|
|
117
119
|
aspect-ratio: 4/3;
|
|
118
120
|
}
|
|
119
121
|
${n.MaxWidth.sm} {
|
|
@@ -134,7 +136,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
134
136
|
background-color: ${d["border-strong"]};
|
|
135
137
|
pointer-events: none;
|
|
136
138
|
|
|
137
|
-
${
|
|
139
|
+
${p} {
|
|
138
140
|
width: calc(100% - ${c["spacing-40"]});
|
|
139
141
|
max-width: 300px;
|
|
140
142
|
left: 50%;
|
|
@@ -169,5 +171,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
|
|
|
169
171
|
overflow: hidden;
|
|
170
172
|
`,X=i.canvas`
|
|
171
173
|
cursor: crosshair;
|
|
172
|
-
|
|
174
|
+
|
|
175
|
+
${i=>{var t;return"dark"===(null===(t=i.theme)||void 0===t?void 0:t.colourMode)&&"filter: invert(1);"}}
|
|
176
|
+
`;export{b as AddSignatureButton,M as ESignatureContainer,W as ESignatureDrawable,u as EditSignatureButton,y as GrowContainer,v as Instructions,S as ModalActionButton,j as ModalBox,D as ModalButtons,k as ModalTitle,f as ProgressBox,w as ScrollableModal,$ as SignatureArea,X as SignatureCanvas,U as SignatureCanvasContainer,B as SignatureLine,x as SignaturePreviewImage};
|
|
173
177
|
//# sourceMappingURL=e-signature.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"e-signature.styles.js","sources":["../../src/e-signature/e-signature.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport { Modal } from \"../modal\";\nimport {\n Border,\n Breakpoint,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface SignatureAreaProps {\n $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// CUSTOM MEDIA QUERIES\n// =============================================================================\n// for mobileL and below in both orientations\nconst mobileMediaQuery = css`\n ${(props) => `\n ${MediaQuery.MaxWidth.sm(props)},\n (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n
|
|
1
|
+
{"version":3,"file":"e-signature.styles.js","sources":["../../src/e-signature/e-signature.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport { Modal } from \"../modal\";\nimport {\n Border,\n Breakpoint,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface SignatureAreaProps {\n $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// CUSTOM MEDIA QUERIES\n// =============================================================================\n// for mobileL and below in both orientations\nconst mobileMediaQuery = css`\n ${(props) => `\n ${MediaQuery.MaxWidth.sm(props)},\n (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n props\n )}px)\n `}\n`;\nconst mobileLandscapeMediaQuery = css`\n ${(props) => `\n @media (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n props\n )}px)\n `}\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN FIELD\n// -----------------------------------------------------------------------------\n\nexport const SignatureArea = styled.div<SignatureAreaProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n ${(props) =>\n css`\n ${Border.Util[\"dashed-default\"]({\n radius: Radius[\"sm\"],\n thickness: Border[\"width-040\"],\n colour: props.$disabled\n ? Colour[\"border-disabled\"]\n : Colour[\"border\"],\n })}\n\n background-color: ${props.$disabled\n ? Colour[\"bg-disabled\"]\n : Colour[\"bg\"]};\n `}\n height: 14.125rem;\n`;\n\nexport const AddSignatureButton = styled(Button.Default)`\n width: fit-content;\n margin: 0 ${Spacing[\"spacing-20\"]};\n\n &:disabled {\n border-color: ${Colour[\"border-strong\"]};\n }\n`;\n\nexport const EditSignatureButton = styled(IconButton)`\n position: absolute;\n top: ${Spacing[\"spacing-16\"]};\n right: ${Spacing[\"spacing-16\"]};\n\n &:disabled {\n border-color: ${Colour[\"border-strong\"]};\n }\n`;\n\nexport const SignaturePreviewImage = styled.img`\n display: block;\n object-fit: contain;\n object-position: center;\n width: calc(100% - (3rem + ${Spacing[\"spacing-16\"]}) * 2);\n height: 100%;\n\n ${(props) => props.theme?.colourMode === \"dark\" && `filter: invert(1);`}\n`;\n\nexport const ProgressBox = styled.div`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n margin: 0 ${Spacing[\"spacing-20\"]};\n padding: ${Spacing[\"spacing-16\"]};\n display: flex;\n gap: ${Spacing[\"spacing-16\"]};\n flex: 1;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const Instructions = styled(Typography.BodySM)`\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// SIGNATURE MODAL\n// -----------------------------------------------------------------------------\n\nexport const ScrollableModal = styled(Modal)`\n /* increase specificity as the styles are overwritten */\n && {\n height: 100%;\n overflow-y: auto;\n }\n`;\n\nexport const GrowContainer = styled.div`\n width: 100%;\n margin: auto;\n padding: ${Spacing[\"layout-xxl\"]} ${Spacing[\"layout-sm\"]};\n\n ${mobileMediaQuery} {\n padding: 0;\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const ModalBox = styled(Modal.Box)`\n width: 100%;\n height: 29rem;\n max-width: 672px;\n max-height: none;\n margin: 0 auto;\n padding: ${Spacing[\"spacing-16\"]};\n\n ${mobileMediaQuery} {\n display: flex;\n flex-direction: column;\n max-width: none;\n height: 100%;\n border-radius: 0;\n padding: 0;\n\n --close-button-top-inset: ${Spacing[\"spacing-8\"]};\n --close-button-right-inset: ${Spacing[\"spacing-20\"]};\n }\n`;\n\nexport const ModalTitle = styled.h2`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n margin-bottom: ${Spacing[\"spacing-16\"]};\n text-align: center;\n\n ${mobileMediaQuery} {\n ${Font[\"body-md-semibold\"]}\n margin: ${Spacing[\"spacing-12\"]} 0;\n }\n`;\n\nexport const ESignatureContainer = styled.div`\n width: 100%;\n height: 20rem;\n border-radius: ${Radius[\"lg\"]};\n overflow: hidden;\n\n ${mobileMediaQuery} {\n border-radius: 0;\n flex: 1;\n }\n\n ${mobileLandscapeMediaQuery} {\n background: ${Colour[\"bg-strong\"]};\n }\n`;\n\nexport const ESignatureDrawable = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n background: ${Colour[\"bg-stronger\"]};\n margin: auto;\n\n ${mobileMediaQuery} {\n aspect-ratio: 4/3;\n }\n ${MediaQuery.MaxWidth.sm} {\n width: 100%;\n height: auto;\n }\n ${mobileLandscapeMediaQuery} {\n width: auto;\n height: 100%;\n }\n`;\n\nexport const SignatureLine = styled.div`\n position: absolute;\n left: 50%;\n top: calc(75% - 1px);\n width: 300px;\n height: 2px;\n transform: translateX(-50%);\n background-color: ${Colour[\"border-strong\"]};\n pointer-events: none;\n\n ${mobileMediaQuery} {\n width: calc(100% - ${Spacing[\"spacing-40\"]});\n max-width: 300px;\n left: 50%;\n }\n`;\n\nexport const ModalButtons = styled.div`\n display: flex;\n justify-content: space-between;\n margin-top: ${Spacing[\"spacing-16\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n flex-direction: column-reverse;\n margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]}\n ${Spacing[\"spacing-48\"]};\n gap: ${Spacing[\"spacing-16\"]};\n }\n\n ${mobileLandscapeMediaQuery} {\n flex-direction: row;\n margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n }\n`;\n\nexport const ModalActionButton = styled(Button.Default)`\n width: 8.5rem;\n ${MediaQuery.MaxWidth.sm} {\n width: 100%;\n }\n ${mobileLandscapeMediaQuery} {\n height: 2.5rem;\n }\n`;\n\nexport const SignatureCanvasContainer = styled.div`\n width: 100%;\n height: 100%;\n overflow: hidden;\n`;\n\nexport const SignatureCanvas = styled.canvas`\n cursor: crosshair;\n\n ${(props) => props.theme?.colourMode === \"dark\" && `filter: invert(1);`}\n`;\n"],"names":["mobileMediaQuery","css","props","MediaQuery","MaxWidth","sm","Breakpoint","mobileLandscapeMediaQuery","SignatureArea","styled","div","Border","Util","radius","Radius","thickness","colour","$disabled","Colour","AddSignatureButton","Button","Default","Spacing","EditSignatureButton","IconButton","SignaturePreviewImage","img","_a","theme","colourMode","ProgressBox","Instructions","Typography","BodySM","ScrollableModal","Modal","GrowContainer","ModalBox","Box","ModalTitle","h2","Font","ESignatureContainer","ESignatureDrawable","SignatureLine","ModalButtons","ModalActionButton","SignatureCanvasContainer","SignatureCanvas","canvas"],"mappings":"gXA0BA,MAAMA,EAAmBC,CAAG;MACrBC,GAAU,aACPC,EAAWC,SAASC,GAAGH,0DACmBI,EAAW,UACnDJ;EAINK,EAA4BN,CAAG;MAC9BC,GAAU,8DAC0CI,EAAW,UAC1DJ;EAaCM,EAAgBC,EAAOC,GAAuB;;;;;MAKpDR,GACCD,CAAG;cACGU,EAAOC,KAAK,kBAAkB,CAC5BC,OAAQC,EAAW,GACnBC,UAAWJ,EAAO,aAClBK,OAAQd,EAAMe,UACRC,EAAO,mBACPA,EAAe;;gCAGLhB,EAAMe,UACpBC,EAAO,eACPA,EAAW;;;EAKhBC,EAAqBV,EAAOW,EAAOC,QAAQ;;gBAExCC,EAAQ;;;wBAGAJ,EAAO;;EAIlBK,EAAsBd,EAAOe,EAAW;;WAE1CF,EAAQ;aACNA,EAAQ;;;wBAGGJ,EAAO;;EAIlBO,EAAwBhB,EAAOiB,GAAG;;;;iCAIdJ,EAAQ;;;MAGlCpB,IAAS,IAAAyB,EAAC,MAA4B,kBAA5BA,EAAAzB,EAAM0B,4BAAOC,aAAyB,oBAAoB;EAG9DC,EAAcrB,EAAOC,GAAG;kBACnBQ,EAAO;cACXP,EAAO,gBAAgBA,EAAc,SAAKO,EAAe;qBAClDJ,EAAW;gBAChBQ,EAAQ;eACTA,EAAQ;;WAEZA,EAAQ;;;;EAMNS,EAAetB,EAAOuB,EAAWC,OAAO;kBACnCX,EAAQ;EAObY,EAAkBzB,EAAO0B,EAAM;;;;;;EAQ/BC,EAAgB3B,EAAOC,GAAG;;;eAGxBY,EAAQ,iBAAiBA,EAAQ;;MAE1CtB;;;;;EAOOqC,EAAW5B,EAAO0B,EAAMG,IAAI;;;;;;eAM1BhB,EAAQ;;MAEjBtB;;;;;;;;oCAQ8BsB,EAAQ;sCACNA,EAAQ;;EAIjCiB,EAAa9B,EAAO+B,EAAE;MAC7BC,EAAK;aACEvB,EAAa;qBACLI,EAAQ;;;MAGvBtB;UACIyC,EAAK;kBACGnB,EAAQ;;EAIboB,EAAsBjC,EAAOC,GAAG;;;qBAGxBI,EAAW;;;MAG1Bd;;;;;MAKAO;sBACgBW,EAAO;;EAIhByB,EAAqBlC,EAAOC,GAAG;;;;kBAI1BQ,EAAO;;;MAGnBlB;;;MAGAG,EAAWC,SAASC;;;;MAIpBE;;;;EAMOqC,EAAgBnC,EAAOC,GAAG;;;;;;;wBAOfQ,EAAO;;;MAGzBlB;6BACuBsB,EAAQ;;;;EAMxBuB,EAAepC,EAAOC,GAAG;;;kBAGpBY,EAAQ;;MAEpBnB,EAAWC,SAASC;;kBAERiB,EAAQ,iBAAiBA,EAAQ;cACrCA,EAAQ;eACPA,EAAQ;;;MAGjBf;;kBAEYe,EAAQ,iBAAiBA,EAAQ;;EAItCwB,EAAoBrC,EAAOW,EAAOC,QAAQ;;MAEjDlB,EAAWC,SAASC;;;MAGpBE;;;EAKOwC,EAA2BtC,EAAOC,GAAG;;;;EAMrCsC,EAAkBvC,EAAOwC,MAAM;;;MAGrC/C,IAAS,IAAAyB,EAAC,MAA4B,kBAA5BA,EAAAzB,EAAM0B,4BAAOC,aAAyB,oBAAoB;"}
|
|
@@ -111,7 +111,7 @@ import i,{css as r}from"styled-components";import{ExclamationCircleFillIcon as e
|
|
|
111
111
|
${m["body-sm-semibold"]}
|
|
112
112
|
color: ${d["text-error"]};
|
|
113
113
|
`,v=i(w)`
|
|
114
|
-
margin-top: ${l["spacing-
|
|
114
|
+
margin-top: ${l["spacing-8"]};
|
|
115
115
|
display: flex;
|
|
116
116
|
gap: ${l["spacing-4"]};
|
|
117
117
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-list-card.styles.js","sources":["../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\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 = styled.div<BoxStyleProps>`\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 ${(props) => {\n if (props.$error) {\n return css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n\n &:hover {\n background: ${Colour[\"bg-error\"]};\n }\n `;\n }\n }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\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 ${(props) => {\n if (props.$hasThumbnail) {\n return css`\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: row;\n align-items: center;\n }\n `;\n }\n }}\n`;\n\nexport const NameSection = styled.div`\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 = styled.div`\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 = styled.div`\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 = styled.div`\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n ${lineClampCss(2)}\n }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n ${Font[\"body-md-regular\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n margin-top: ${Spacing[\"spacing-
|
|
1
|
+
{"version":3,"file":"file-list-card.styles.js","sources":["../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\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 = styled.div<BoxStyleProps>`\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 ${(props) => {\n if (props.$error) {\n return css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n\n &:hover {\n background: ${Colour[\"bg-error\"]};\n }\n `;\n }\n }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\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 ${(props) => {\n if (props.$hasThumbnail) {\n return css`\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: row;\n align-items: center;\n }\n `;\n }\n }}\n`;\n\nexport const NameSection = styled.div`\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 = styled.div`\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 = styled.div`\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 = styled.div`\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n ${lineClampCss(2)}\n }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n ${Font[\"body-md-regular\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(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 = styled(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 Spinner = styled(ComponentLoadingSpinner)`\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\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 = styled(DSIconButton)`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const ThumbnailContainer = styled.div`\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 = styled(ImageWithFallback)`\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":["Item","styled","li","Spacing","Box","div","Colour","Border","Radius","MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"ojBAuBO,MAAMA,EAAOC,EAAOC,EAAE;;;;;;;;yBAQJC,EAAQ;;EAIpBC,EAAMH,EAAOI,GAAkB;;;;;eAK7BF,EAAQ,iBAAiBA,EAAQ;;;kBAG9BG,EAAO;cACXC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;MAE1BC,EAAWC,SAASC;mBACPR,EAAQ;;;;sBAILG,EAAO;;;MAGtBM,IACC,GAAIA,EAAMC,OACN,OAAOC,CAAG;8BACQR,EAAO;gCACLA,EAAO;;;kCAGLA,EAAO;;aAGjC;EAIKS,EAAiBd,EAAOI,GAA6B;;;;;MAK5DI,EAAWC,SAASC;;;;;;MAMnBC,IACC,GAAIA,EAAMI,cACN,OAAOF,CAAG;kBACJL,EAAWC,SAASC;;;;aAK9B;EAIKM,EAAchB,EAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAOI,GAAG;;;;;MAKvCI,EAAWC,SAASC;;;;;EAObQ,EAAkBlB,EAAOI,GAAG;;;;;mBAKtBF,EAAQ;;MAErBiB,EAAK;aACEd,EAAa;;MAEpBG,EAAWC,SAASC;;;;;sBAKJR,EAAQ;;UAEpBkB,EAAa;;EAIVC,EAAerB,EAAOI,GAAG;MAChCe,EAAK;aACEd,EAAa;;MAEpBG,EAAWC,SAASC;UAChBU,EAAa;;EAIYpB,EAAOqB,EAAa;MACjDF,EAAK;kBACOjB,EAAQ;QAGboB,EAAYtB,EAAOuB,EAA0B;;;;aAI7ClB,EAAO;EAGdmB,EAAmBxB,EAAOI,GAAG;MAC7Be,EAAK;aACEd,EAAO;EAGPoB,EAAsBzB,EAAOwB,EAAiB;kBACzCtB,EAAQ;;WAEfA,EAAQ;;MAEbM,EAAWC,SAASC;;;;EAMbgB,EAAqB1B,EAAOwB,EAAiB;;;;MAIpDhB,EAAWC,SAASC;;eAEXR,EAAQ;;sBAEDA,EAAQ;;EAIjByB,EAAU3B,EAAO4B,EAAwB;aACzCvB,EAAO;EAGPwB,EAAkB7B,EAAOI,GAAG;;;;;mBAKtBF,EAAQ;;MAErBM,EAAWC,SAASC;uBACHR,EAAQ;;EAIlB4B,EAAa9B,EAAO+B,EAAa;;;;wBAItB7B,EAAQ;;EAInB8B,EAAqBhC,EAAOI,GAAG;;oBAExBF,EAAQ;;;;;;;MAOtBM,EAAWC,SAASC;wBACFR,EAAQ;;EAInB+B,EAAYjC,EAAOkC,EAAkB;qBAC7B3B,EAAW;cAClBD,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;;;;;;;MAOjEG,EAAWC,SAASC;;;;"}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { FileItemProps } from "./types";
|
|
2
|
+
import { FormLabelProps } from "../form/types";
|
|
2
3
|
interface Props {
|
|
3
4
|
fileItem: FileItemProps;
|
|
4
5
|
wrapperWidth: number;
|
|
5
6
|
fileDescriptionMaxLength?: number | undefined;
|
|
7
|
+
descriptionRequired?: boolean | undefined;
|
|
8
|
+
descriptionLabel?: FormLabelProps | undefined;
|
|
6
9
|
onSave: (description: string) => void;
|
|
7
10
|
onCancel: () => void;
|
|
8
11
|
onBlur: (value: string) => void;
|
|
9
12
|
}
|
|
10
|
-
export declare const FileItemEdit: ({ fileItem, fileDescriptionMaxLength, wrapperWidth, onSave, onCancel, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const FileItemEdit: ({ fileItem, fileDescriptionMaxLength, descriptionRequired, descriptionLabel, wrapperWidth, onSave, onCancel, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as r,useCallback as n,useEffect as l}from"react";import{Form as a}from"../form/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import{StringHelper as o}from"../util/string-helper.js";import"@react-aria/live-announcer";import{Item as s,ContentSection as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as r,useCallback as n,useEffect as l}from"react";import{Form as a}from"../form/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import{StringHelper as o}from"../util/string-helper.js";import"@react-aria/live-announcer";import{Item as s,ContentSection as d,DetailsSection as c,ActionButtonsSection as m,ActionButton as u,NameSection as p,FileNameText as h,FileSizeText as f}from"./file-item-edit.styles.js";import{FileListItemThumbnail as b}from"./file-list-item/file-list-item-thumbnail.js";import{FileUploadHelper as g}from"./helper.js";const y=({fileItem:y,fileDescriptionMaxLength:j,descriptionRequired:x=!0,descriptionLabel:v,wrapperWidth:C,onSave:D,onCancel:$,onBlur:w})=>{const{id:T,name:I,size:L,type:B,truncateText:M=!0,thumbnailImageDataUrl:P}=y,[S,k]=i(),[z,E]=i(""),F=r(null),R=r(null),U=n((e=>{if(!M)return e;const t=R&&R.current?R.current.getBoundingClientRect().width:0;return o.truncateOneLine(e,t,t/2,t/2/8,16)}),[M]);l((()=>{k(U(I))}),[C,U,I]),l((()=>{E(y.description||"")}),[y]);const _=!!P||B===g.PDF_MIME_TYPE;return e(s,{"data-testid":`${T}-edit-display`,children:[e(d,{children:[_&&t(b,{thumbnailImageDataUrl:P,fileType:B}),e(c,{children:[e(p,{ref:R,children:[t(h,{weight:"semibold",children:S}),t(f,{children:g.formatFileSizeDisplay(L)})]}),t(a.Textarea,{ref:F,id:`${T}-description-textarea`,"data-testid":`${T}-textarea`,value:z,maxLength:j,onChange:e=>{E(e.target.value)},onBlur:e=>{w(e.target.value)},rows:3,label:null!=v?v:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e(m,{$thumbnail:_,children:[t(u,{"data-testid":`${T}-save-button`,type:"button",disabled:(()=>{if(!x)return!1;return 0===z.trim().length})(),onClick:()=>{F.current&&D(F.current.value.trim())},children:"Save"}),t(u,{type:"button",styleType:"secondary","data-testid":`${T}-cancel-button`,onClick:$,children:"Cancel"})]})]})};export{y as FileItemEdit};
|
|
2
2
|
//# sourceMappingURL=file-item-edit.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n ActionButton,\n ActionButtonsSection,\n ContentSection,\n DetailsSection,\n FileNameText,\n FileSizeText,\n Item,\n NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\n\ninterface Props {\n fileItem: FileItemProps;\n wrapperWidth: number;\n fileDescriptionMaxLength?: number | undefined;\n onSave: (description: string) => void;\n onCancel: () => void;\n onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n fileItem,\n fileDescriptionMaxLength,\n wrapperWidth,\n onSave,\n onCancel,\n onBlur,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n type,\n truncateText = true,\n thumbnailImageDataUrl,\n } = fileItem;\n\n const [formattedName, setFormattedName] = useState<string>();\n const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const nameSectionRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = useCallback(\n (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n nameSectionRef && nameSectionRef.current\n ? nameSectionRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateOneLine(\n value,\n widthOfElement,\n widthOfElement / 2,\n widthOfElement / 2 / 8, // Arbitrary\n 16 // Font size\n );\n },\n [truncateText]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setFormattedName(getTruncatedText(name));\n }, [wrapperWidth, getTruncatedText, name]);\n\n useEffect(() => {\n setCurrentDescription(fileItem.description || \"\");\n }, [fileItem]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSave = () => {\n if (textareaRef.current) {\n onSave(textareaRef.current.value.trim());\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentDescription(event.target.value);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n onBlur(event.target.value);\n };\n\n const shouldDisableSave = () => {\n const trimmedDescription = currentDescription.trim();\n return trimmedDescription.length === 0;\n };\n\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFileNameAndSize = () => (\n <NameSection ref={nameSectionRef}>\n <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n <FileSizeText>\n {FileUploadHelper.formatFileSizeDisplay(size)}\n </FileSizeText>\n </NameSection>\n );\n\n return (\n <Item data-testid={`${id}-edit-display`}>\n <ContentSection>\n {shouldShowThumbnail && (\n <FileListItemThumbnail\n thumbnailImageDataUrl={thumbnailImageDataUrl}\n fileType={type}\n />\n )}\n <DetailsSection>\n {renderFileNameAndSize()}\n <Form.Textarea\n ref={textareaRef}\n id={`${id}-description-textarea`}\n data-testid={`${id}-textarea`}\n value={currentDescription}\n maxLength={fileDescriptionMaxLength}\n onChange={handleChange}\n onBlur={handleBlur}\n rows={3}\n
|
|
1
|
+
{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n ActionButton,\n ActionButtonsSection,\n ContentSection,\n DetailsSection,\n FileNameText,\n FileSizeText,\n Item,\n NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\nimport { FormLabelProps } from \"../form/types\";\n\ninterface Props {\n fileItem: FileItemProps;\n wrapperWidth: number;\n fileDescriptionMaxLength?: number | undefined;\n descriptionRequired?: boolean | undefined;\n descriptionLabel?: FormLabelProps | undefined;\n onSave: (description: string) => void;\n onCancel: () => void;\n onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n fileItem,\n fileDescriptionMaxLength,\n descriptionRequired = true,\n descriptionLabel,\n wrapperWidth,\n onSave,\n onCancel,\n onBlur,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n type,\n truncateText = true,\n thumbnailImageDataUrl,\n } = fileItem;\n\n const [formattedName, setFormattedName] = useState<string>();\n const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const nameSectionRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = useCallback(\n (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n nameSectionRef && nameSectionRef.current\n ? nameSectionRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateOneLine(\n value,\n widthOfElement,\n widthOfElement / 2,\n widthOfElement / 2 / 8, // Arbitrary\n 16 // Font size\n );\n },\n [truncateText]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setFormattedName(getTruncatedText(name));\n }, [wrapperWidth, getTruncatedText, name]);\n\n useEffect(() => {\n setCurrentDescription(fileItem.description || \"\");\n }, [fileItem]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSave = () => {\n if (textareaRef.current) {\n onSave(textareaRef.current.value.trim());\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentDescription(event.target.value);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n onBlur(event.target.value);\n };\n\n const shouldDisableSave = () => {\n if (!descriptionRequired) return false;\n const trimmedDescription = currentDescription.trim();\n return trimmedDescription.length === 0;\n };\n\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFileNameAndSize = () => (\n <NameSection ref={nameSectionRef}>\n <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n <FileSizeText>\n {FileUploadHelper.formatFileSizeDisplay(size)}\n </FileSizeText>\n </NameSection>\n );\n\n return (\n <Item data-testid={`${id}-edit-display`}>\n <ContentSection>\n {shouldShowThumbnail && (\n <FileListItemThumbnail\n thumbnailImageDataUrl={thumbnailImageDataUrl}\n fileType={type}\n />\n )}\n <DetailsSection>\n {renderFileNameAndSize()}\n <Form.Textarea\n ref={textareaRef}\n id={`${id}-description-textarea`}\n data-testid={`${id}-textarea`}\n value={currentDescription}\n maxLength={fileDescriptionMaxLength}\n onChange={handleChange}\n onBlur={handleBlur}\n rows={3}\n label={\n descriptionLabel ?? {\n children: \"Photo description\",\n subtitle:\n \"Describe this photo to users who may not be able to see the image.\",\n }\n }\n />\n </DetailsSection>\n </ContentSection>\n <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n <ActionButton\n data-testid={`${id}-save-button`}\n type=\"button\"\n disabled={shouldDisableSave()}\n onClick={handleSave}\n >\n Save\n </ActionButton>\n <ActionButton\n type=\"button\"\n styleType=\"secondary\"\n data-testid={`${id}-cancel-button`}\n onClick={onCancel}\n >\n Cancel\n </ActionButton>\n </ActionButtonsSection>\n </Item>\n );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","shouldDisableSave","onClick","styleType"],"mappings":"+sBA6BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAiBC,cAczD,OACIC,EAACC,EAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAACG,aACIN,GACGO,EAACC,EAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAACO,EAAc,CAAAL,SAAA,CAjBvBF,EAACQ,EAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAACM,EAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAACQ,EAAY,CAAAV,SACRJ,EAAiBe,sBAAsBvC,QAgBpC8B,EAACU,EAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWnD,EACXoD,SA9CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA8CzBjB,OA3CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA2CVgC,KAAM,EACNC,MACItD,QAAAA,EAAoB,CAChBmC,SAAU,oBACVoB,SACI,8EAMxBtB,EAACuB,EAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,EAACqB,EAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAvDU,MACtB,IAAK5D,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmB8C,OACpBC,MAAY,EAoDhBC,GACVC,QAtEG,KACX/C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAmE+BzB,SAAA,SAIvBE,EAACqB,EAAY,CACTlD,KAAK,SACLwD,UAAU,0BACG,GAAG3D,kBAChB0D,QAAS5D,EAAQgC,SAAA,gBAKtB"}
|