@laerdal/life-react-components 1.7.0-dev.13.full → 1.7.0-dev.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Chips/ChipStyles.cjs +2 -2
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.js +2 -2
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChipTypes.d.ts +1 -1
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs +4 -0
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map +1 -1
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.js +3 -0
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/package.json +1 -1
|
@@ -19,11 +19,11 @@ var ChipContentContainer = _styledComponents.default.div(_templateObject || (_te
|
|
|
19
19
|
|
|
20
20
|
exports.ChipContentContainer = ChipContentContainer;
|
|
21
21
|
|
|
22
|
-
var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
22
|
+
var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
23
23
|
|
|
24
24
|
exports.ChipContent = ChipContent;
|
|
25
25
|
|
|
26
|
-
var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border\n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
|
|
26
|
+
var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.warning_100, _styles.COLORS.warning_600, ChipContent, _styles.COLORS.warning_200, _styles.COLORS.warning_700, ChipContent, _styles.COLORS.warning_300, _styles.COLORS.warning_800, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.warning_200, _styles.COLORS.warning_700, _styles.COLORS.warning_300, _styles.COLORS.warning_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
|
|
27
27
|
|
|
28
28
|
exports.ChipContainer = ChipContainer;
|
|
29
29
|
//# sourceMappingURL=ChipStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","warning_100","warning_600","warning_200","warning_700","warning_300","warning_800","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AASO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,2wBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AAgDA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,2wHAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAiCpBF,WAjCoB,EAqClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CArCkB,EA4DpBE,mBA5DoB,EAgEbC,eAAOC,KAhEM,EAkEpBN,WAlEoB,EAmEAK,eAAOE,WAnEP,EAwEpBP,WAxEoB,EAyEAK,eAAOG,WAzEP,EA8EpBR,WA9EoB,EA+EAK,eAAOI,WA/EP,EAqFbJ,eAAOK,WArFM,EAuFpBV,WAvFoB,EAwFAK,eAAOC,KAxFP,EAyFAD,eAAOM,WAzFP,EA8FpBX,WA9FoB,EA+FAK,eAAOO,UA/FP,EAgGAP,eAAOQ,WAhGP,EAiGXR,eAAOG,WAjGI,EAsGpBR,WAtGoB,EAuGAK,eAAOS,WAvGP,EAwGAT,eAAOU,WAxGP,EAyGXV,eAAOI,WAzGI,EAgHpBT,WAhHoB,EAsHpBA,WAtHoB,EA4HpBA,WA5HoB,EAkIpBA,WAlIoB,EAmIAK,eAAOW,WAnIP,EAoIXX,eAAOY,WApII,EAyIpBjB,WAzIoB,EA0INK,eAAOa,WA1ID,EA2IXb,eAAOc,WA3II,EAgJpBnB,WAhJoB,EAiJNK,eAAOe,WAjJD,EAkJXf,eAAOgB,WAlJI,EAuJpBrB,WAvJoB,EAwJAK,eAAOiB,YAxJP,EAyJXjB,eAAOkB,YAzJI,EA8JpBvB,WA9JoB,EA+JNK,eAAOmB,YA/JD,EAgKXnB,eAAOoB,YAhKI,EAqKpBzB,WArKoB,EAsKNK,eAAOqB,YAtKD,EAuKXrB,eAAOsB,YAvKI,EA6KpBvB,mBA7KoB,EAiLFC,eAAOG,WAjLL,EAqLFH,eAAOI,WArLL,EA0LbJ,eAAOU,WA1LM,EAgMAV,eAAOa,WAhMP,EAiMXb,eAAOc,WAjMI,EAqMAd,eAAOe,WArMP,EAsMXf,eAAOgB,WAtMI,EA2MXhB,eAAOU,WA3MI,EAiNAV,eAAOmB,YAjNP,EAkNXnB,eAAOoB,YAlNI,EAsNApB,eAAOqB,YAtNP,EAuNXrB,eAAOsB,YAvNI,EA4NXtB,eAAOU,WA5NI,EAmOpBlB,oBAnOoB,EAuOpBG,WAvOoB,EAyOAK,eAAOuB,WAzOP,EA0OXvB,eAAOwB,WA1OI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n focusStyles\n} from '../styles';\n\nexport const ChipContentContainer = styled.div`\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n`;\n\nexport const ChipContainer = styled.div`\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ${ChipContent} {\n gap: 6px;\n padding: 10px 16px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ${ChipContent} {\n gap: 8px;\n padding: 12px 20px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.normal {\n color: ${COLORS.white};\n\n ${ChipContent} {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_800};\n }\n }\n\n\n &.outline {\n color: ${COLORS.neutral_600};\n\n ${ChipContent} {\n background-color: ${COLORS.white};\n border: 2px solid ${COLORS.neutral_200};\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_20};\n border: 2px solid ${COLORS.primary_200};\n color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_100};\n border: 2px solid ${COLORS.primary_300};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ${ChipContent} {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ${ChipContent} {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ${ChipContent} {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ${ChipContent} {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n }\n\n &.error {\n ${ChipContent} {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n }\n\n\n .action-right:focus {\n ${focusStyles}\n }\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.primary_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.primary_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ChipContentContainer} {\n pointer-events: none;\n }\n\n ${ChipContent} {\n border: none !important;\n background-color: ${COLORS.neutral_100} !important;\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n"],"file":"ChipStyles.cjs"}
|
package/dist/Chips/ChipStyles.js
CHANGED
|
@@ -12,6 +12,6 @@ import styled from 'styled-components';
|
|
|
12
12
|
|
|
13
13
|
import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
|
|
14
14
|
export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n"])));
|
|
15
|
-
export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
|
|
16
|
-
export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border\n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
|
|
15
|
+
export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
|
|
16
|
+
export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.warning_100, COLORS.warning_600, ChipContent, COLORS.warning_200, COLORS.warning_700, ChipContent, COLORS.warning_300, COLORS.warning_800, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.warning_200, COLORS.warning_700, COLORS.warning_300, COLORS.warning_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
|
|
17
17
|
//# sourceMappingURL=ChipStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,
|
|
1
|
+
{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","warning_100","warning_600","warning_200","warning_700","warning_300","warning_800","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SACEC,MADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,kBALF,EAMEC,WANF,QAOO,WAPP;AASA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,6vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AAgDP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,6vHAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAiCpBD,WAjCoB,EAqClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CArCC,EA4DpBJ,WA5DoB,EAgEbL,MAAM,CAACW,KAhEM,EAkEpBH,WAlEoB,EAmEAR,MAAM,CAACY,WAnEP,EAwEpBJ,WAxEoB,EAyEAR,MAAM,CAACa,WAzEP,EA8EpBL,WA9EoB,EA+EAR,MAAM,CAACc,WA/EP,EAqFbd,MAAM,CAACe,WArFM,EAuFpBP,WAvFoB,EAwFAR,MAAM,CAACW,KAxFP,EAyFAX,MAAM,CAACgB,WAzFP,EA8FpBR,WA9FoB,EA+FAR,MAAM,CAACiB,UA/FP,EAgGAjB,MAAM,CAACkB,WAhGP,EAiGXlB,MAAM,CAACa,WAjGI,EAsGpBL,WAtGoB,EAuGAR,MAAM,CAACmB,WAvGP,EAwGAnB,MAAM,CAACoB,WAxGP,EAyGXpB,MAAM,CAACc,WAzGI,EAgHpBN,WAhHoB,EAsHpBA,WAtHoB,EA4HpBA,WA5HoB,EAkIpBA,WAlIoB,EAmIAR,MAAM,CAACqB,WAnIP,EAoIXrB,MAAM,CAACsB,WApII,EAyIpBd,WAzIoB,EA0INR,MAAM,CAACuB,WA1ID,EA2IXvB,MAAM,CAACwB,WA3II,EAgJpBhB,WAhJoB,EAiJNR,MAAM,CAACyB,WAjJD,EAkJXzB,MAAM,CAAC0B,WAlJI,EAuJpBlB,WAvJoB,EAwJAR,MAAM,CAAC2B,YAxJP,EAyJX3B,MAAM,CAAC4B,YAzJI,EA8JpBpB,WA9JoB,EA+JNR,MAAM,CAAC6B,YA/JD,EAgKX7B,MAAM,CAAC8B,YAhKI,EAqKpBtB,WArKoB,EAsKNR,MAAM,CAAC+B,YAtKD,EAuKX/B,MAAM,CAACgC,YAvKI,EA6KpB3B,WA7KoB,EAiLFL,MAAM,CAACa,WAjLL,EAqLFb,MAAM,CAACc,WArLL,EA0Lbd,MAAM,CAACoB,WA1LM,EAgMApB,MAAM,CAACuB,WAhMP,EAiMXvB,MAAM,CAACwB,WAjMI,EAqMAxB,MAAM,CAACyB,WArMP,EAsMXzB,MAAM,CAAC0B,WAtMI,EA2MX1B,MAAM,CAACoB,WA3MI,EAiNApB,MAAM,CAAC6B,YAjNP,EAkNX7B,MAAM,CAAC8B,YAlNI,EAsNA9B,MAAM,CAAC+B,YAtNP,EAuNX/B,MAAM,CAACgC,YAvNI,EA4NXhC,MAAM,CAACoB,WA5NI,EAmOpBd,oBAnOoB,EAuOpBE,WAvOoB,EAyOAR,MAAM,CAACiC,WAzOP,EA0OXjC,MAAM,CAACkC,WA1OI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n focusStyles\n} from '../styles';\n\nexport const ChipContentContainer = styled.div`\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n`;\n\nexport const ChipContainer = styled.div`\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ${ChipContent} {\n gap: 6px;\n padding: 10px 16px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ${ChipContent} {\n gap: 8px;\n padding: 12px 20px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.normal {\n color: ${COLORS.white};\n\n ${ChipContent} {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_800};\n }\n }\n\n\n &.outline {\n color: ${COLORS.neutral_600};\n\n ${ChipContent} {\n background-color: ${COLORS.white};\n border: 2px solid ${COLORS.neutral_200};\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_20};\n border: 2px solid ${COLORS.primary_200};\n color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_100};\n border: 2px solid ${COLORS.primary_300};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ${ChipContent} {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ${ChipContent} {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ${ChipContent} {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ${ChipContent} {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n }\n\n &.error {\n ${ChipContent} {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n }\n\n\n .action-right:focus {\n ${focusStyles}\n }\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.primary_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.primary_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ChipContentContainer} {\n pointer-events: none;\n }\n\n ${ChipContent} {\n border: none !important;\n background-color: ${COLORS.neutral_100} !important;\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n"],"file":"ChipStyles.js"}
|
|
@@ -35,4 +35,4 @@ export interface ChipValue {
|
|
|
35
35
|
size: Size;
|
|
36
36
|
}
|
|
37
37
|
export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
|
|
38
|
-
export declare type ChipVariant = 'normal' | 'error';
|
|
38
|
+
export declare type ChipVariant = 'normal' | 'warning' | 'error';
|
|
@@ -25,6 +25,8 @@ var _SystemIcons = require("../../icons/systemicons/SystemIcons");
|
|
|
25
25
|
|
|
26
26
|
var _typography = require("../../styles/typography");
|
|
27
27
|
|
|
28
|
+
var _common = require("../../common");
|
|
29
|
+
|
|
28
30
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
31
|
|
|
30
32
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
@@ -66,6 +68,7 @@ var MenuLink = function MenuLink(_ref) {
|
|
|
66
68
|
href: to,
|
|
67
69
|
role: "menuitem",
|
|
68
70
|
className: "UserMenuLink",
|
|
71
|
+
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
69
72
|
onClick: function onClick() {
|
|
70
73
|
if (_onClick) {
|
|
71
74
|
_onClick();
|
|
@@ -80,6 +83,7 @@ var MenuLink = function MenuLink(_ref) {
|
|
|
80
83
|
to: to,
|
|
81
84
|
role: "menuitem",
|
|
82
85
|
className: "UserMenuLink",
|
|
86
|
+
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
83
87
|
onClick: function onClick() {
|
|
84
88
|
if (_onClick) {
|
|
85
89
|
_onClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAES,iCALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIH,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB,EADS,gBAiBT,sBAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAES,iCALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIH,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB;AAlBJ,IADF;AAqCD,CA5CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eAiDaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.cjs"}
|
|
@@ -9,6 +9,7 @@ import { NavLink } from 'react-router-dom';
|
|
|
9
9
|
import { COLORS, ComponentTextStyle } from '../../styles';
|
|
10
10
|
import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
|
|
11
11
|
import { ComponentMStyling } from '../../styles/typography';
|
|
12
|
+
import { defaultOnMouseDownHandler } from '../../common';
|
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
15
|
var LinkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ", "\n svg {\n margin-right: 15px;\n color: ", ";\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600);
|
|
@@ -42,6 +43,7 @@ var MenuLink = function MenuLink(_ref) {
|
|
|
42
43
|
href: to,
|
|
43
44
|
role: "menuitem",
|
|
44
45
|
className: "UserMenuLink",
|
|
46
|
+
onMouseDown: defaultOnMouseDownHandler,
|
|
45
47
|
onClick: function onClick() {
|
|
46
48
|
if (_onClick) {
|
|
47
49
|
_onClick();
|
|
@@ -56,6 +58,7 @@ var MenuLink = function MenuLink(_ref) {
|
|
|
56
58
|
to: to,
|
|
57
59
|
role: "menuitem",
|
|
58
60
|
className: "UserMenuLink",
|
|
61
|
+
onMouseDown: defaultOnMouseDownHandler,
|
|
59
62
|
onClick: function onClick() {
|
|
60
63
|
if (_onClick) {
|
|
61
64
|
_onClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;;;AAEA,IAAMC,UAAU,
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","defaultOnMouseDownHandler","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AACA,SAAQC,yBAAR,QAAwC,cAAxC;;;AAEA,IAAMC,UAAU,GAAGR,GAAH,0SAUZM,iBAAiB,CAACH,kBAAkB,CAACM,OAApB,EAA6BP,MAAM,CAACQ,WAApC,CAVL,EAaHR,MAAM,CAACQ,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAGZ,MAAM,CAACE,OAAD,CAAT,mFACdO,UADc,CAAlB;AAIA,IAAMI,YAAY,GAAGb,MAAM,CAACc,CAAV,mFACdL,UADc,CAAlB;AAIA,IAAMM,cAAc,GAAGf,MAAM,CAACgB,GAAV,4JAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,MAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,KAAC,MAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEnB,MAAM,CAACuB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,KAAC,YAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEpB,MAAM,CAACQ;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGQ,UAAU,gBACT,MAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAEV,yBALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIgB,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB,EADS,gBAiBT,MAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAEV,yBALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIgB,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB;AAlBJ,IADF;AAqCD,CA5CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AAiDF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
|