@pega/cosmos-react-cs 4.0.0-dev.19.1 → 4.0.0-dev.19.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.
@@ -36,7 +36,7 @@ export const StyledCallContainer = styled.div(({ theme: { base: { spacing }, com
36
36
  StyledCallContainer.defaultProps = defaultThemeProp;
37
37
  export const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {
38
38
  return css `
39
- background-color: ${theme.base.colors.gray['extra-light']};
39
+ background-color: ${theme.base.palette['secondary-background']};
40
40
  border-radius: calc(0.5 * ${theme.base['border-radius']});
41
41
 
42
42
  > ${StyledSummaryItem} {
@@ -1 +1 @@
1
- {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n StyledPrimary,\n StyledSecondary,\n Card\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledCallContainer = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding-inline: calc(2 * ${spacing});\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\nStyledCallContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {\n return css`\n background-color: ${theme.base.colors.gray['extra-light']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n > ${StyledSummaryItem} {\n height: 3rem;\n }\n `;\n});\n\nStyledIncomingContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. */\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCalleePicker = styled(Card)`\n ${StyledTabPanel} {\n height: 24rem;\n }\n`;\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n StyledPrimary,\n StyledSecondary,\n Card\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledCallContainer = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding-inline: calc(2 * ${spacing});\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\nStyledCallContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['secondary-background']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n > ${StyledSummaryItem} {\n height: 3rem;\n }\n `;\n});\n\nStyledIncomingContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. */\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCalleePicker = styled(Card)`\n ${StyledTabPanel} {\n height: 24rem;\n }\n`;\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-cs",
3
- "version": "4.0.0-dev.19.1",
3
+ "version": "4.0.0-dev.19.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,8 +20,8 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "4.0.0-dev.19.1",
24
- "@pega/cosmos-react-dnd": "4.0.0-dev.19.1",
23
+ "@pega/cosmos-react-core": "4.0.0-dev.19.2",
24
+ "@pega/cosmos-react-dnd": "4.0.0-dev.19.2",
25
25
  "@types/react": "^16.14.24 || ^17.0.38",
26
26
  "@types/react-dom": "^16.9.14 || ^17.0.11",
27
27
  "@types/styled-components": "^5.1.26",