@laerdal/life-react-components 2.3.1-dev.25 → 2.3.1-dev.27
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/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +0 -19
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.d.ts +1 -2
- package/dist/InputFields/index.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +1 -1
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +1 -1
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +1 -1
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +1 -1
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +3 -3
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +3 -3
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\
|
|
1
|
+
{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n & {\n id?: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (text: string) => void;\n value?: string;\n validationMessage?: string;\n type?: string;\n state?: States.Invalid | States.Valid;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n pattern?: string;\n maxLength?: number;\n withoutBorder?: boolean;\n size?: Size.Small | Size.Medium;\n margin?: string;\n note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n id,\n disabled,\n readOnly,\n onChange,\n value,\n validationMessage,\n type,\n autoComplete,\n placeholder,\n required,\n pattern,\n maxLength,\n withoutBorder,\n state,\n size,\n margin,\n note,\n className,\n dataTestId,\n ...rest\n }: TextFieldProps, ref) => {\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n return (\n <>\n <InputWrapper\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onClick={(e: any) => {\n if (disabled || readOnly) {\n e.preventDefault();\n }\n }}>\n <InputFieldStyling\n id={id}\n data-testId={dataTestId}\n ref={elementRef}\n type={type || 'text'}\n value={value}\n className={cls}\n tabIndex={readOnly || disabled ? -1 : 0}\n autoComplete={autoComplete}\n placeholder={disabled ? undefined : placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n activeErrorMessage={!!validationMessage && state !== States.Valid}\n required={required}\n pattern={pattern}\n maxLength={maxLength}\n withoutBorder={withoutBorder}\n {...rest}\n />\n <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n {value}\n </TooltipOverflow>\n\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </InputWrapper>\n </>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Size, States, Testable } from '../types';
|
|
3
3
|
import { TextFieldNote } from './types';
|
|
4
|
-
export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
|
|
5
|
-
id?: string;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
readOnly?: boolean;
|
|
8
|
-
onChange?: (text: string) => void;
|
|
9
|
-
value?: string;
|
|
10
|
-
validationMessage?: string;
|
|
11
|
-
type?: string;
|
|
12
|
-
state?: States.Invalid | States.Valid;
|
|
13
|
-
autoComplete?: string;
|
|
14
|
-
placeholder?: string;
|
|
15
|
-
required?: boolean;
|
|
16
|
-
pattern?: string;
|
|
17
|
-
maxLength?: number;
|
|
18
|
-
withoutBorder?: boolean;
|
|
19
|
-
size?: Size.Small | Size.Medium;
|
|
20
|
-
margin?: string;
|
|
21
|
-
note?: TextFieldNote;
|
|
22
|
-
};
|
|
23
4
|
declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
|
|
24
5
|
id?: string | undefined;
|
|
25
6
|
disabled?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\
|
|
1
|
+
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n & {\n id?: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (text: string) => void;\n value?: string;\n validationMessage?: string;\n type?: string;\n state?: States.Invalid | States.Valid;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n pattern?: string;\n maxLength?: number;\n withoutBorder?: boolean;\n size?: Size.Small | Size.Medium;\n margin?: string;\n note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n id,\n disabled,\n readOnly,\n onChange,\n value,\n validationMessage,\n type,\n autoComplete,\n placeholder,\n required,\n pattern,\n maxLength,\n withoutBorder,\n state,\n size,\n margin,\n note,\n className,\n dataTestId,\n ...rest\n }: TextFieldProps, ref) => {\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n return (\n <>\n <InputWrapper\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onClick={(e: any) => {\n if (disabled || readOnly) {\n e.preventDefault();\n }\n }}>\n <InputFieldStyling\n id={id}\n data-testId={dataTestId}\n ref={elementRef}\n type={type || 'text'}\n value={value}\n className={cls}\n tabIndex={readOnly || disabled ? -1 : 0}\n autoComplete={autoComplete}\n placeholder={disabled ? undefined : placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n activeErrorMessage={!!validationMessage && state !== States.Valid}\n required={required}\n pattern={pattern}\n maxLength={maxLength}\n withoutBorder={withoutBorder}\n {...rest}\n />\n <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n {value}\n </TooltipOverflow>\n\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </InputWrapper>\n </>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n TextField,\n PasswordField,\n Checkbox,\n RadioButton,\n SearchBar,\n InputLabel,\n DatepickerField,\n Textarea,\n QuickSearch,\n NumberField\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import TextField
|
|
1
|
+
import TextField from './TextField';
|
|
2
2
|
import PasswordField from './PasswordField';
|
|
3
3
|
import Checkbox from './Checkbox';
|
|
4
4
|
import RadioButton from './RadioButton';
|
|
@@ -10,4 +10,3 @@ import QuickSearch from './QuickSearch';
|
|
|
10
10
|
import NumberField from './NumberField';
|
|
11
11
|
export * from './styling';
|
|
12
12
|
export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
|
|
13
|
-
export type { TextFieldProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField
|
|
1
|
+
{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n TextField,\n PasswordField,\n Checkbox,\n RadioButton,\n SearchBar,\n InputLabel,\n DatepickerField,\n Textarea,\n QuickSearch,\n NumberField\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,UAAU,MAAM,SAAS;AAChC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,WAAW,MAAM,eAAe;AAEvC,cAAc,WAAW;AAEzB,SACET,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,WAAW,EACXC,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n \n &:not(:first-child) {\n padding-left: 0 !important;\n }\n \n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n headerActions?: IconButtonAction[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n const {icon, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {getLeftActionIconElement()}\n {text}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n \n &:not(:first-child) {\n padding-left: 0 !important;\n }\n \n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n headerActions?: IconButtonAction[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n const {icon, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n \n &:not(:first-child) {\n padding-left: 0 !important;\n }\n \n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n headerActions?: IconButtonAction[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n const {icon, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {getLeftActionIconElement()}\n {text}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n \n &:not(:first-child) {\n padding-left: 0 !important;\n }\n \n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n headerActions?: IconButtonAction[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n const {icon, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
@@ -238,7 +238,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
238
238
|
action(e);
|
|
239
239
|
}
|
|
240
240
|
},
|
|
241
|
-
children: [icon && getLeftActionIconElement(icon)
|
|
241
|
+
children: [text, icon && getLeftActionIconElement(icon)]
|
|
242
242
|
});
|
|
243
243
|
case 'note':
|
|
244
244
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.cjs","names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n children?: React.ReactNode;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof title === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return title;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <SystemIcons.Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <SystemIcons.ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n )}\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalDialog.cjs","names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n children?: React.ReactNode;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof title === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return title;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <SystemIcons.Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <SystemIcons.ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {icon && getLeftActionIconElement(icon)}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n )}\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"mappings":"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"}
|
|
@@ -232,7 +232,7 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
232
232
|
action(e);
|
|
233
233
|
}
|
|
234
234
|
},
|
|
235
|
-
children: [icon && getLeftActionIconElement(icon)
|
|
235
|
+
children: [text, icon && getLeftActionIconElement(icon)]
|
|
236
236
|
});
|
|
237
237
|
case 'note':
|
|
238
238
|
return /*#__PURE__*/_jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.js","names":["React","Button","IconButton","SystemIcons","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n children?: React.ReactNode;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof title === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return title;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <SystemIcons.Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <SystemIcons.ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n )}\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalDialog.js","names":["React","Button","IconButton","SystemIcons","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n children?: React.ReactNode;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof title === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return title;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <SystemIcons.Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <SystemIcons.ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {icon && getLeftActionIconElement(icon)}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n )}\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"mappings":"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"}
|
|
@@ -102,12 +102,12 @@ var RenderTileItem = function RenderTileItem(item, size) {
|
|
|
102
102
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkWrapper, {
|
|
103
103
|
className: size,
|
|
104
104
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, rest), {}, {
|
|
105
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
105
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkText, {
|
|
106
|
+
children: linkText
|
|
107
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkIcon, {
|
|
106
108
|
children: /*#__PURE__*/_react.default.cloneElement(linkIcon, {
|
|
107
109
|
size: size === _types.Size.Large ? '28px' : '24px'
|
|
108
110
|
})
|
|
109
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkText, {
|
|
110
|
-
children: linkText
|
|
111
111
|
})]
|
|
112
112
|
}))
|
|
113
113
|
}, key);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n tooltip={item.tooltip}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n
|
|
1
|
+
{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n tooltip={item.tooltip}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkText>{linkText}</TileHyperLinkText>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n </HyperLink>\n </TileHyperLinkWrapper>\n }\n case 'button': {\n const {buttonText, componentType, ...rest} = item;\n return <Button key={key}\n size={size}\n {...rest}>\n {buttonText}\n </Button>\n }\n }\n}\n"],"mappings":"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"}
|
|
@@ -90,12 +90,12 @@ export var RenderTileItem = function RenderTileItem(item, size) {
|
|
|
90
90
|
return /*#__PURE__*/_jsx(TileHyperLinkWrapper, {
|
|
91
91
|
className: size,
|
|
92
92
|
children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, rest), {}, {
|
|
93
|
-
children: [/*#__PURE__*/_jsx(
|
|
93
|
+
children: [/*#__PURE__*/_jsx(TileHyperLinkText, {
|
|
94
|
+
children: linkText
|
|
95
|
+
}), /*#__PURE__*/_jsx(TileHyperLinkIcon, {
|
|
94
96
|
children: /*#__PURE__*/React.cloneElement(linkIcon, {
|
|
95
97
|
size: size === Size.Large ? '28px' : '24px'
|
|
96
98
|
})
|
|
97
|
-
}), /*#__PURE__*/_jsx(TileHyperLinkText, {
|
|
98
|
-
children: linkText
|
|
99
99
|
})]
|
|
100
100
|
}))
|
|
101
101
|
}, key);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n tooltip={item.tooltip}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n
|
|
1
|
+
{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n tooltip={item.tooltip}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkText>{linkText}</TileHyperLinkText>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n </HyperLink>\n </TileHyperLinkWrapper>\n }\n case 'button': {\n const {buttonText, componentType, ...rest} = item;\n return <Button key={key}\n size={size}\n {...rest}>\n {buttonText}\n </Button>\n }\n }\n}\n"],"mappings":";;;;;;;;AAQA,SAAQA,MAAM,EAAEC,UAAU,QAAO,WAAW;AAC5C,SAAQC,YAAY,QAAO,YAAY;AACvC,SAAQC,cAAc,QAAO,aAAa;AAC1C,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EAAEC,iBAAiB,EACzBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAClB,SAAQC,SAAS,QAAO,cAAc;AACtC,SAAQC,IAAI,QAAO,UAAU;AAAC;AAAA;AAG9B,OAAO,IAAMC,YAAY,GAAGV,MAAM,CAACW,GAAG,qEAAE;AACxC,OAAO,IAAMC,YAAY,GAAGZ,MAAM,CAACW,GAAG,qFAAgB;AACtD,OAAO,IAAME,eAAe,GAAGb,MAAM,CAACW,GAAG,qiBAI9BV,MAAM,CAACa,WAAW,EAKvBF,YAAY,EAKZF,YAAY,EACVH,mBAAmB,CAACF,kBAAkB,CAACU,OAAO,EAAE,IAAI,CAAC,EAOvDH,YAAY,EAKZF,YAAY,EACVJ,kBAAkB,CAACD,kBAAkB,CAACU,OAAO,EAAE,IAAI,CAAC,EAQtDH,YAAY,EAKZF,YAAY,EACVN,iBAAiB,CAACC,kBAAkB,CAACU,OAAO,EAAE,IAAI,CAAC,CAG1D;AAGD,OAAO,IAAMC,iBAAiB,GAAGhB,MAAM,CAACW,GAAG,oFAAe;AAC1D,OAAO,IAAMM,iBAAiB,GAAGjB,MAAM,CAACW,GAAG,uEAAE;AAE7C,OAAO,IAAMO,oBAAoB,GAAGlB,MAAM,CAACW,GAAG,2oBAG1CP,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAElB,MAAM,CAACmB,WAAW,CAAC,EAS5DJ,iBAAiB,EAKjBC,iBAAiB,EACfb,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EASlDH,iBAAiB,EAKjBC,iBAAiB,EACfd,iBAAiB,CAACE,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EASlDH,iBAAiB,EAKjBC,iBAAiB,EACff,iBAAiB,CAACG,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,CAOvD;AAED,OAAO,IAAME,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAA4G,EAC5GC,IAAU,EAC2B;EAAA,IAArCC,GAAoB,uEAAGC,SAAS;EAC7D,QAAQH,IAAI,CAACI,aAAa;IACxB,KAAK,MAAM;MAAE;QACX,oBAAO,KAAC,UAAU;UACC,OAAO,EAAE,WAAY;UACrB,wBAAwB,EAAE,IAAK;UAC/B,KAAK,EAAE,UAAW;UAClB,MAAM,EAAEJ,IAAI,CAACK,MAAO;UACpB,OAAO,EAAEL,IAAI,CAACM,OAAQ;UACtB,QAAQ,EAAEN,IAAI,CAACO,QAAS;UAAA,UACxCP,IAAI,CAACQ;QAAI,GAPYN,GAAG,CAQd;MACf;IACA,KAAK,QAAQ;MAAE;QACb,oBAAO,KAAC,YAAY;UACC,MAAM,EAAEF,IAAI,CAACS,MAAO;UACpB,QAAQ,EAAET,IAAI,CAACU,QAAS;UACxB,YAAY,EAAEV,IAAI,CAACW,YAAa;UAChC,WAAW,EAAEX,IAAI,CAACY,WAAY;UAC9B,QAAQ,EAAEZ,IAAI,CAACO;QAAS,GALnBL,GAAG,CAKkB;MACjD;IACA,KAAK,UAAU;MAAE;QACf,oBAAO,KAAC,cAAc;UACC,IAAI,EAAE,MAAO;UACb,KAAK,EAAEF,IAAI,CAACa,KAAM;UAClB,SAAS,EAAEb,IAAI,CAACc,SAAU;UAC1B,OAAO,EAAEd,IAAI,CAACe,OAAQ;UACtB,IAAI,EAAEf,IAAI,CAACQ,IAAK;UAChB,OAAO,EAAER,IAAI,CAACM,OAAQ;UACtB,MAAM,EAAEN,IAAI,CAACK,MAAO;UACpB,UAAU,EAAEL,IAAI,CAACgB,UAAW;UAC5B,WAAW,EAAEhB,IAAI,CAACiB,WAAY;UAC9B,aAAa,EAAEjB,IAAI,CAACkB,aAAc;UAClC,aAAa,EAAElB,IAAI,CAACmB,aAAc;UAClC,WAAW,EAAEnB,IAAI,CAACoB,WAAY;UAC9B,UAAU,EAAEpB,IAAI,CAACqB,UAAW;UAC5B,UAAU,EAAErB,IAAI,CAACsB,UAAW;UAC5B,SAAS,EAAEtB,IAAI,CAACuB,SAAU;UAC1B,QAAQ,EAAEvB,IAAI,CAACO;QAAS,GAhBnBL,GAAG,CAgBkB;MAEnD;IACA,KAAK,MAAM;MAAE;QACX,oBAAO,MAAC,eAAe;UAAW,SAAS,EAAED,IAAK;UAAA,WAE9CD,IAAI,CAACwB,QAAQ,iBACb,KAAC,YAAY;YAAA,uBACV/C,KAAK,CAACgD,YAAY,CAACzB,IAAI,CAACwB,QAAQ,EAAwB;cAACvB,IAAI,EAAEA,IAAI,KAAKd,IAAI,CAACuC,KAAK,GAAG,MAAM,GAAG;YAAI,CAAC;UAAC,EACxF,eAEjB,KAAC,YAAY;YAAA,UAAE1B,IAAI,CAAC2B;UAAQ,EAAgB;QAAA,GAPjBzB,GAAG,CAQd;MAEpB;IACA,KAAK,MAAM;MAAE;QACX,IAAO0B,QAAQ,GAAsC5B,IAAI,CAAlD4B,QAAQ;UAAExB,aAAa,GAAuBJ,IAAI,CAAxCI,aAAa;UAAEyB,QAAQ,GAAa7B,IAAI,CAAzB6B,QAAQ;UAAKC,IAAI,4BAAI9B,IAAI;QACzD,oBAAO,KAAC,oBAAoB;UAAC,SAAS,EAAEC,IAAK;UAAA,uBAC3C,MAAC,SAAS,kCAAK6B,IAAI;YAAA,wBACjB,KAAC,iBAAiB;cAAA,UAAEF;YAAQ,EAAqB,eACjD,KAAC,iBAAiB;cAAA,uBACfnD,KAAK,CAACgD,YAAY,CAACI,QAAQ,EAAwB;gBAAC5B,IAAI,EAAEA,IAAI,KAAKd,IAAI,CAACuC,KAAK,GAAG,MAAM,GAAG;cAAM,CAAC;YAAC,EAChF;UAAA;QACV,GANqCxB,GAAG,CAO/B;MACzB;IACA,KAAK,QAAQ;MAAE;QACb,IAAO6B,UAAU,GAA4B/B,IAAI,CAA1C+B,UAAU;UAAE3B,cAAa,GAAaJ,IAAI,CAA9BI,aAAa;UAAK0B,KAAI,4BAAI9B,IAAI;QACjD,oBAAO,KAAC,MAAM;UACC,IAAI,EAAEC;QAAK,GACP6B,KAAI;UAAA,UACpBC;QAAU,IAHO7B,GAAG,CAId;MACX;EAAC;AAEL,CAAC"}
|