npm - @pega/cosmos-react-cs - Versions diffs - 2.1.4 → 3.0.0-dev.10.0 - Mend

@pega/cosmos-react-cs 2.1.4 → 3.0.0-dev.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/lib/components/CallControlPanel/CallControlPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardHeader,\n CardContent,\n Button,\n useI18n,\n Icon,\n registerIcon,\n Flex,\n ComboBox,\n Text,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef,\n useDraggable\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\n\nregisterIcon(plusIcon, caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n if (containerRef && containerRef.current)\n containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const dragRef = useRef<HTMLDivElement>(null);\n useDraggable(containerRef, dragRef);\n\n const actionItems = useMemo(() => {\n return statusOptions.map(({ id, label }) => {\n return { id, primary: label, selected: id === status };\n });\n }, [status, statusOptions]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight \|\| 0;\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <StyledCallControlPanel\n ref={containerRef}\n {...restProps}\n isCollapsed={collapsed}\n isDraggable={draggable}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={!collapsed && draggable ? dragRef : undefined}\n actions={\n <>\n <Button\n icon\n variant='simple'\n key='new-call'\n aria-label={t('call_panel_make_new_call')}\n ref={addButtonRef}\n onClick={() => {\n setShowPopover(true);\n }}\n >\n <Icon name='plus' />\n </Button>\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n aria-label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n onClick={() => {\n resetPopoverToDefaultPosition(containerRef);\n setCollapsed(state => !state);\n }}\n >\n <Icon name='caret-down' />\n </Button>\n </>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Icon name='phone-solid' />\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label \|\| ''\n }\n }}\n menu={{\n items: actionItems,\n onItemClick: id => onStatusChange(id)\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={addButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </StyledCallControlPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
1	+ {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n\n const actionItems = useMemo(() => {\n return statusOptions.map(({ id, label }) => {\n return { id, primary: label, selected: id === status };\n });\n }, [status, statusOptions]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowPopover(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n const cardContent = (\n <>\n <CardContent container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label \|\| ''\n }\n }}\n menu={{\n items: actionItems,\n onItemClick: id => onStatusChange(id)\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={newCallButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </>\n );\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <FloatingPanel\n ref={containerRef}\n {...restProps}\n heading={heading}\n draggable={draggable}\n content={cardContent}\n actions={[newCallButton]}\n />\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}

package/lib/components/CallControlPanel/CallControlPanel.styles.d.ts CHANGED Viewed

@@ -8,8 +8,4 @@ export declare const StyledSLAProgress: import("styled-components").StyledCompon
     slaDuration?: number | undefined;
     slaLevel?: number | undefined;
 }, never>;
-export declare const StyledCallControlPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
-    isCollapsed: boolean;
-    isDraggable?: boolean | undefined;
-}, never>;
 //# sourceMappingURL=CallControlPanel.styles.d.ts.map

package/lib/components/CallControlPanel/CallControlPanel.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,~~EAKd~~,MAAM,yBAAyB,CAAC;~~AAMjC~~,eAAO,MAAM,uBAAuB,yGAoCnC,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC~~;AAIH,eAAO,MAAM,sBAAsB;iBACpB,OAAO;;SA6BpB,CAAC~~"}
1	+ {"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,EAId,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,uBAAuB,yGAoCnC,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.styles.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledCard, StyledPrimary, StyledSecondary } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledPrimary, StyledSecondary } from '@pega/cosmos-react-core';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledStopWatch } from './StopWatch';
 export const StyledProgressContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
     return css `
@@ -86,33 +85,4 @@ export const StyledSLAProgress = styled(StyledProgressBar)(({ theme, slaDuration
   `;
 });
 StyledSLAProgress.defaultProps = defaultThemeProp;
-export const StyledCallControlPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable }) => {
-    return css `
-    position: fixed;
-    z-index: ${theme.base['z-index'].modal};
-    width: 25rem;
-    inset-inline-end: calc(2 * ${theme.base.spacing});
-    bottom: calc(2 * ${theme.base.spacing});
-    box-shadow: ${theme.base.shadow.high};
-    ${isCollapsed &&
-        css `
-      transform: translateY(
-        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))
-      ) !important;
-    `}
-    ${StyledCardHeader} {
-      ${!isCollapsed &&
-        isDraggable &&
-        css `
-        cursor: all-scroll;
-      `}
-    }
-    ${StyledCardHeader} ${StyledButton}:last-child {
-      transition: transform calc(2 * ${theme.base.animation.speed})
-        ${theme.base.animation.timing.ease};
-      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
-    }
-  `;
-});
-StyledCallControlPanel.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CallControlPanel.styles.js.map

package/lib/components/CallControlPanel/CallControlPanel.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EAEZ,iBAAiB,EACjB,~~UAAU,EACV,~~aAAa,EACb,eAAe,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;~~AACpF~~,OAAO,EAAE,~~gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAE1F,OAAO,EAAE,~~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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 ~~StyledCard,\n~~ StyledPrimary,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\~~nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\~~n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledProgressContainer = 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: 0 1rem;\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\nStyledProgressContainer.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 StyledCallControlPanel = styled(StyledCard)<{\n isCollapsed: boolean;\n isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n width: 25rem;\n inset-inline-end: calc(2 ${theme.base.spacing});\n bottom: calc(2 * ${theme.base.spacing});\n box-shadow: ${theme.base.shadow.high};\n ${isCollapsed &&\n css`\n transform: translateY(\n calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n ) !important;\n `}\n ${StyledCardHeader} {\n ${!isCollapsed &&\n isDraggable &&\n css`\n cursor: all-scroll;\n `}\n }\n ${StyledCardHeader} ${StyledButton}:last-child {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n `;\n});\n\nStyledCallControlPanel.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EAEZ,iBAAiB,EACjB,aAAa,EACb,eAAe,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEpF,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;UAEJ,cAAc;;;;QAIhB,wBAAwB,IAAI,UAAU,MAAM,YAAY;+BACjC,OAAO;;;UAG5B,iBAAiB;;;;;;YAMf,YAAY;;;YAGZ,aAAa,OAAO,eAAe;;;;;UAKrC,iBAAiB,MAAM,iBAAiB;qCACb,IAAI,CAAC,UAAU;;KAE/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;sBAEQ,MAAM;;UAElB,eAAe;uBACF,MAAM;;KAExB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAExD,CAAC,EAAE,KAAK,EAAE,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzC,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,GACvE,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC;YACE,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;YACrE,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YACvE,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;SAClE,CAAC,QAAQ,CAAC;QACb,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IAEnE,OAAO,GAAG,CAAA;;;;wBAIY,OAAO;gCACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;wBAGnC,QAAQ;;;;;;;;;;;0BAWN,OAAO;;0BAEP,QAAQ,IAAI,WAAW;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledProgressContainer = 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: 0 1rem;\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\nStyledProgressContainer.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"]}

package/lib/components/CallControlPanel/CallControlPanelIcon.js CHANGED Viewed

@@ -64,11 +64,11 @@ export const UserStatusIcon = memo(({ status = 'offline', variant }) => {
     const [colorName, colorVariant] = colorMapping[status].split('-', 2);
     const bgColor = colors[colorName][colorVariant];
     const iconName = iconMapping[status];
-    return variant === 'dot' ? (_jsx("svg", { role: 'img', "aria-hidden": true, height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }, void 0) }, void 0)) : (_jsx(StyledStatusIcon, { as: StyledUserStatusIcon, userStatus: status, children: iconName && _jsx(Icon, { name: iconName }, void 0) }, void 0));
+    return variant === 'dot' ? (_jsx("svg", { role: 'img', "aria-hidden": true, height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }) })) : (_jsx(StyledStatusIcon, { as: StyledUserStatusIcon, userStatus: status, children: iconName && _jsx(Icon, { name: iconName }) }));
 });
 const CallControlPanelIcon = memo(({ status = 'offline', label, panelVisible, ...restProps }) => {
     const iconName = iconMapping[status];
-    return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }, void 0), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }, void 0), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' }, void 0)] }, void 0));
+    return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' })] }));
 });
 export default CallControlPanelIcon;
 //# sourceMappingURL=CallControlPanelIcon.js.map

package/lib/components/CallControlPanel/CallControlPanelIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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~~WAAI~~,~~WAC~~/C,CACP,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,EAAE,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,YAC3D,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,~~WAAI~~,~~WACpB~~,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,oBAAoB,GAAgE,IAAI,CAC5F,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,OAAO,CACL,MAAC,0BAA0B,IACzB,EAAE,EAAE,YAAY,KACZ,SAAS,EACb,IAAI,EAAC,GAAG,EACR,UAAU,EAAE,MAAM,gBACN,KAAK,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,~~WAAG~~,EACtB,QAAQ,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,~~WAAI~~,EAC7D,CAAC,YAAY,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,~~WAAG~~,~~YACpB~~,CAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' \| 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames \| undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}
1	+ {"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' \| 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames \| undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}

package/lib/components/CallControlPanel/CallTransfer.js CHANGED Viewed

@@ -77,7 +77,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
     };
     const [comments, setComments] = useState('');
     const [interaction, setInteraction] = useState(true);
-    return (_jsxs(StyledTransfer, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_transfer_call_heading') }, void 0) }, void 0) }, void 0), _jsxs(CardContent, { container: { itemGap: 1, justify: 'start' }, children: [_jsxs(RadioButtonGroup, { name: t('call_panel_transfer_call_option_label'), children: [_jsx(RadioButton, { label: t('call_panel_transfer_call_and_interaction_option'), id: useUID(), defaultChecked: true, onChange: () => setInteraction(true) }, void 0), _jsx(RadioButton, { label: t('call_panel_transfer_call_only_option'), id: useUID(), onChange: () => setInteraction(false) }, void 0)] }, void 0), _jsx(ComboBox, { label: t('call_panel_transfer_reason_label'), required: true, selected: selectedReason
+    return (_jsxs(StyledTransfer, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_transfer_call_heading') }) }) }), _jsxs(CardContent, { container: { itemGap: 1, justify: 'start' }, children: [_jsxs(RadioButtonGroup, { name: t('call_panel_transfer_call_option_label'), children: [_jsx(RadioButton, { label: t('call_panel_transfer_call_and_interaction_option'), id: useUID(), defaultChecked: true, onChange: () => setInteraction(true) }), _jsx(RadioButton, { label: t('call_panel_transfer_call_only_option'), id: useUID(), onChange: () => setInteraction(false) })] }), _jsx(ComboBox, { label: t('call_panel_transfer_reason_label'), required: true, selected: selectedReason
                             ? {
                                 items: {
                                     id: selectedReason.id,
@@ -89,7 +89,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
                             onItemClick: id => {
                                 setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));
                             }
-                        } }, void 0), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_transfer_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) }, void 0), _jsx(ComboBox, { label: t('call_panel_transfer_to_label'), required: true, selected: selectedContact
+                        } }), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_transfer_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) }), _jsx(ComboBox, { label: t('call_panel_transfer_to_label'), required: true, selected: selectedContact
                             ? {
                                 items: {
                                     id: selectedContact.id,
@@ -107,7 +107,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
                             onItemClick: selectItem,
                             accent: filterRegex,
                             emptyText: t('no_items')
-                        } }, void 0)] }, void 0), _jsx(CardFooter, { alignItems: 'right', justify: 'end', children: _jsx(Button, { variant: 'primary', disabled: !(selectedReason && selectedContact && comments !== ''), onClick: () => {
+                        } })] }), _jsx(CardFooter, { alignItems: 'right', justify: 'end', children: _jsx(Button, { variant: 'primary', disabled: !(selectedReason && selectedContact && comments !== ''), onClick: () => {
                         const transferParam = {
                             reason: selectedReason.id,
                             comments,
@@ -115,7 +115,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
                             phoneNumber: selectedContact.id
                         };
                         onTransferCall(transferParam);
-                    }, children: t('call_panel_transfer_button_label') }, void 0) }, void 0)] }, void 0));
+                    }, children: t('call_panel_transfer_button_label') }) })] }));
 });
 export default CallTransfer;
 //# sourceMappingURL=CallTransfer.js.map

package/lib/components/CallControlPanel/CallTransfer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallTransfer.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallTransfer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useMemo,\n ChangeEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n,\n RadioButtonGroup,\n RadioButton,\n TextArea,\n ComboBox,\n MenuProps,\n menuHelpers,\n MenuItemProps,\n CardFooter,\n useUID\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { TransferReasonOption, TransferData } from './CallControlPanel.types';\nimport { ContactsContext } from './CalleePicker';\n\nregisterIcon(timesIcon);\n\nexport interface CallTransferProps {\n /*\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onTransferCall: (transferParam: TransferData) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n\n transferOptions: Readonly<TransferReasonOption[]>;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTransfer = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent}, ${StyledCardFooter} {\n padding: calc(1.25 ${spacing}) calc(${card.padding} * 2);\n }\n min-width: 28rem;\n `;\n }\n);\n\nStyledTransfer.defaultProps = defaultThemeProp;\n\nconst CallTransfer: FunctionComponent<CallTransferProps & ForwardProps> = forwardRef(\n (\n { onClose, onTransferCall, transferOptions }: PropsWithoutRef<CallTransferProps>,\n ref: CallTransferProps['ref']\n ) => {\n const t = useI18n();\n const { contacts } = useContext(ContactsContext);\n\n const reasonsList = transferOptions.map(({ id, label }) => {\n return {\n id,\n primary: label\n };\n });\n\n const [reasons, setReasons] = useState<MenuProps['items']>((): MenuProps['items'] => {\n return menuHelpers.mapTree([...reasonsList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n });\n\n const selectedReason = useMemo(() => menuHelpers.getSelected(reasons)[0], [reasons]);\n\n const contactList = contacts.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary\n };\n });\n\n const [itemsContacts, setItemsContacts] = useState<MenuProps['items']>(\n (): MenuProps['items'] => {\n return menuHelpers.mapTree([...contactList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }\n );\n\n const selectedContact = useMemo(\n () => menuHelpers.getSelected(itemsContacts)[0],\n [itemsContacts]\n );\n\n const [filterValue, setFilterValue] = useState('');\n\n const clearSelection = () => {\n setItemsContacts(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n };\n\n const escapeChars = /[.*+\\-?^${}()\|[\\]\\\\]/g;\n const getFilterRegex = (inputValue: string) => {\n return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n };\n\n const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(itemsContacts).filter(({ primary }: MenuItemProps) => {\n return filterRegex.test(primary);\n })\n : itemsContacts;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, itemsContacts]);\n\n const selectItem = (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItemsContacts(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n };\n\n const [comments, setComments] = useState('');\n\n const [interaction, setInteraction] = useState(true);\n\n return (\n <StyledTransfer ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_transfer_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <RadioButtonGroup name={t('call_panel_transfer_call_option_label')}>\n <RadioButton\n label={t('call_panel_transfer_call_and_interaction_option')}\n id={useUID()}\n defaultChecked\n onChange={() => setInteraction(true)}\n />\n <RadioButton\n label={t('call_panel_transfer_call_only_option')}\n id={useUID()}\n onChange={() => setInteraction(false)}\n />\n </RadioButtonGroup>\n\n <ComboBox\n label={t('call_panel_transfer_reason_label')}\n required\n selected={\n selectedReason\n ? {\n items: {\n id: selectedReason.id,\n text: selectedReason.primary\n }\n }\n : undefined\n }\n menu={{\n items: reasons,\n onItemClick: id => {\n setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n }\n }}\n />\n\n <TextArea\n name='comments'\n required\n label={t('call_panel_transfer_comments_label')}\n displayCharCount\n maxLength={300}\n value={comments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n />\n\n <ComboBox\n label={t('call_panel_transfer_to_label')}\n required\n selected={\n selectedContact\n ? {\n items: {\n id: selectedContact.id,\n text: selectedContact.primary\n }\n }\n : undefined\n }\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={() => {\n setFilterValue('');\n }}\n menu={{\n items: itemsToRender,\n onItemClick: selectItem,\n accent: filterRegex,\n emptyText: t('no_items')\n }}\n />\n </CardContent>\n <CardFooter alignItems='right' justify='end'>\n <Button\n variant='primary'\n disabled={!(selectedReason && selectedContact && comments !== '')}\n onClick={() => {\n const transferParam = {\n reason: selectedReason.id,\n comments,\n interaction,\n phoneNumber: selectedContact.id\n };\n onTransferCall(transferParam);\n }}\n >\n {t('call_panel_transfer_button_label')}\n </Button>\n </CardFooter>\n </StyledTransfer>\n );\n }\n);\n\nexport default CallTransfer;\n"]}
1	+ {"version":3,"file":"CallTransfer.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallTransfer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useMemo,\n ChangeEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n,\n RadioButtonGroup,\n RadioButton,\n TextArea,\n ComboBox,\n MenuProps,\n menuHelpers,\n MenuItemProps,\n CardFooter,\n useUID\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { TransferReasonOption, TransferData } from './CallControlPanel.types';\nimport { ContactsContext } from './CalleePicker';\n\nregisterIcon(timesIcon);\n\nexport interface CallTransferProps {\n /*\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onTransferCall: (transferParam: TransferData) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n\n transferOptions: Readonly<TransferReasonOption[]>;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTransfer = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent}, ${StyledCardFooter} {\n padding: calc(1.25 ${spacing}) calc(${card.padding} * 2);\n }\n min-width: 28rem;\n `;\n }\n);\n\nStyledTransfer.defaultProps = defaultThemeProp;\n\nconst CallTransfer: FunctionComponent<CallTransferProps & ForwardProps> = forwardRef(\n (\n { onClose, onTransferCall, transferOptions }: PropsWithoutRef<CallTransferProps>,\n ref: CallTransferProps['ref']\n ) => {\n const t = useI18n();\n const { contacts } = useContext(ContactsContext);\n\n const reasonsList = transferOptions.map(({ id, label }) => {\n return {\n id,\n primary: label\n };\n });\n\n const [reasons, setReasons] = useState<MenuProps['items']>((): MenuProps['items'] => {\n return menuHelpers.mapTree([...reasonsList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n });\n\n const selectedReason = useMemo(() => menuHelpers.getSelected(reasons)[0], [reasons]);\n\n const contactList = contacts.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary\n };\n });\n\n const [itemsContacts, setItemsContacts] = useState<MenuProps['items']>(\n (): MenuProps['items'] => {\n return menuHelpers.mapTree([...contactList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }\n );\n\n const selectedContact = useMemo(\n () => menuHelpers.getSelected(itemsContacts)[0],\n [itemsContacts]\n );\n\n const [filterValue, setFilterValue] = useState('');\n\n const clearSelection = () => {\n setItemsContacts(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n };\n\n const escapeChars = /[.*+\\-?^${}()\|[\\]\\\\]/g;\n const getFilterRegex = (inputValue: string) => {\n return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n };\n\n const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(itemsContacts).filter(({ primary }: MenuItemProps) => {\n return filterRegex.test(primary);\n })\n : itemsContacts;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, itemsContacts]);\n\n const selectItem = (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItemsContacts(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n };\n\n const [comments, setComments] = useState('');\n\n const [interaction, setInteraction] = useState(true);\n\n return (\n <StyledTransfer ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_transfer_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <RadioButtonGroup name={t('call_panel_transfer_call_option_label')}>\n <RadioButton\n label={t('call_panel_transfer_call_and_interaction_option')}\n id={useUID()}\n defaultChecked\n onChange={() => setInteraction(true)}\n />\n <RadioButton\n label={t('call_panel_transfer_call_only_option')}\n id={useUID()}\n onChange={() => setInteraction(false)}\n />\n </RadioButtonGroup>\n\n <ComboBox\n label={t('call_panel_transfer_reason_label')}\n required\n selected={\n selectedReason\n ? {\n items: {\n id: selectedReason.id,\n text: selectedReason.primary\n }\n }\n : undefined\n }\n menu={{\n items: reasons,\n onItemClick: id => {\n setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n }\n }}\n />\n\n <TextArea\n name='comments'\n required\n label={t('call_panel_transfer_comments_label')}\n displayCharCount\n maxLength={300}\n value={comments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n />\n\n <ComboBox\n label={t('call_panel_transfer_to_label')}\n required\n selected={\n selectedContact\n ? {\n items: {\n id: selectedContact.id,\n text: selectedContact.primary\n }\n }\n : undefined\n }\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={() => {\n setFilterValue('');\n }}\n menu={{\n items: itemsToRender,\n onItemClick: selectItem,\n accent: filterRegex,\n emptyText: t('no_items')\n }}\n />\n </CardContent>\n <CardFooter alignItems='right' justify='end'>\n <Button\n variant='primary'\n disabled={!(selectedReason && selectedContact && comments !== '')}\n onClick={() => {\n const transferParam = {\n reason: selectedReason.id,\n comments,\n interaction,\n phoneNumber: selectedContact.id\n };\n onTransferCall(transferParam);\n }}\n >\n {t('call_panel_transfer_button_label')}\n </Button>\n </CardFooter>\n </StyledTransfer>\n );\n }\n);\n\nexport default CallTransfer;\n"]}

package/lib/components/CallControlPanel/CalleePicker.js CHANGED Viewed

@@ -45,17 +45,17 @@ const CalleePicker = forwardRef(({ heading, onClose, onCall }, ref) => {
     ];
     const tabContent = (tabId) => {
         if (tabId === 'dial-pad')
-            return _jsx(DialPad, { onCallButtonClick: onCall, mode: 'default' }, void 0);
+            return _jsx(DialPad, { onCallButtonClick: onCall, mode: 'default' });
         return (_jsx(ContactsList, { contacts: tabId === 'favorites' ? favorites : contacts, onFavoriteToggle: onFavoriteToggle, action: {
                 label: t('call_panel_contacts_call_button_label'),
                 icon: 'phone-solid',
                 callback: onCall
-            } }, void 0));
+            } }));
     };
     useEffect(() => {
         tabsRef.current?.firstChild.focus();
     }, []);
-    return (_jsxs(StyledCalleePicker, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: heading }, void 0) }, void 0) }, void 0), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsx(Tabs, { ref: tabsRef, tabs: tabsHeaders, type: 'horizontal', onTabClick: handleTabChange, currentTabId: currentTab }, void 0), _jsx(TabPanel, { tabId: currentTab, children: tabContent(currentTab) }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(StyledCalleePicker, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: heading }) }) }), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsx(Tabs, { ref: tabsRef, tabs: tabsHeaders, type: 'horizontal', onTabClick: handleTabChange, currentTabId: currentTab }), _jsx(TabPanel, { tabId: currentTab, children: tabContent(currentTab) })] })] }));
 });
 export default CalleePicker;
 //# sourceMappingURL=CalleePicker.js.map

package/lib/components/CallControlPanel/CalleePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CalleePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EAIV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AAEjE,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAE1C;IACA,QAAQ,EAAE,EAAE;IACZ,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,iBAAiB;6BACf,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;MAGhF,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAsC,EAChE,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE;QAClF;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;SACrD;QACD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAE;KACpE,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,UAAU;YAAE,OAAO,KAAC,OAAO,IAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAC,SAAS,~~WAAG~~,CAAC;QACvF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAE,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACtD,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,CAAC,uCAAuC,CAAC;gBACjD,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,MAAM;aACjB,~~WACD~~,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACZ,OAAO,CAAC,OAAO,EAAE,UAAgC,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,aAC1B,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACd~~,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,~~WAAQ~~,~~WAC9B~~,~~WACI~~,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,aACpC,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,UAAU,~~WACxB~~,EACF,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,UAAU,CAAC,UAAU,CAAC,~~WAAY~~,~~YACpD~~,~~YACK~~,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n createContext,\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n TabPanel,\n Tabs,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../DialPad/DialPad';\n\nimport ContactsList, { ContactsListProps } from './ContactsList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n /** Heading for the new call. /\n heading: string;\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onCall: (phoneNumber: string) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const ContactsContext = createContext<\n Pick<ContactsListProps, 'contacts' \| 'onFavoriteToggle'>\n>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst StyledCalleePicker = styled(Card)(({ theme }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n }\n\n ${StyledTabPanel} {\n height: 24rem;\n }\n `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n (\n { heading, onClose, onCall }: PropsWithoutRef<CalleePickerProps>,\n ref: CalleePickerProps['ref']\n ) => {\n const t = useI18n();\n const [currentTab, setCurrentTab] = useState('all');\n const tabsRef = useRef<HTMLElement>(null);\n const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n const favorites = contacts.filter(item => item.favorite);\n\n const handleTabChange = (id: string) => {\n setCurrentTab(id);\n };\n\n const tabsHeaders = [\n { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n {\n id: 'favorites',\n name: t('call_panel_contacts_favorites_heading'),\n count: contacts.filter(item => item.favorite).length\n },\n { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n ];\n\n const tabContent = (tabId: string) => {\n if (tabId === 'dial-pad') return <DialPad onCallButtonClick={onCall} mode='default' />;\n return (\n <ContactsList\n contacts={tabId === 'favorites' ? favorites : contacts}\n onFavoriteToggle={onFavoriteToggle}\n action={{\n label: t('call_panel_contacts_call_button_label'),\n icon: 'phone-solid',\n callback: onCall\n }}\n />\n );\n };\n\n useEffect(() => {\n (tabsRef.current?.firstChild as HTMLButtonElement).focus();\n }, []);\n\n return (\n <StyledCalleePicker ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <Tabs\n ref={tabsRef}\n tabs={tabsHeaders}\n type='horizontal'\n onTabClick={handleTabChange}\n currentTabId={currentTab}\n />\n <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n </CardContent>\n </StyledCalleePicker>\n );\n }\n);\n\nexport default CalleePicker;\n"]}
1	+ {"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CalleePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n TabPanel,\n Tabs,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../DialPad/DialPad';\n\nimport ContactsList, { ContactsListProps } from './ContactsList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n /** Heading for the new call. /\n heading: string;\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onCall: (phoneNumber: string) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const ContactsContext = createContext<\n Pick<ContactsListProps, 'contacts' \| 'onFavoriteToggle'>\n>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst StyledCalleePicker = styled(Card)(({ theme }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n }\n\n ${StyledTabPanel} {\n height: 24rem;\n }\n `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n (\n { heading, onClose, onCall }: PropsWithoutRef<CalleePickerProps>,\n ref: CalleePickerProps['ref']\n ) => {\n const t = useI18n();\n const [currentTab, setCurrentTab] = useState('all');\n const tabsRef = useRef<HTMLElement>(null);\n const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n const favorites = contacts.filter(item => item.favorite);\n\n const handleTabChange = (id: string) => {\n setCurrentTab(id);\n };\n\n const tabsHeaders = [\n { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n {\n id: 'favorites',\n name: t('call_panel_contacts_favorites_heading'),\n count: contacts.filter(item => item.favorite).length\n },\n { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n ];\n\n const tabContent = (tabId: string) => {\n if (tabId === 'dial-pad') return <DialPad onCallButtonClick={onCall} mode='default' />;\n return (\n <ContactsList\n contacts={tabId === 'favorites' ? favorites : contacts}\n onFavoriteToggle={onFavoriteToggle}\n action={{\n label: t('call_panel_contacts_call_button_label'),\n icon: 'phone-solid',\n callback: onCall\n }}\n />\n );\n };\n\n useEffect(() => {\n (tabsRef.current?.firstChild as HTMLButtonElement).focus();\n }, []);\n\n return (\n <StyledCalleePicker ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <Tabs\n ref={tabsRef}\n tabs={tabsHeaders}\n type='horizontal'\n onTabClick={handleTabChange}\n currentTabId={currentTab}\n />\n <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n </CardContent>\n </StyledCalleePicker>\n );\n }\n);\n\nexport default CalleePicker;\n"]}

package/lib/components/CallControlPanel/ContactsList.js CHANGED Viewed

@@ -50,13 +50,13 @@ const ContactsList = forwardRef(({ contacts: items, action, onFavoriteToggle },
             onFavoriteToggle(phoneNumber, favorite);
         }, "aria-label": favorite
             ? t('call_panel_contacts_add_to_favorites')
-            : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }, void 0) }, void 0)), [onFavoriteToggle]);
+            : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }) })), [onFavoriteToggle]);
     const createList = (list) => {
         return list.map(item => {
             return {
                 id: item.phoneNumber,
                 primary: item.primary,
-                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }, void 0),
+                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }),
                 visual: favoriteButton(item.phoneNumber, item.favorite),
                 actions: [
                     {
@@ -82,7 +82,7 @@ const ContactsList = forwardRef(({ contacts: items, action, onFavoriteToggle },
                 return (primary.toLowerCase().includes(searchText.toLowerCase()) ||
                     secondary.toLowerCase().includes(searchText.toLowerCase()));
             }))
-            : createList(items), searchInputProps: { onSearchChange } }, void 0));
+            : createList(items), searchInputProps: { onSearchChange } }));
 });
 export default ContactsList;
 //# sourceMappingURL=ContactsList.js.map

package/lib/components/CallControlPanel/ContactsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactsList.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAEhB,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,aAAa,EACb,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAInG,YAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAoBtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;;;;;MAON,UAAU;uBACO,IAAI,CAAC,OAAO;wBACX,IAAI,CAAC,OAAO;;UAE1B,iBAAiB;;;;;;QAMnB,UAAU;uCACqB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;UAExD,aAAa,OAAO,eAAe;;uBAEtB,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;MAG3C,wBAAwB;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAsC,EACjF,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACnD,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,WAAmB,EAAE,QAAiB,EAAE,EAAE,CAAC,CAC1C,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC,gBAEC,QAAQ;YACN,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;YAC3C,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,YAGpD,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,~~WAAI~~,~~WACzC~~,CACV,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,IAAe,EAAE,EAAE;QACrC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACrB,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,WAAW;gBACpB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,SAAS,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,CAAC,SAAS,~~WAAQ~~;gBAC5D,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACvD,OAAO,EAAE;oBACP;wBACE,IAAI,EAAE,MAAM,CAAC,KAAK;wBAClB,EAAE,EAAE,SAAS;wBACb,IAAI,EAAE,MAAM,CAAC,IAAI;qBAClB;iBACF;gBACD,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACpC,CAAC;gBACD,SAAS,EAAE;oBACT,KAAK,EAAE,oCAAoC;oBAC3C,IAAI,EAAE,yCAAyC;iBAChD;gBACD,QAAQ,EAAE,CAAC;aACZ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAExD,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,YAAY,EACjB,KAAK,EACH,UAAU;YACR,CAAC,CAAC,UAAU,CACR,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;gBACtC,OAAO,CACL,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;oBACxD,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAC3D,CAAC;YACJ,CAAC,CAAC,CACH;YACH,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,EAEvB,gBAAgB,EAAE,EAAE,cAAc,EAAE,~~WACpC~~,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n Text,\n StyledGrid,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\n\nimport type { Contact } from './CallControlPanel.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface ContactsListProps {\n /** An array of contacts objects. /\n contacts: Contact[];\n /\n Primary action the user may select.\n * @param phoneNumber the number chosen.\n /\n action: {\n label: string;\n icon: string;\n callback: (phoneNumber: string) => void;\n };\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledContactsList = styled.div(({ theme: { base } }) => {\n return css`\n display: flex;\n flex-flow: column;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n\n ${StyledCard} {\n margin: 0 calc(${base.spacing} -2);\n padding: 0 calc(${base.spacing} * 2);\n\n > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n }\n\n li${StyledGrid} {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n padding: 0;\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledContactsList.defaultProps = defaultThemeProp;\n\nconst ContactsList: FunctionComponent<ContactsListProps & ForwardProps> = forwardRef(\n (\n { contacts: items, action, onFavoriteToggle }: PropsWithoutRef<ContactsListProps>,\n ref: ContactsListProps['ref']\n ) => {\n const t = useI18n();\n const [searchText, setSearchText] = useState('');\n const containerRef = useConsolidatedRef(ref);\n\n const onSearchChange = useCallback((value: string) => {\n setSearchText(value.trim());\n }, []);\n\n const favoriteButton = useCallback(\n (phoneNumber: string, favorite: boolean) => (\n <Button\n variant='simple'\n icon\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n onFavoriteToggle(phoneNumber, favorite);\n }}\n aria-label={\n favorite\n ? t('call_panel_contacts_add_to_favorites')\n : t('call_panel_contacts_remove_from_favorites')\n }\n >\n <Icon name={favorite ? 'star-solid' : 'star'} />\n </Button>\n ),\n [onFavoriteToggle]\n );\n\n const createList = (list: Contact[]) => {\n return list.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n actions: [\n {\n text: action.label,\n id: 'primary',\n icon: action.icon\n }\n ],\n onClick: () => {\n action.callback(item.phoneNumber);\n },\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n },\n tabIndex: 0\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul > li' });\n\n return (\n <ViewAll\n as={StyledContactsList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n secondary.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n }\n);\n\nexport default ContactsList;\n"]}
1	+ {"version":3,"file":"ContactsList.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n Text,\n StyledGrid,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\n\nimport type { Contact } from './CallControlPanel.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface ContactsListProps {\n /** An array of contacts objects. /\n contacts: Contact[];\n /\n Primary action the user may select.\n * @param phoneNumber the number chosen.\n /\n action: {\n label: string;\n icon: string;\n callback: (phoneNumber: string) => void;\n };\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledContactsList = styled.div(({ theme: { base } }) => {\n return css`\n display: flex;\n flex-flow: column;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n\n ${StyledCard} {\n margin: 0 calc(${base.spacing} -2);\n padding: 0 calc(${base.spacing} * 2);\n\n > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n }\n\n li${StyledGrid} {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n padding: 0;\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledContactsList.defaultProps = defaultThemeProp;\n\nconst ContactsList: FunctionComponent<ContactsListProps & ForwardProps> = forwardRef(\n (\n { contacts: items, action, onFavoriteToggle }: PropsWithoutRef<ContactsListProps>,\n ref: ContactsListProps['ref']\n ) => {\n const t = useI18n();\n const [searchText, setSearchText] = useState('');\n const containerRef = useConsolidatedRef(ref);\n\n const onSearchChange = useCallback((value: string) => {\n setSearchText(value.trim());\n }, []);\n\n const favoriteButton = useCallback(\n (phoneNumber: string, favorite: boolean) => (\n <Button\n variant='simple'\n icon\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n onFavoriteToggle(phoneNumber, favorite);\n }}\n aria-label={\n favorite\n ? t('call_panel_contacts_add_to_favorites')\n : t('call_panel_contacts_remove_from_favorites')\n }\n >\n <Icon name={favorite ? 'star-solid' : 'star'} />\n </Button>\n ),\n [onFavoriteToggle]\n );\n\n const createList = (list: Contact[]) => {\n return list.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n actions: [\n {\n text: action.label,\n id: 'primary',\n icon: action.icon\n }\n ],\n onClick: () => {\n action.callback(item.phoneNumber);\n },\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n },\n tabIndex: 0\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul > li' });\n\n return (\n <ViewAll\n as={StyledContactsList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n secondary.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n }\n);\n\nexport default ContactsList;\n"]}

package/lib/components/CallControlPanel/DTMFKeypad.js CHANGED Viewed

@@ -17,7 +17,7 @@ export const StyledDTMFKeypad = styled(Card)(({ theme: { base: { spacing }, comp
 StyledDTMFKeypad.defaultProps = defaultThemeProp;
 const DTMFKeypad = ({ onClose, onDialButtonClick }) => {
     const t = useI18n();
-    return (_jsxs(StyledDTMFKeypad, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }, void 0) }, void 0) }, void 0), _jsx(CardContent, { container: { itemGap: 1, justify: 'start' }, children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(StyledDTMFKeypad, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }) }), _jsx(CardContent, { container: { itemGap: 1, justify: 'start' }, children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }) })] }));
 };
 export default DTMFKeypad;
 //# sourceMappingURL=DTMFKeypad.js.map

package/lib/components/CallControlPanel/DTMFKeypad.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DTMFKeypad.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAE3D,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;QAEN,gBAAgB,KAAK,iBAAiB;+BACf,OAAO,UAAU,IAAI,CAAC,OAAO;;KAEvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAOjD,MAAM,UAAU,GAAwB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,eACf,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACd~~,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,~~WAAQ~~,~~WACxD~~,~~WACI~~,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YACtD,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,~~WAAG~~,~~WACjD~~,~~YACG~~,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n Button,\n Icon,\n registerIcon,\n Flex,\n Text,\n useI18n,\n CardContent,\n defaultThemeProp,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad, { DialPadProps } from '../DialPad/DialPad';\n\nregisterIcon(timesIcon);\n\nexport const StyledDTMFKeypad = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n min-width: 15rem;\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);\n }\n `;\n }\n);\n\nStyledDTMFKeypad.defaultProps = defaultThemeProp;\n\nexport interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {\n /** Callback fired on clicking close button. */\n onClose?: () => void;\n}\n\nconst DTMFKeypad: FC<DTMFKeypadProps> = ({ onClose, onDialButtonClick }) => {\n const t = useI18n();\n\n return (\n <StyledDTMFKeypad>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n </CardContent>\n </StyledDTMFKeypad>\n );\n};\n\nexport default DTMFKeypad;\n"]}
1	+ {"version":3,"file":"DTMFKeypad.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAE3D,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;QAEN,gBAAgB,KAAK,iBAAiB;+BACf,OAAO,UAAU,IAAI,CAAC,OAAO;;KAEvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAOjD,MAAM,UAAU,GAAwB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,eACf,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GACxD,GACI,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YACtD,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,GAAG,GACjD,IACG,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n Button,\n Icon,\n registerIcon,\n Flex,\n Text,\n useI18n,\n CardContent,\n defaultThemeProp,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad, { DialPadProps } from '../DialPad/DialPad';\n\nregisterIcon(timesIcon);\n\nexport const StyledDTMFKeypad = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n min-width: 15rem;\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);\n }\n `;\n }\n);\n\nStyledDTMFKeypad.defaultProps = defaultThemeProp;\n\nexport interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {\n /** Callback fired on clicking close button. */\n onClose?: () => void;\n}\n\nconst DTMFKeypad: FC<DTMFKeypadProps> = ({ onClose, onDialButtonClick }) => {\n const t = useI18n();\n\n return (\n <StyledDTMFKeypad>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n </CardContent>\n </StyledDTMFKeypad>\n );\n};\n\nexport default DTMFKeypad;\n"]}

package/lib/components/CallControlPanel/ExternalCTI.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+export interface ExternalCTIProps {
+    /** The heading rendered. */
+    heading: string;
+    /** If true, the component will be draggable. */
+    draggable?: boolean;
+    /** Container element size in px. */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /** Reference to the container. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps>;
+export default ExternalCTI;
+//# sourceMappingURL=ExternalCTI.d.ts.map

package/lib/components/CallControlPanel/ExternalCTI.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3F,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIzE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAwBD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0BnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CallControlPanel/ExternalCTI.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+import FloatingPanel, { StyledFloatingPanel } from './FloatingPanel';
+const StyledExternalCTIPanel = styled(StyledFloatingPanel)(({ theme }) => {
+    return css `
+    width: auto;
+    iframe {
+      border: transparent;
+      display: block;
+      border-end-start-radius: ${theme.components.card['border-radius']};
+      border-end-end-radius: ${theme.components.card['border-radius']};
+    }
+  `;
+});
+StyledExternalCTIPanel.defaultProps = defaultThemeProp;
+const StyledCTIContainer = styled.div `
+  width: var(--cti-container-width, auto);
+  height: var(--cti-container-height, auto);
+  overflow-y: auto;
+`;
+StyledCTIContainer.defaultProps = defaultThemeProp;
+const ExternalCTI = forwardRef(({ heading, draggable = false, size }, ref) => {
+    return (_jsx(FloatingPanel, { as: StyledExternalCTIPanel, heading: heading, draggable: draggable, content: _jsx(StyledCTIContainer, { style: size
+                ? {
+                    '--cti-container-width': `${size.width}px`,
+                    '--cti-container-height': `${size.height}px`
+                }
+                : undefined, ref: ref }) }));
+});
+export default ExternalCTI;
+//# sourceMappingURL=ExternalCTI.js.map

package/lib/components/CallControlPanel/ExternalCTI.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,aAAa,EAAE,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAgBrE,MAAM,sBAAsB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;;;;;iCAKqB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;+BACxC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;GAElE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EAAE,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,IAAI,EAAqC,EACvE,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EACL,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;gBACF,CAAC,CAAE;oBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;oBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,GAEJ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { CSSProperties, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport FloatingPanel, { StyledFloatingPanel } from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n /** The heading rendered. */\n heading: string;\n /** If true, the component will be draggable. */\n draggable?: boolean;\n /** Container element size in px. */\n size?: {\n width: number;\n height: number;\n };\n /** Reference to the container. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledExternalCTIPanel = styled(StyledFloatingPanel)(({ theme }) => {\n return css`\n width: auto;\n iframe {\n border: transparent;\n display: block;\n border-end-start-radius: ${theme.components.card['border-radius']};\n border-end-end-radius: ${theme.components.card['border-radius']};\n }\n `;\n});\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n width: var(--cti-container-width, auto);\n height: var(--cti-container-height, auto);\n overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n (\n { heading, draggable = false, size }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) => {\n return (\n <FloatingPanel\n as={StyledExternalCTIPanel}\n heading={heading}\n draggable={draggable}\n content={\n <StyledCTIContainer\n style={\n size\n ? ({\n '--cti-container-width': `${size.width}px`,\n '--cti-container-height': `${size.height}px`\n } as CSSProperties)\n : undefined\n }\n ref={ref}\n />\n }\n />\n );\n }\n);\n\nexport default ExternalCTI;\n"]}

package/lib/components/CallControlPanel/FloatingPanel.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { FunctionComponent, ReactNode, Ref } from 'react';
+import { ForwardProps, Action, IconNames } from '@pega/cosmos-react-core';
+export interface FloatingPanelActionProps extends ForwardProps {
+    /** A string to uniquely identify this Action within the onClick handler. */
+    id: Action['id'];
+    /** The text content of the Action. */
+    text: Action['text'];
+    /** Name of the icon from the cosmos set. */
+    icon: IconNames;
+    /** Determines if the Action will be disabled. */
+    disabled?: Action['disabled'];
+    /** Called when the Action is clicked. */
+    onClick: NonNullable<Action['onClick']>;
+}
+export interface FloatingPanelProps {
+    /** The heading rendered. */
+    heading: string;
+    /** Content of the panel */
+    content: ReactNode;
+    /** Action button to be rendered in header */
+    actions?: FloatingPanelActionProps[];
+    /** If true, the component will be draggable */
+    draggable?: boolean;
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledFloatingPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
+    isCollapsed: boolean;
+    isDraggable?: boolean | undefined;
+}, never>;
+declare const FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps>;
+export default FloatingPanel;
+//# sourceMappingURL=FloatingPanel.d.ts.map

package/lib/components/CallControlPanel/FloatingPanel.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,YAAY,EAGZ,MAAM,EACN,SAAS,EAIV,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,OAAO,EAAE,SAAS,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO;;SA8BpB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoEvE,CAAC;AAEF,eAAe,aAAa,CAAC"}