@pega/cosmos-react-cs 2.1.5 → 2.1.6

package/lib/components/CallControlPanel/CallControlPanel.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=CallControlPanel.types.js.map

package/lib/components/CallControlPanel/CallControlPanel.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport type Contact = {\n  /** Contact phone number */\n  phoneNumber: string;\n  /** Contact name  */\n  primary: string;\n  /** Additional contact information */\n  secondary: string;\n  /** Determines if contact is favorite */\n  favorite: boolean;\n};\n\nexport interface CallParticipant {\n  /** Caller id. */\n  id: string;\n  /** Caller's name. */\n  name: string;\n  /** Additional caller's info. */\n  info?: string;\n  /** Callback fired when the user ends the call. */\n  onEndCall?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n  readonly id: string;\n  readonly label: string;\n}\n\nexport type TransferData = {\n  reason: TransferReasonOption['id'];\n  comments: string;\n  interaction: boolean;\n  phoneNumber: string;\n};\n\nexport interface CallProps {\n  /** Call identifier. */\n  id: string;\n  /** Timestamp when the call has begun. */\n  startedAt: number | Date;\n  /** Timestamp when the call has been put on hold. */\n  onHoldSince?: number | Date;\n  /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n   * time is up.\n   */\n  slaConfig?: number[];\n  /** Call participants. */\n  participants: CallParticipant[];\n  /** The flag whether the mic is muted on this call. */\n  muted?: boolean;\n  /** Callback fired when 'pause' icon has been clicked. */\n  onPauseToggle: (id: CallProps['id']) => void;\n  /** Callback fired when 'mute' icon has been clicked. */\n  onMuteToggle: (id: CallProps['id']) => void;\n  /** Callback fired when 'Consult' action has been clicked. */\n  onConsultAction?: (id: CallProps['id'], phoneNumber: string) => void;\n  /** Callback fired when 'Conference' action has been clicked. */\n  onConferenceAction?: (id: CallProps['id'], phoneNumber: string) => void;\n  /** Callback fired when 'Merge call' action has been chosen. */\n  onMergeCall?: (id: CallProps['id']) => void;\n  /** Callback fired for every dial pad key press. */\n  onDTMFPress?: (id: CallProps['id'], key: string) => void;\n  /** Callback fired when 'Transfer' action has been clicked. */\n  onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n  /**\n   * Transfer reason options\n   */\n  transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'offline' | 'available' | 'busy' | 'away' | 'not_available';\n\nexport interface UserAvailabilityStatusOption {\n  readonly id: string;\n  readonly label: string;\n  readonly status: UserAvailabilityStatus;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n  /** The heading rendered. */\n  heading: string;\n  /**\n   * User availability statuses.\n   */\n  statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n  /** User current status. */\n  status: UserAvailabilityStatusOption['id'];\n  /** Timestamp since the user is in the current status. */\n  inStatusSince: number | Date;\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /**\n   * Region for messages: errors, notifications, etc.\n   */\n  message?: ReactNode;\n  /**\n   * Callback fired when user changes their status.\n   * @param value new chosen status.\n   */\n  onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n  /**\n   * List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n   * a conference call.\n   */\n  calls: CallProps[];\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onAddCall: (phoneNumber: string) => void;\n  /** An array of contacts objects. */\n  contactsList: Contact[];\n  /** Callback fired on adding/removing contact to/from favorites */\n  onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts

@@ -1,19 +0,0 @@
-import { FunctionComponent } from 'react';
-import { DefaultTheme } from 'styled-components';
-import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import type { UserAvailabilityStatus } from './CallControlPanel.types';
-interface CallControlPanelIconProps extends NoChildrenProp {
-    status?: UserAvailabilityStatus;
-    label: string;
-    panelVisible: boolean;
-}
-interface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {
-    variant: 'icon' | 'dot';
-}
-export declare const StyledCallControlPanelIcon: import("styled-components").StyledComponent<"div", DefaultTheme, {
-    userStatus: UserAvailabilityStatus;
-}, never>;
-export declare const UserStatusIcon: FunctionComponent<UserStatusIconProps>;
-declare const CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps>;
-export default CallControlPanelIcon;
-//# sourceMappingURL=CallControlPanelIcon.d.ts.map

package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAChD,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAEL,YAAY,EAGZ,cAAc,EAKf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AA2DD,eAAO,MAAM,0BAA0B;gBAzCW,sBAAsB;SAmDvE,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA6BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAkBrF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanelIcon.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { defaultThemeProp, Icon, registerIcon, StyledAvatar, StyledIcon, useTheme } from '@pega/cosmos-react-core';
-import * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';
-import * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';
-registerIcon(headsetIcon, eyeOffSolidIcon);
-const colorMapping = {
-    offline: 'slate-light',
-    available: 'green-light',
-    busy: 'red-medium',
-    away: 'orange-light',
-    not_available: 'slate-light'
-};
-const iconMapping = {
-    offline: 'times',
-    available: undefined,
-    busy: 'minus',
-    away: 'clock',
-    not_available: 'reset'
-};
-const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }) => {
-    const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2);
-    const bgColor = colors[colorName][colorVariant];
-    const fgColor = readableColor(bgColor);
-    return css `
-      background-color: ${bgColor};
-      color: ${fgColor};
-    `;
-});
-StyledStatusIcon.defaultProps = defaultThemeProp;
-const StyledUserStatusIcon = styled(StyledStatusIcon) `
-  position: absolute;
-  inset-block-start: -0.25rem;
-  inset-inline-end: -0.25rem;
-  z-index: 1;
-  width: 0.875rem;
-  height: 0.875rem;
-  border-radius: 50%;
-  border: 0.0625rem solid black;
-
-  ${StyledIcon} {
-    display: block;
-    width: 100%;
-    margin: 0 auto;
-  }
-`;
-StyledUserStatusIcon.defaultProps = defaultThemeProp;
-export const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
-  > ${StyledIcon}:nth-child(3) {
-    position: absolute;
-    inset-block-end: -0.25rem;
-    inset-inline-end: -0.25rem;
-    z-index: 1;
-    width: 0.875rem;
-    height: 0.875rem;
-    fill: ${p => p.theme.base.colors.gray.medium};
-  }
-`;
-StyledCallControlPanelIcon.defaultProps = defaultThemeProp;
-export const UserStatusIcon = memo(({ status = 'offline', variant }) => {
-    const { base: { colors } } = useTheme();
-    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));
-});
-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));
-});
-export default CallControlPanelIcon;
-//# sourceMappingURL=CallControlPanelIcon.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,19 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import type { TransferReasonOption, TransferData } from './CallControlPanel.types';
-export interface CallTransferProps {
-    /**
-     * Callback fired on new call made by the user.
-     * @param phoneNumber the number chosen.
-     */
-    onTransferCall: (transferParam: TransferData) => void;
-    /** Callback fired on clicking close button. */
-    onClose?: () => void;
-    transferOptions: Readonly<TransferReasonOption[]>;
-    /** Reference to the root component. */
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const StyledTransfer: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const CallTransfer: FunctionComponent<CallTransferProps & ForwardProps>;
-export default CallTransfer;
-//# sourceMappingURL=CallTransfer.d.ts.map

package/lib/components/CallControlPanel/CallTransfer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallTransfer.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallTransfer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKnF,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,cAAc,EAAE,CAAC,aAAa,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,iLAc1B,CAAC;AAIF,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAmMrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/CallControlPanel/CallTransfer.js

@@ -1,121 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, forwardRef, useState, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, CardContent, CardHeader, Flex, Icon, registerIcon, Text, Card, defaultThemeProp, useI18n, RadioButtonGroup, RadioButton, TextArea, ComboBox, menuHelpers, CardFooter, useUID } from '@pega/cosmos-react-core';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import { ContactsContext } from './CalleePicker';
-registerIcon(timesIcon);
-export const StyledTransfer = styled(Card)(({ theme: { base: { spacing }, components: { card } } }) => {
-    return css `
-      ${StyledCardHeader}, ${StyledCardContent}, ${StyledCardFooter} {
-        padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);
-      }
-      min-width: 28rem;
-    `;
-});
-StyledTransfer.defaultProps = defaultThemeProp;
-const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, ref) => {
-    const t = useI18n();
-    const { contacts } = useContext(ContactsContext);
-    const reasonsList = transferOptions.map(({ id, label }) => {
-        return {
-            id,
-            primary: label
-        };
-    });
-    const [reasons, setReasons] = useState(() => {
-        return menuHelpers.mapTree([...reasonsList], item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    });
-    const selectedReason = useMemo(() => menuHelpers.getSelected(reasons)[0], [reasons]);
-    const contactList = contacts.map(item => {
-        return {
-            id: item.phoneNumber,
-            primary: item.primary
-        };
-    });
-    const [itemsContacts, setItemsContacts] = useState(() => {
-        return menuHelpers.mapTree([...contactList], item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    });
-    const selectedContact = useMemo(() => menuHelpers.getSelected(itemsContacts)[0], [itemsContacts]);
-    const [filterValue, setFilterValue] = useState('');
-    const clearSelection = () => {
-        setItemsContacts(cur => menuHelpers.mapTree(cur, item => {
-            return {
-                ...item,
-                selected: false
-            };
-        }));
-    };
-    const escapeChars = /[.*+\-?^${}()|[\]\\]/g;
-    const getFilterRegex = (inputValue) => {
-        return new RegExp(`^${inputValue.replace(escapeChars, '\\$&')}`, 'i');
-    };
-    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
-    const itemsToRender = useMemo(() => {
-        const newItems = filterValue
-            ? menuHelpers.flatten(itemsContacts).filter(({ primary }) => {
-                return filterRegex.test(primary);
-            })
-            : itemsContacts;
-        return menuHelpers.mapTree(newItems, item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    }, [filterValue, itemsContacts]);
-    const selectItem = (id) => {
-        setFilterValue('');
-        setItemsContacts(cur => menuHelpers.selectItem(cur, id, 'single-select'));
-    };
-    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
-                            ? {
-                                items: {
-                                    id: selectedReason.id,
-                                    text: selectedReason.primary
-                                }
-                            }
-                            : undefined, menu: {
-                            items: reasons,
-                            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
-                            ? {
-                                items: {
-                                    id: selectedContact.id,
-                                    text: selectedContact.primary
-                                }
-                            }
-                            : undefined, value: filterValue, onChange: (e) => {
-                            if (!e.target.value)
-                                clearSelection();
-                            setFilterValue(e.target.value);
-                        }, onBlur: () => {
-                            setFilterValue('');
-                        }, menu: {
-                            items: itemsToRender,
-                            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: () => {
-                        const transferParam = {
-                            reason: selectedReason.id,
-                            comments,
-                            interaction,
-                            phoneNumber: selectedContact.id
-                        };
-                        onTransferCall(transferParam);
-                    }, children: t('call_panel_transfer_button_label') }, void 0) }, void 0)] }, void 0));
-});
-export default CallTransfer;
-//# sourceMappingURL=CallTransfer.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,20 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { ContactsListProps } from './ContactsList';
-export interface CalleePickerProps {
-    /** Heading for the new call. */
-    heading: string;
-    /**
-     * Callback fired on new call made by the user.
-     * @param phoneNumber the number chosen.
-     */
-    onCall: (phoneNumber: string) => void;
-    /** Callback fired on clicking close button. */
-    onClose?: () => void;
-    /** Reference to the root component. */
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const ContactsContext: import("react").Context<Pick<ContactsListProps, "onFavoriteToggle" | "contacts">>;
-declare const CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps>;
-export default CalleePicker;
-//# sourceMappingURL=CalleePicker.d.ts.map

package/lib/components/CallControlPanel/CalleePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CalleePicker.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CalleePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAWL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAQjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,mFAK1B,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAsErE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/CallControlPanel/CalleePicker.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, forwardRef, useEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, CardContent, CardHeader, Flex, Icon, registerIcon, Text, TabPanel, Tabs, Card, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import DialPad from '../DialPad/DialPad';
-import ContactsList from './ContactsList';
-registerIcon(timesIcon);
-export const ContactsContext = createContext({
-    contacts: [],
-    onFavoriteToggle: () => { }
-});
-const StyledCalleePicker = styled(Card)(({ theme }) => {
-    return css `
-    ${StyledCardHeader}, ${StyledCardContent} {
-      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
-    }
-
-    ${StyledTabPanel} {
-      height: 24rem;
-    }
-  `;
-});
-StyledCalleePicker.defaultProps = defaultThemeProp;
-const CalleePicker = forwardRef(({ heading, onClose, onCall }, ref) => {
-    const t = useI18n();
-    const [currentTab, setCurrentTab] = useState('all');
-    const tabsRef = useRef(null);
-    const { contacts, onFavoriteToggle } = useContext(ContactsContext);
-    const favorites = contacts.filter(item => item.favorite);
-    const handleTabChange = (id) => {
-        setCurrentTab(id);
-    };
-    const tabsHeaders = [
-        { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },
-        {
-            id: 'favorites',
-            name: t('call_panel_contacts_favorites_heading'),
-            count: contacts.filter(item => item.favorite).length
-        },
-        { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }
-    ];
-    const tabContent = (tabId) => {
-        if (tabId === 'dial-pad')
-            return _jsx(DialPad, { onCallButtonClick: onCall, mode: 'default' }, void 0);
-        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));
-});
-export default CalleePicker;
-//# sourceMappingURL=CalleePicker.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,23 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import type { Contact } from './CallControlPanel.types';
-export interface ContactsListProps {
-    /** An array of contacts objects. */
-    contacts: Contact[];
-    /**
-     * Primary action the user may select.
-     * @param phoneNumber the number chosen.
-     */
-    action: {
-        label: string;
-        icon: string;
-        callback: (phoneNumber: string) => void;
-    };
-    /** Callback fired on adding/removing contact to/from favorites */
-    onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;
-    /** Reference to the root component. */
-    ref?: Ref<HTMLDivElement>;
-}
-declare const ContactsList: FunctionComponent<ContactsListProps & ForwardProps>;
-export default ContactsList;
-//# sourceMappingURL=ContactsList.d.ts.map

package/lib/components/CallControlPanel/ContactsList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContactsList.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB;;;OAGG;IACH,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;IACF,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAoCD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkFrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/CallControlPanel/ContactsList.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Icon, registerIcon, Text, StyledGrid, useI18n, ViewAll, StyledSummaryItemActions, StyledPrimary, StyledSecondary, useArrows, useConsolidatedRef, StyledCard } from '@pega/cosmos-react-core';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';
-import * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';
-registerIcon(starIcon, starSolidIcon);
-const StyledContactsList = styled.div(({ theme: { base } }) => {
-    return css `
-    display: flex;
-    flex-flow: column;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    ${StyledCard} {
-      margin: 0 calc(${base.spacing} * -2);
-      padding: 0 calc(${base.spacing} * 2);
-
-      > ${StyledCardContent} {
-        padding: 0;
-        gap: 0;
-      }
-    }
-
-    li${StyledGrid} {
-      border-bottom: 0.0625rem solid ${base.palette['border-line']};
-      padding: 0;
-      > ${StyledPrimary}, > ${StyledSecondary} {
-        align-self: center;
-        font-weight: ${base['font-weight'].normal};
-      }
-    }
-    ${StyledSummaryItemActions} {
-      color: ${base.palette.interactive};
-    }
-  `;
-});
-StyledContactsList.defaultProps = defaultThemeProp;
-const ContactsList = forwardRef(({ contacts: items, action, onFavoriteToggle }, ref) => {
-    const t = useI18n();
-    const [searchText, setSearchText] = useState('');
-    const containerRef = useConsolidatedRef(ref);
-    const onSearchChange = useCallback((value) => {
-        setSearchText(value.trim());
-    }, []);
-    const favoriteButton = useCallback((phoneNumber, favorite) => (_jsx(Button, { variant: 'simple', icon: true, onClick: (e) => {
-            e.stopPropagation();
-            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]);
-    const createList = (list) => {
-        return list.map(item => {
-            return {
-                id: item.phoneNumber,
-                primary: item.primary,
-                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }, void 0),
-                visual: favoriteButton(item.phoneNumber, item.favorite),
-                actions: [
-                    {
-                        text: action.label,
-                        id: 'primary',
-                        icon: action.icon
-                    }
-                ],
-                onClick: () => {
-                    action.callback(item.phoneNumber);
-                },
-                container: {
-                    areas: '"visual primary secondary actions"',
-                    cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'
-                },
-                tabIndex: 0
-            };
-        });
-    };
-    useArrows(containerRef, { selector: ':scope ul > li' });
-    return (_jsx(ViewAll, { as: StyledContactsList, ref: containerRef, items: searchText
-            ? createList(items.filter(({ primary, secondary }) => {
-                return (primary.toLowerCase().includes(searchText.toLowerCase()) ||
-                    secondary.toLowerCase().includes(searchText.toLowerCase()));
-            }))
-            : createList(items), searchInputProps: { onSearchChange } }, void 0));
-});
-export default ContactsList;
-//# sourceMappingURL=ContactsList.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { OmitStrict } from '@pega/cosmos-react-core';
-import { DialPadProps } from '../DialPad/DialPad';
-export declare const StyledDTMFKeypad: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {
-    /** Callback fired on clicking close button. */
-    onClose?: () => void;
-}
-declare const DTMFKeypad: FC<DTMFKeypadProps>;
-export default DTMFKeypad;
-//# sourceMappingURL=DTMFKeypad.d.ts.map

package/lib/components/CallControlPanel/DTMFKeypad.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DTMFKeypad.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAWL,UAAU,EACX,MAAM,yBAAyB,CAAC;AAKjC,OAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAI3D,eAAO,MAAM,gBAAgB,mOAc5B,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,UAAU,CAAC,YAAY,EAAE,MAAM,CAAC;IACvE,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAqBnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CallControlPanel/DTMFKeypad.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Card, CardHeader, Button, Icon, registerIcon, Flex, Text, useI18n, CardContent, defaultThemeProp } from '@pega/cosmos-react-core';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import DialPad from '../DialPad/DialPad';
-registerIcon(timesIcon);
-export const StyledDTMFKeypad = styled(Card)(({ theme: { base: { spacing }, components: { card } } }) => {
-    return css `
-      min-width: 15rem;
-      ${StyledCardHeader}, ${StyledCardContent} {
-        padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);
-      }
-    `;
-});
-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));
-};
-export default DTMFKeypad;
-//# sourceMappingURL=DTMFKeypad.js.map

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

@@ -1 +0,0 @@
-{"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"]}