@pega/cosmos-react-cs 2.0.0-dev.9.4 → 2.0.0-rc.1

package/lib/components/CallControlPanel/CallTransfer.js

@@ -0,0 +1,121 @@
+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

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

@@ -0,0 +1,20 @@
+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

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

@@ -0,0 +1,61 @@
+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

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

@@ -0,0 +1,23 @@
+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

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

@@ -0,0 +1,88 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

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

@@ -0,0 +1,23 @@
+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

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

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+interface StopWatchProps {
+    startTime: number | Date;
+    timeout?: number | Date;
+}
+export declare const StyledStopWatch: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<import("@pega/cosmos-react-core").TextProps, "variant"> & Required<Pick<import("@pega/cosmos-react-core").TextProps, "variant">>, never>;
+declare const StopWatch: FunctionComponent<StopWatchProps>;
+export default StopWatch;
+//# sourceMappingURL=StopWatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StopWatch.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAOzE,UAAU,cAAc;IACtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,qRAG3B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAwBhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/CallControlPanel/StopWatch.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef, useLayoutEffect } from 'react';
+import styled from 'styled-components';
+import { StyledText, Text } from '@pega/cosmos-react-core';
+import { formatDuration } from './utils';
+export const StyledStopWatch = styled(StyledText) `
+  min-width: 8ch;
+  text-align: end;
+`;
+const StopWatch = memo(({ startTime, timeout }) => {
+    const clockRef = useRef(null);
+    const millis = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;
+    const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : timeout;
+    useLayoutEffect(() => {
+        const timer = setInterval(() => {
+            if (clockRef.current) {
+                let content = formatDuration(Date.now() - millis);
+                if (timeoutMillis)
+                    content += ` / ${formatDuration(timeoutMillis)}`;
+                clockRef.current.textContent = content;
+            }
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [startTime, timeoutMillis]);
+    return (_jsxs(Text, { as: StyledStopWatch, ref: clockRef, children: [formatDuration(Date.now() - millis), timeoutMillis && ` / ${formatDuration(timeoutMillis)}`] }, void 0));
+});
+export default StopWatch;
+//# sourceMappingURL=StopWatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAOzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,MAAM,aAAa,GAAG,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAEvF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,YAClD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, memo, useRef, useLayoutEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n  startTime: number | Date;\n  timeout?: number | Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n  min-width: 8ch;\n  text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n  ({ startTime, timeout }: StopWatchProps) => {\n    const clockRef = useRef<HTMLSpanElement>(null);\n    const millis = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;\n    const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : timeout;\n\n    useLayoutEffect(() => {\n      const timer = setInterval(() => {\n        if (clockRef.current) {\n          let content = formatDuration(Date.now() - millis);\n          if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n          clockRef.current.textContent = content;\n        }\n      }, 1000);\n      return () => clearInterval(timer);\n    }, [startTime, timeoutMillis]);\n\n    return (\n      <Text as={StyledStopWatch} ref={clockRef}>\n        {formatDuration(Date.now() - millis)}\n        {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n      </Text>\n    );\n  }\n);\n\nexport default StopWatch;\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './CallControlPanel';
+export { CallControlPanelProps } from './CallControlPanel.types';
+export { default as CallControlPanelIcon } from './CallControlPanelIcon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/CallControlPanel/index.js

@@ -0,0 +1,3 @@
+export { default } from './CallControlPanel';
+export { default as CallControlPanelIcon } from './CallControlPanelIcon';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default } from './CallControlPanel';\nexport { CallControlPanelProps } from './CallControlPanel.types';\nexport { default as CallControlPanelIcon } from './CallControlPanelIcon';\n"]}

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

@@ -0,0 +1,7 @@
+export declare const formatDuration: (millis: number) => string;
+export declare const calculateSla: (callDuration: number, slaConfig?: number[] | undefined) => {
+    slaTimeout?: number;
+    slaDuration?: number;
+    currentSlaLevel?: number;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,uCAEnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA6B1B,CAAC"}

package/lib/components/CallControlPanel/utils.js

@@ -0,0 +1,35 @@
+import { triple } from '@pega/cosmos-react-core';
+export const formatDuration = (millis) => {
+    const seconds = Math.round(millis / 1000);
+    return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;
+};
+export const calculateSla = (callDuration, slaConfig) => {
+    let slaLevel = 0;
+    let lastSlaTimeout = 0;
+    if (!slaConfig) {
+        return {
+            slaTimeout: undefined,
+            slaDuration: undefined,
+            currentSlaLevel: undefined
+        };
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {
+        const slaInMillis = slaTimeoutInSeconds * 1000;
+        if (callDuration < slaInMillis) {
+            return {
+                slaTimeout: slaInMillis,
+                slaDuration: slaTimeoutInSeconds - prevSlaTimeout,
+                currentSlaLevel: slaLevel
+            };
+        }
+        slaLevel += 1;
+        lastSlaTimeout = slaInMillis;
+    }
+    return {
+        slaTimeout: lastSlaTimeout,
+        slaDuration: 0,
+        currentSlaLevel: slaLevel
+    };
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,gDAAgD;IAChD,KAAK,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1F,MAAM,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAAC;QAC/C,IAAI,YAAY,GAAG,WAAW,EAAE;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,WAAW,EAAE,mBAAmB,GAAG,cAAc;gBACjD,eAAe,EAAE,QAAQ;aAC1B,CAAC;SACH;QACD,QAAQ,IAAI,CAAC,CAAC;QACd,cAAc,GAAG,WAAW,CAAC;KAC9B;IACD,OAAO;QACL,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,QAAQ;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '@pega/cosmos-react-core';\n\nexport const formatDuration = (millis: number): string => {\n  const seconds = Math.round(millis / 1000);\n  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nexport const calculateSla = (\n  callDuration: number,\n  slaConfig?: number[]\n): {\n  slaTimeout?: number;\n  slaDuration?: number;\n  currentSlaLevel?: number;\n} => {\n  let slaLevel = 0;\n  let lastSlaTimeout = 0;\n  if (!slaConfig) {\n    return {\n      slaTimeout: undefined,\n      slaDuration: undefined,\n      currentSlaLevel: undefined\n    };\n  }\n  // eslint-disable-next-line no-restricted-syntax\n  for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {\n    const slaInMillis = slaTimeoutInSeconds * 1000;\n    if (callDuration < slaInMillis) {\n      return {\n        slaTimeout: slaInMillis,\n        slaDuration: slaTimeoutInSeconds - prevSlaTimeout,\n        currentSlaLevel: slaLevel\n      };\n    }\n    slaLevel += 1;\n    lastSlaTimeout = slaInMillis;\n  }\n  return {\n    slaTimeout: lastSlaTimeout,\n    slaDuration: 0,\n    currentSlaLevel: slaLevel\n  };\n};\n"]}

package/lib/components/DialPad/DialPad.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { DialPadKeyboardProps } from './DialPadKeyboard';
+export interface DialPadProps extends NoChildrenProp {
+    /** Callback fired on call button click */
+    onCallButtonClick?: (phoneNumber: string) => void;
+    /** On keypad button press callback */
+    onDialButtonClick?: (charCode: number) => void;
+    /** Keypad mode, regular or DTMF. */
+    mode: DialPadKeyboardProps['mode'];
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const DialPad: FunctionComponent<DialPadProps & ForwardProps>;
+export default DialPad;
+//# sourceMappingURL=DialPad.d.ts.map

package/lib/components/DialPad/DialPad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA+C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}