@laerdal/life-react-components 1.4.1-dev.4.full → 1.4.1-dev.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/esm/Accordion/ContentAccordion.js.map +1 -1
  2. package/dist/esm/InputFields/Label.js +2 -0
  3. package/dist/esm/InputFields/Label.js.map +1 -1
  4. package/dist/js/Accordion/ContentAccordion.d.ts +1 -1
  5. package/dist/js/Accordion/ContentAccordion.js.map +1 -1
  6. package/dist/js/InputFields/Label.js +1 -1
  7. package/dist/js/InputFields/Label.js.map +1 -1
  8. package/dist/umd/Accordion/ContentAccordion.js.map +1 -1
  9. package/dist/umd/InputFields/Label.js +2 -0
  10. package/dist/umd/InputFields/Label.js.map +1 -1
  11. package/package.json +1 -1
package/dist/esm/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","opened","setOpened","useState","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
1
+ {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","opened","setOpened","useState","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
package/dist/esm/InputFields/Label.js CHANGED
@@ -30,6 +30,8 @@ const Label = styled.label`
30
30
  &.medium {
31
31
  ${ComponentXSStyling(1, COLORS.neutral_500)}
32
32
  }
33
+
34
+ pointer-events: none;
33
35
  `;
34
36
  const LabelRow = styled.div`
35
37
  display: flex;
package/dist/esm/InputFields/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","RequiredStar","styled","ComponentXSStyling","ComponentXXSStyling","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","required","setRequired","useState","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,WAA7B;;AAGA;AACA;AACA;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD,C,CAEA;;AACA,MAAMC,KAAK,GAAGH,MAAM,CAACI,KAAM;AAC3B,IAAIF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AAC/C;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB,MAAML,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,MAAMH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AACjD;AACA;AACA,MAAMJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA,CAbA;AAeA,MAAME,QAAQ,GAAGP,MAAM,CAACQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAJA,C,CAMA;;AAQA,MAAMC,UAA+C,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,IAAX;AAAiBC,EAAAA,IAAjB;AAAuBJ,EAAAA;AAAvB,CAAD,KAAiD;AACvG;AACA,QAAM,CAACK,QAAD,EAAWC,WAAX,IAA0BpB,KAAK,CAACqB,QAAN,CAAwB,KAAxB,CAAhC;AAEA;AACF;AACA;;AACErB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAIC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,MAA+D,EAAnE,EAAuE;AACrEL,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,CAACG,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,QAAMC,cAAc,GAAIC,EAAD,IAAsB;AAC3CJ,IAAAA,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,GAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEd;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE,MAAMU,cAAc,CAACV,OAAD,CAAtD;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGE,QAAQ,iBAAI,oBAAC,YAAD,YAJf,CADF;AAQD,CA9BD;;;AANEH,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;AAmCF,eAAeC,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
1
+ {"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","RequiredStar","styled","ComponentXSStyling","ComponentXXSStyling","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","required","setRequired","useState","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,WAA7B;;AAGA;AACA;AACA;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD,C,CAEA;;AACA,MAAMC,KAAK,GAAGH,MAAM,CAACI,KAAM;AAC3B,IAAIF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AAC/C;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB,MAAML,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,MAAMH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AACjD;AACA;AACA,MAAMJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,CAfA;AAiBA,MAAME,QAAQ,GAAGP,MAAM,CAACQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAJA,C,CAMA;;AAQA,MAAMC,UAA+C,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,IAAX;AAAiBC,EAAAA,IAAjB;AAAuBJ,EAAAA;AAAvB,CAAD,KAAiD;AACvG;AACA,QAAM,CAACK,QAAD,EAAWC,WAAX,IAA0BpB,KAAK,CAACqB,QAAN,CAAwB,KAAxB,CAAhC;AAEA;AACF;AACA;;AACErB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAIC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,MAA+D,EAAnE,EAAuE;AACrEL,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,CAACG,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,QAAMC,cAAc,GAAIC,EAAD,IAAsB;AAC3CJ,IAAAA,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,GAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEd;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE,MAAMU,cAAc,CAACV,OAAD,CAAtD;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGE,QAAQ,iBAAI,oBAAC,YAAD,YAJf,CADF;AAQD,CA9BD;;;AANEH,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;AAmCF,eAAeC,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
package/dist/js/Accordion/ContentAccordion.d.ts CHANGED
@@ -21,7 +21,7 @@ export interface ContentAccordionItem {
21
21
  export interface ContentAccordionProps {
22
22
  items: ContentAccordionItem[];
23
23
  multi?: boolean;
24
- size?: Size;
24
+ size?: Size.Small | Size.Medium | Size.Large;
25
25
  }
26
26
  export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
27
27
  export default ContentAccordion;
package/dist/js/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
1
+ {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
package/dist/js/InputFields/Label.js CHANGED
@@ -42,7 +42,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
42
42
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
43
43
 
44
44
  // Add component-specific styles.
45
- var Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", " {\n ", "\n }\n\n &.small {\n ", "\n }\n &.medium {\n ", "\n }\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
45
+ var Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", " {\n ", "\n }\n\n &.small {\n ", "\n }\n &.medium {\n ", "\n }\n\n pointer-events: none;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
46
46
 
47
47
  var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n ", "\n"])), function (props) {
48
48
  return props.margin ? "margin: ".concat(props.margin, ";") : '';
package/dist/js/InputFields/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,sKACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAeA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCK,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,iFAAkCU,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,CAAD,2DAAC,uBAAkCU,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEf;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMW,cAAc,CAACX,OAAD,CAApB;AAAA,KAAlC;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGI,QAAQ,iBAAI,oBAAC,qBAAD,YAJf,CADF;AAQD,CA9BD;;;AANEL,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;eAmCaC,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
1
+ {"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,iMACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCK,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,iFAAkCU,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,CAAD,2DAAC,uBAAkCU,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEf;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMW,cAAc,CAACX,OAAD,CAApB;AAAA,KAAlC;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGI,QAAQ,iBAAI,oBAAC,qBAAD,YAJf,CADF;AAQD,CA9BD;;;AANEL,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;eAmCaC,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
package/dist/umd/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","key","title","header","body","footer","disabled","items","multi","ContentAccordion","props","React","setOpened","item","onItemClick","opened","renderItem","isActive","e","event","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,QAAMA,0BAA0B,WAA1BA,0BAA0B,GAAGC,2BAAOC,GAAI;AACrD;AACA;AACA;AACA;AACA,WAAWC,eAAOC,WAAY;AAC9B;AACA;AACA;AACA,aAAaD,eAAOE,WAAY;AAChC,wBAAwBF,eAAOG,UAAW;AAC1C,eAAeC,oBAAUC,KAAM;AAC/B;AACA;AACA;AACA;AACA,wBAAwBL,eAAOM,KAAM;AACrC,eAAeF,oBAAUG,KAAM;AAC/B;AACA;AACA;AACA;AACA,aAAaP,eAAOQ,WAAY;AAChC,wBAAwBR,eAAOS,WAAY;AAC3C;AACA,eAAeL,oBAAUM,MAAO;AAChC;AA1BO,CAAA;AA6BA,QAAMC,8BAA8B,WAA9BA,8BAA8B,GAAGb,2BAAOC,GAAI;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AAPO,CAAA;AAUA,QAAMa,8BAA8B,WAA9BA,8BAA8B,GAAGd,2BAAOC,GAAI;AAAlD,CAAA;AAGA,QAAMc,2BAA2B,WAA3BA,2BAA2B,GAAGf,2BAAOC,GAAI;AACtD;AACA;AAFO,CAAA;AAKA,QAAMe,iCAAiC,WAAjCA,iCAAiC,GAAGhB,2BAAOC,GAAI;AAArD,CAAA;AAGA,QAAMgB,+BAA+B,WAA/BA,+BAA+B,GAAGjB,2BAAOC,GAAI;AAAnD,CAAA;AAGA,QAAMiB,iCAAiC,WAAjCA,iCAAiC,GAAGlB,2BAAOC,GAAI;AAArD,CAAA;AAGA,QAAMkB,oBAAoB,WAApBA,oBAAoB,GAAGnB,2BAAOC,GAAI;AAC/C;AACA;AACA,0BAA0BC,eAAOkB,WAAY;AAC7C;AACA;AACA,MAAML,2BAA4B;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMhB,0BAA2B;AACjC,eAAeG,eAAOmB,WAAY;AAClC;AACA;AACA;AACA;AAjBO,CAAA;AAoBA,QAAMC,uBAAuB,WAAvBA,uBAAuB,GAAGtB,2BAAOC,GAAI;AAClD;AACA;AACA;AACA,IAAIkB,oBAAqB;AACzB,+BAA+BjB,eAAOkB,WAAY;AAClD;AACA;AACA;AACA;AACA;AACA;AACA,MAAMrB,0BAA2B;AACjC;AACA;AACA,QAAQwB,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA,MAAMR,2BAA4B;AAClC;AACA;AACA;AACA,QAAQC,iCAAkC;AAC1C,UAAUO,mCAAkBC,+BAAD,IAAjBD,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA,QAAQN,+BAAgC;AACxC,UAAUM,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMxB,0BAA2B;AACjC;AACA;AACA,QAAQ0B,mCAAkBD,+BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA,MAAMV,2BAA4B;AAClC;AACA;AACA;AACA,QAAQC,iCAAkC;AAC1C,UAAUS,mCAAkBD,+BAAD,IAAjBC,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA,QAAQR,+BAAgC;AACxC,UAAUQ,mCAAkBD,+BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM1B,0BAA2B;AACjC;AACA;AACA,QAAQ2B,mCAAkBF,+BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA,MAAMX,2BAA4B;AAClC;AACA;AACA;AACA,QAAQC,iCAAkC;AAC1C,UAAUU,mCAAkBF,+BAAD,IAAjBE,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA,QAAQT,+BAAgC;AACxC,UAAUS,mCAAkBF,+BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AA/EO,CAAA;;AAkGA,QAAMS,gBAAgE,WAAhEA,gBAAgE,GAAIC,KAAD,IAAW;AAEzF,UAAM,CAAA,MAAA,EAAA,SAAA,IAAsBC,gBAAAA,QAAAA,CAA5B,EAA4BA,CAA5B;;AAEAA,oBAAAA,SAAAA,CAAgB,MAAM;AACpB,UAAID,KAAK,CAAT,KAAA,EAAiB;AACfE,QAAAA,SAAS,CAACF,KAAK,CAALA,KAAAA,CAAAA,MAAAA,CAAmBG,IAAI,IAAIA,IAAI,CAA/BH,MAAAA,EAAAA,GAAAA,CAA4CG,IAAI,IAAIA,IAAI,CAAlED,GAAUF,CAAD,CAATE;AADF,OAAA,MAEO;AACL,YAAI1B,MAAM,GAAGwB,KAAK,CAALA,KAAAA,CAAAA,IAAAA,CAAiBG,IAAI,IAAI,CAAC,CAACA,IAAI,CAA/BH,MAAAA,GAAb,GAAA;;AACA,YAAA,MAAA,EAAY;AACVE,UAAAA,SAAS,CAAC,CAAVA,MAAU,CAAD,CAATA;AACD;AACF;AARHD,KAAAA,EASG,CAACD,KAAK,CAAN,KAAA,EAAcA,KAAK,CATtBC,KASG,CATHA;;AAWA,UAAMG,WAAW,GAAID,IAAD,IAAgC;AAClD,UAAIA,IAAI,CAAR,QAAA,EAAmB;;AACnB,UAAIE,MAAM,CAANA,QAAAA,CAAgBF,IAAI,CAAxB,GAAIE,CAAJ,EAA+B;AAC7BH,QAAAA,SAAS,CAACG,MAAM,CAANA,MAAAA,CAAcd,GAAG,IAAIA,GAAG,KAAKY,IAAI,CAA3CD,GAAUG,CAAD,CAATH;AADF,OAAA,MAEO;AACL,YAAIF,KAAK,CAAT,KAAA,EAAiB;AACfE,UAAAA,SAAS,CAAC,CAAC,GAAD,MAAA,EAAYC,IAAI,CAA1BD,GAAU,CAAD,CAATA;AADF,SAAA,MAEO;AACLA,UAAAA,SAAS,CAAC,CAACC,IAAI,CAAfD,GAAU,CAAD,CAATA;AACD;AACF;AAVH,KAAA;;AAaA,UAAMI,UAAU,GAAIH,IAAD,IAAgC;AACjD,YAAMI,QAAQ,GAAGF,MAAM,CAANA,QAAAA,CAAgBF,IAAI,CAArC,GAAiBE,CAAjB;AAEA,aAAA,aACE,gBAAA,aAAA,CAAA,oBAAA,EAAA;AAAsB,QAAA,GAAG,EAAEF,IAAI,CAA/B,GAAA;AACsB,QAAA,EAAE,EAAG,QAAOA,IAAI,CAACZ,GADvC,EAAA;AAEsB,QAAA,SAAS,EAAE,GAAA,MAAA,CAAUgB,QAAQ,GAAA,SAAA,GAAlB,EAAA,EAAA,MAAA,CAA4CJ,IAAI,CAAJA,QAAAA,GAAAA,WAAAA,GAA5C,EAAA;AAFjC,OAAA,EAAA,aAGE,gBAAA,aAAA,CAAA,0BAAA,EAAA;AAA4B,QAAA,QAAQ,EAAE,CAACA,IAAI,CAAL,QAAA,GAAA,CAAA,GAAtC,SAAA;AAC4B,QAAA,WAAW,EAAEK,CAAC,IAAIA,CAAC,CAD/C,cAC8CA,EAD9C;AAE4B,QAAA,OAAO,EAAE,MAAM,CAACL,IAAI,CAAL,QAAA,IAAkBC,WAAW,CAFxE,IAEwE,CAFxE;AAG4B,QAAA,UAAU,EAAEK,KAAK,IAAIA,KAAK,CAALA,GAAAA,KAAAA,OAAAA,IAAyBL,WAAW,CAAA,IAAA;AAHrF,OAAA,EAAA,aAIE,gBAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EAEIJ,KAAK,CAALA,KAAAA,GACIO,QAAQ,GAAA,aACN,gBAAA,aAAA,CAAA,mBAAA,KAAA,EADM,IACN,CADM,GAAA,aAEN,gBAAA,aAAA,CAAA,mBAAA,IAAA,EAHNP,IAGM,CAHNA,GAIIO,QAAQ,GAAA,aACN,gBAAA,aAAA,CAAA,mBAAA,WAAA,EADM,IACN,CADM,GAAA,aAEN,gBAAA,aAAA,CAAA,mBAAA,YAAA,EAZZ,IAYY,CARV,CAJF,EAAA,aAeE,gBAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EACGJ,IAAI,CAnBX,KAkBI,CAfF,CAHF,EAAA,aAsBE,gBAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,EAEIA,IAAI,CAAJA,MAAAA,IAAAA,aACA,gBAAA,aAAA,CAAA,iCAAA,EAAA,IAAA,EACGA,IAAI,CAJX,MAGI,CAHJ,EAAA,aAOE,gBAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EACGA,IAAI,CART,IAOE,CAPF,EAWIA,IAAI,CAAJA,MAAAA,IAAAA,aACA,gBAAA,aAAA,CAAA,iCAAA,EAAA,IAAA,EACGA,IAAI,CApCf,MAmCQ,CAZJ,CAtBF,CADF;AAHF,KAAA;;AA+CA,WAAA,aACE,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAyB,MAAA,SAAS,EAAE,GAAA,MAAA,CAAW,IAAGH,KAAK,CAALA,IAAAA,IAAcU,YAAKC,MAAjC,EAAA;AAApC,KAAA,EACGX,KAAK,CAALA,KAAAA,CAAAA,GAAAA,CAAgBG,IAAI,IAAIG,UAAU,CAFvC,IAEuC,CAAlCN,CADH,CADF;AA3EK,GAAA;;;AALLH,IAAAA,K;AAVAN,MAAAA,G;AACAC,MAAAA,K;AACAC,MAAAA,M;AACAC,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,Q;AACApB,MAAAA,M;;AAKAsB,IAAAA,K;;oBAsFF,gB","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
1
+ {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","key","title","header","body","footer","disabled","items","multi","ContentAccordion","props","React","setOpened","item","onItemClick","opened","renderItem","isActive","e","event","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
package/dist/umd/InputFields/Label.js CHANGED
@@ -104,6 +104,8 @@
104
104
  &.medium {
105
105
  ${(0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500)}
106
106
  }
107
+
108
+ pointer-events: none;
107
109
  `;
108
110
  const LabelRow = _styledComponents2.default.div`
109
111
  display: flex;
package/dist/umd/InputFields/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","InputLabel","React","document","setRequired","onTriggerClick","id","size","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AAZA,CAAA;AAeA,QAAMC,QAAQ,GAAGP,2BAAOQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHhE,CAAA,C,CAMA;;AAQA,QAAMI,UAA+C,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAuBH,IAAAA;AAAvB,GAAD,KAAiD;AACvG;AACA,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BI,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CAAAA,UAAAA,MAAJ,EAAA,EAAuE;AACrEC,QAAAA,WAAW,CAAXA,IAAW,CAAXA;AADF,OAAA,MAEO;AACLA,QAAAA,WAAW,CAAXA,KAAW,CAAXA;AACD;AALHF,KAAAA,EAMG,CAACC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CANJD,UAMIC,CAAD,CANHD;AAOA;AACF;AACA;AACA;;AACE,UAAMG,cAAc,GAAIC,EAAD,IAAsB;AAC3CH,MAAAA,QAAQ,CAARA,cAAAA,CAAAA,EAAAA,GAAAA,KAAAA;AADF,KAAA;;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,MAAA,MAAM,EAAEL;AAAlB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,OAAO,EAAd,OAAA;AAAyB,MAAA,OAAO,EAAE,MAAMO,cAAc,CAAtD,OAAsD,CAAtD;AAAiE,MAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KAAA,EADF,IACE,CADF,EAIGC,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EALjB,GAKiB,CAJf,CADF;AAtBF,GAAA;;;AANET,IAAAA,O;AACAC,IAAAA,I;AAEAF,IAAAA,M;;oBAmCF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
1
+ {"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","InputLabel","React","document","setRequired","onTriggerClick","id","size","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AAdA,CAAA;AAiBA,QAAMC,QAAQ,GAAGP,2BAAOQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHhE,CAAA,C,CAMA;;AAQA,QAAMI,UAA+C,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAuBH,IAAAA;AAAvB,GAAD,KAAiD;AACvG;AACA,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BI,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CAAAA,UAAAA,MAAJ,EAAA,EAAuE;AACrEC,QAAAA,WAAW,CAAXA,IAAW,CAAXA;AADF,OAAA,MAEO;AACLA,QAAAA,WAAW,CAAXA,KAAW,CAAXA;AACD;AALHF,KAAAA,EAMG,CAACC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CANJD,UAMIC,CAAD,CANHD;AAOA;AACF;AACA;AACA;;AACE,UAAMG,cAAc,GAAIC,EAAD,IAAsB;AAC3CH,MAAAA,QAAQ,CAARA,cAAAA,CAAAA,EAAAA,GAAAA,KAAAA;AADF,KAAA;;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,MAAA,MAAM,EAAEL;AAAlB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,OAAO,EAAd,OAAA;AAAyB,MAAA,OAAO,EAAE,MAAMO,cAAc,CAAtD,OAAsD,CAAtD;AAAiE,MAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KAAA,EADF,IACE,CADF,EAIGC,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EALjB,GAKiB,CAJf,CADF;AAtBF,GAAA;;;AANET,IAAAA,O;AACAC,IAAAA,I;AAEAF,IAAAA,M;;oBAmCF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.4.1-dev.4.full",
3
+ "version": "1.4.1-dev.7",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [