@laerdal/life-react-components 3.4.1 → 3.4.2
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.
|
@@ -28,7 +28,7 @@ var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObjec
|
|
|
28
28
|
var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n color: ", ";\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ", " !important;\n }\n\n input {\n color: ", " !important;\n\n ::placeholder {\n color: ", " !important;\n }\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
29
29
|
var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.critical_400);
|
|
30
30
|
var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
|
|
31
|
-
var DropdownInputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), _styles.COLORS.black, function (props) {
|
|
31
|
+
var DropdownInputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), _styles.COLORS.black, function (props) {
|
|
32
32
|
return props.ellipsis ? 'text-overflow: ellipsis;' : '';
|
|
33
33
|
}, _styles.COLORS.neutral_600);
|
|
34
34
|
exports.DropdownInputField = DropdownInputField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLit
|
|
|
17
17
|
var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n color: ", ";\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ", " !important;\n }\n\n input {\n color: ", " !important;\n\n ::placeholder {\n color: ", " !important;\n }\n }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
|
|
18
18
|
var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
|
|
19
19
|
var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
|
|
20
|
-
export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), COLORS.black, function (props) {
|
|
20
|
+
export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), COLORS.black, function (props) {
|
|
21
21
|
return props.ellipsis ? 'text-overflow: ellipsis;' : '';
|
|
22
22
|
}, COLORS.neutral_600);
|
|
23
23
|
export var DropdownInputFieldStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n\n padding: 12px 16px;\n height: 48px;\n min-width: ", ";\n width: 100%;\n\n background: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ", "\n\n &::placeholder {\n ", "\n }\n\n ", " {\n ", "\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n ", "\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.medium {\n ", "\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ", "\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ", ";\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n input {\n ::placeholder {\n color: ", ";\n }\n }\n\n .dropdown-arrow {\n color: ", ";\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n input {\n ::placeholder {\n color: ", ";\n }\n }\n\n .dropdown-arrow {\n color: ", ";\n }\n }\n\n &.button {\n ", "\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ", ";\n background: ", ";\n }\n }\n\n\n ", "\n ", "\n ", "\n ", "\n\n ", ";\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ", " !important;\n ", "\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
|