@pega/cosmos-react-cs 3.0.0-dev.22.0 → 3.0.0-dev.23.2

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

@@ -1 +1 @@
-{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { FloatingPanelProps } from './FloatingPanel';\n\nexport interface 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  onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n  id: string;\n  label: string;\n}\n\nexport interface TransferData {\n  /** Selected reason option identifier. */\n  reason?: TransferReasonOption['id'];\n  /** Transfer comments. */\n  comments?: string;\n  /** Flag determining where interaction should be transferred along the call. */\n  interaction: boolean;\n  /** Phone number to transfer the call to. */\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'], transferData: TransferData) => void;\n  /** Callback fired when 'Conference' action has been clicked. */\n  onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => 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  /** Callback fired when 'Transfer' action has been clicked. */\n  onHandOffCall?: (id: CallProps['id']) => void;\n  /** Callback fired when the user ends the call. */\n  onEndCall?: (id: CallProps['id']) => void;\n  /**\n   * Transfer reason options\n   */\n  transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';\n\nexport interface UserAvailabilityStatusOption {\n  readonly id: string;\n  readonly label: string;\n  readonly status: UserAvailabilityStatus;\n  readonly disabled?: boolean;\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  /** Flag driving panel visibility. */\n  visible?: FloatingPanelProps['visible'];\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BannerProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { FloatingPanelProps } from './FloatingPanel';\nimport { Contact } from './ContactList/ContactList.types';\nimport type { TransferData, TransferReasonOption } from './CallHandover';\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  onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\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'], transferData: TransferData) => void;\n  /** Callback fired when 'Conference' action has been clicked. */\n  onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => 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  /** Callback fired when 'Transfer' action has been clicked. */\n  onHandOffCall?: (id: CallProps['id']) => void;\n  /** Callback fired when the user ends the call. */\n  onEndCall?: (id: CallProps['id']) => void;\n  /**\n   * Transfer reason options\n   */\n  transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';\n\nexport interface UserAvailabilityStatusOption {\n  readonly id: string;\n  readonly label: string;\n  readonly status: UserAvailabilityStatus;\n  readonly disabled?: boolean;\n}\n\nexport interface InteractionTransferData {\n  onCancel: () => void;\n  onComplete: () => void;\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?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;\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. 'Add call' button is not present if callback is not passed.\n   * @param phoneNumber the number chosen.\n   */\n  onAddCall?: (phoneNumber: string) => void;\n  /**\n   * Intraction transfer popup options.\n   */\n  interactionTransfer?: InteractionTransferData;\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  /** Flag driving panel visibility. */\n  visible?: FloatingPanelProps['visible'];\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CallControlPanel/CallHandover/CallHandover.types.d.ts

@@ -0,0 +1,15 @@
+export interface TransferReasonOption {
+    id: string;
+    label: string;
+}
+export interface TransferData {
+    /** Selected reason option identifier. */
+    reason?: TransferReasonOption['id'];
+    /** Transfer comments. */
+    comments?: string;
+    /** Flag determining where interaction should be transferred along the call. */
+    interaction: boolean;
+    /** Phone number to transfer the call to. */
+    phoneNumber: string;
+}
+//# sourceMappingURL=CallHandover.types.d.ts.map

package/lib/components/CallControlPanel/CallHandover/CallHandover.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandover.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TransferReasonOption {\n  id: string;\n  label: string;\n}\n\nexport interface TransferData {\n  /** Selected reason option identifier. */\n  reason?: TransferReasonOption['id'];\n  /** Transfer comments. */\n  comments?: string;\n  /** Flag determining where interaction should be transferred along the call. */\n  interaction: boolean;\n  /** Phone number to transfer the call to. */\n  phoneNumber: string;\n}\n"]}

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+import type { TransferData, TransferReasonOption } from './CallHandover.types';
+export declare type HandoverType = 'conference' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
+export interface CallHandoverDialogProps {
+    target: HTMLElement | null;
+    type: HandoverType;
+    onCancel: () => void;
+    onSubmit: (data: TransferData) => void;
+    transferOptions: Readonly<TransferReasonOption[]>;
+}
+declare const CallHandoverDialog: FunctionComponent<CallHandoverDialogProps>;
+export default CallHandoverDialog;
+//# sourceMappingURL=CallHandoverDialog.d.ts.map

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,oBAAY,YAAY,GACpB,YAAY,GACZ,0BAA0B,GAC1B,kBAAkB,GAClB,yBAAyB,GACzB,iBAAiB,CAAC;AAEtB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACnD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAkHlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Text, Button, Card, CardContent, CardHeader, Icon, Popover, useEscape, useFocusTrap, useI18n, useOuterEvent, getFocusables } from '@pega/cosmos-react-core';
+import CallHandoverForm from './CallHandoverForm';
+const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions }) => {
+    const popoverRef = useRef(null);
+    const t = useI18n();
+    useOuterEvent('mousedown', [popoverRef], onCancel);
+    useEscape(onCancel, popoverRef);
+    useFocusTrap(popoverRef);
+    useEffect(() => {
+        getFocusables(popoverRef)[0]?.focus();
+    }, []);
+    let dialogContent;
+    let dialogHeading;
+    switch (type) {
+        case 'conference':
+            dialogHeading = t('call_panel_conference_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions }));
+            break;
+        case 'consultCallOnly':
+            dialogHeading = t('call_panel_consult_with_call_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions }));
+            break;
+        case 'consultWithInteractions':
+            dialogHeading = t('call_panel_consult_with_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions }));
+            break;
+        case 'transferCallOnly':
+            dialogHeading = t('call_panel_transfer_with_call_heading');
+            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions }));
+            break;
+        case 'transferWithInteractions':
+            dialogHeading = t('call_panel_transfer_with_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions }));
+            break;
+        default:
+            dialogHeading = '';
+            dialogContent = null;
+    }
+    return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: ['bottom-end', 'left', 'right']
+                }
+            }
+        ], children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onCancel, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: dialogHeading }) }), _jsx(CardContent, { children: dialogContent })] }) }));
+};
+export default CallHandoverDialog;
+//# sourceMappingURL=CallHandoverDialog.js.map

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useRef } from 'react';\n\nimport {\n  Text,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Icon,\n  Popover,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport CallHandoverForm from './CallHandoverForm';\nimport type { TransferData, TransferReasonOption } from './CallHandover.types';\n\nexport type HandoverType =\n  | 'conference'\n  | 'transferWithInteractions'\n  | 'transferCallOnly'\n  | 'consultWithInteractions'\n  | 'consultCallOnly';\n\nexport interface CallHandoverDialogProps {\n  target: HTMLElement | null;\n  type: HandoverType;\n  onCancel: () => void;\n  onSubmit: (data: TransferData) => void;\n  transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n  target,\n  type,\n  onSubmit,\n  onCancel,\n  transferOptions\n}: CallHandoverDialogProps) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverRef], onCancel);\n  useEscape(onCancel, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  let dialogContent: ReactNode;\n  let dialogHeading: string;\n  switch (type) {\n    case 'conference':\n      dialogHeading = t('call_panel_conference_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_conference_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'consultCallOnly':\n      dialogHeading = t('call_panel_consult_with_call_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_consult_call_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'consultWithInteractions':\n      dialogHeading = t('call_panel_consult_with_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call+interaction'\n          submitButtonText={t('call_panel_consult_call_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'transferCallOnly':\n      dialogHeading = t('call_panel_transfer_with_call_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_call_submit')}\n          onCancel={onCancel}\n          variant='call'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'transferWithInteractions':\n      dialogHeading = t('call_panel_transfer_with_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_call_submit')}\n          onCancel={onCancel}\n          variant='call+interaction'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    default:\n      dialogHeading = '';\n      dialogContent = null;\n  }\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onCancel}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{dialogHeading}</Text>\n        </CardHeader>\n        <CardContent>{dialogContent}</CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default CallHandoverDialog;\n"]}

package/lib/components/CallControlPanel/{CallHandoverForm.d.ts → CallHandover/CallHandoverForm.d.ts}

@@ -1,17 +1,21 @@
 import { FunctionComponent, Ref } from 'react';
-import type { TransferReasonOption, TransferData } from './CallControlPanel.types';
+import type { TransferReasonOption, TransferData } from './CallHandover.types';
 export interface CallHandoverFormProps {
     /**
      * Callback fired on handover submission.
-     * @param transferParam the transfer parameters.
+     * @param data the transfer parameters.
      */
-    onSubmit: (transferParam: TransferData) => void;
+    onSubmit: (data: TransferData) => void;
     /** Callback fired on clicking Cancel button. */
     onCancel: () => void;
     /** Transfer reason options. */
     transferOptions: Readonly<TransferReasonOption[]>;
     /** Reference to the root component. */
     ref?: Ref<HTMLDivElement>;
+    /** Variant of component. */
+    variant?: 'call' | 'call+interaction';
+    /** Label of the submit button. */
+    submitButtonText: string;
 }
 export declare const StyledCallHandoverForm: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").FormProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const CallHandoverForm: FunctionComponent<CallHandoverFormProps>;

package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAyB,MAAM,OAAO,CAAC;AAkBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAI/E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACtC,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,oNAMlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAiF9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Button, registerIcon, defaultThemeProp, useI18n, TextArea, ComboBox, Form } from '@pega/cosmos-react-core';
+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 CalleePicker from '../ContactList/CalleePicker';
+registerIcon(timesIcon);
+export const StyledCallHandoverForm = styled(Form) `
+  min-width: 50ch;
+
+  ${StyledTabPanel} {
+    height: 24rem;
+  }
+`;
+StyledCallHandoverForm.defaultProps = defaultThemeProp;
+const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submitButtonText }) => {
+    const t = useI18n();
+    const [selectedReason, setSelectedReason] = useState();
+    const [selectedContact, setSelectedContact] = useState();
+    const [comments, setComments] = useState('');
+    return (_jsxs(StyledCallHandoverForm, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: !(selectedContact &&
+                        (variant === 'call+interaction' ? selectedReason && comments : true)), onClick: () => {
+                        if (!selectedContact)
+                            return;
+                        onSubmit({
+                            reason: selectedReason?.id,
+                            comments,
+                            interaction: variant === 'call+interaction',
+                            phoneNumber: selectedContact
+                        });
+                    }, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(_Fragment, { children: [_jsx(ComboBox, { label: t('call_panel_handover_reason_label'), required: true, selected: {
+                            items: selectedReason
+                                ? { id: selectedReason.id, text: selectedReason.label }
+                                : undefined
+                        }, menu: {
+                            items: transferOptions.map(({ id, label }) => ({
+                                id,
+                                primary: label,
+                                selected: id === selectedReason?.id
+                            })),
+                            onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))
+                        } }), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_handover_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) })] })), _jsx(CalleePicker, { selectedContact: selectedContact, onSelection: setSelectedContact, variant: 'select' })] }));
+};
+export default CallHandoverForm;
+//# sourceMappingURL=CallHandoverForm.js.map

package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, useState, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  registerIcon,\n  defaultThemeProp,\n  useI18n,\n  TextArea,\n  ComboBox,\n  Form\n} from '@pega/cosmos-react-core';\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 type { Contact } from '../ContactList';\nimport CalleePicker from '../ContactList/CalleePicker';\n\nimport type { TransferReasonOption, TransferData } from './CallHandover.types';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n  /**\n   * Callback fired on handover submission.\n   * @param data the transfer parameters.\n   */\n  onSubmit: (data: TransferData) => void;\n  /** Callback fired on clicking Cancel button. */\n  onCancel: () => void;\n  /** Transfer reason options. */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Variant of component. */\n  variant?: 'call' | 'call+interaction';\n  /** Label of the submit button. */\n  submitButtonText: string;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n  min-width: 50ch;\n\n  ${StyledTabPanel} {\n    height: 24rem;\n  }\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = ({\n  onCancel,\n  onSubmit,\n  transferOptions,\n  variant,\n  submitButtonText\n}: CallHandoverFormProps) => {\n  const t = useI18n();\n\n  const [selectedReason, setSelectedReason] = useState<TransferReasonOption>();\n  const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n  const [comments, setComments] = useState('');\n\n  return (\n    <StyledCallHandoverForm\n      actions={\n        <>\n          <Button variant='secondary' onClick={onCancel}>\n            {t('cancel')}\n          </Button>\n          <Button\n            variant='primary'\n            disabled={\n              !(\n                selectedContact &&\n                (variant === 'call+interaction' ? selectedReason && comments : true)\n              )\n            }\n            onClick={() => {\n              if (!selectedContact) return;\n              onSubmit({\n                reason: selectedReason?.id,\n                comments,\n                interaction: variant === 'call+interaction',\n                phoneNumber: selectedContact\n              });\n            }}\n          >\n            {submitButtonText}\n          </Button>\n        </>\n      }\n    >\n      {variant === 'call+interaction' && (\n        <>\n          <ComboBox\n            label={t('call_panel_handover_reason_label')}\n            required\n            selected={{\n              items: selectedReason\n                ? { id: selectedReason.id, text: selectedReason.label }\n                : undefined\n            }}\n            menu={{\n              items: transferOptions.map(({ id, label }) => ({\n                id,\n                primary: label,\n                selected: id === selectedReason?.id\n              })),\n              onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))\n            }}\n          />\n\n          <TextArea\n            name='comments'\n            required\n            label={t('call_panel_handover_comments_label')}\n            displayCharCount\n            maxLength={300}\n            value={comments}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n          />\n        </>\n      )}\n      <CalleePicker\n        selectedContact={selectedContact}\n        onSelection={setSelectedContact}\n        variant='select'\n      />\n    </StyledCallHandoverForm>\n  );\n};\n\nexport default CallHandoverForm;\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './CallHandoverDialog';
+export { default as CallHandoverForm } from './CallHandoverForm';
+export * from './CallHandover.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,sBAAsB,CAAC"}

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

@@ -0,0 +1,4 @@
+export { default } from './CallHandoverDialog';
+export { default as CallHandoverForm } from './CallHandoverForm';
+export * from './CallHandover.types';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,sBAAsB,CAAC","sourcesContent":["export { default } from './CallHandoverDialog';\nexport { default as CallHandoverForm } from './CallHandoverForm';\nexport * from './CallHandover.types';\n"]}

package/lib/components/CallControlPanel/{CalleePicker.d.ts → ContactList/CalleePicker.d.ts}

@@ -1,20 +1,18 @@
 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;
+    /** Currently selected number. */
+    selectedContact?: 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;
+    onSelection: (phoneNumber: string) => void;
+    /** Variant of the list. */
+    variant: 'action' | 'select';
     /** 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/ContactList/CalleePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalleePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkErE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, forwardRef, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { registerIcon, TabPanel, Tabs, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
+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 ContactList, { ContactsContext } from './ContactList';
+registerIcon(timesIcon);
+const StyledCalleePicker = styled.div(() => {
+    return css `
+    ${StyledTabPanel} {
+      height: 24rem;
+    }
+  `;
+});
+StyledCalleePicker.defaultProps = defaultThemeProp;
+const CalleePicker = forwardRef(({ selectedContact, onSelection, variant }, 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 tabs = [
+        { 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, { mode: 'default', ...(variant === 'action'
+                    ? {
+                        onCallButtonClick: onSelection
+                    }
+                    : {
+                        onDialButtonClick: charCode => onSelection(charCode === 127
+                            ? selectedContact?.slice(0, -1) ?? ''
+                            : (selectedContact ?? '') + String.fromCharCode(charCode))
+                    }) }));
+        return (_jsx(ContactList, { contacts: (tabId === 'favorites' ? favorites : contacts).map(contact => ({
+                ...contact,
+                selected: contact.phoneNumber === selectedContact
+            })), onFavoriteToggle: onFavoriteToggle, onItemClick: onSelection, variant: variant }));
+    };
+    return (_jsxs(StyledCalleePicker, { ref: ref, children: [_jsx(Tabs, { ref: tabsRef, tabs: tabs, type: 'horizontal', onTabClick: setCurrentTab, currentTabId: currentTab }), _jsx(TabPanel, { tabId: currentTab, children: tabContent(currentTab) })] }));
+});
+export default CalleePicker;
+//# sourceMappingURL=CalleePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useContext,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  TabPanel,\n  Tabs,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n\n} from '@pega/cosmos-react-core';\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 ContactList, { ContactsContext } from './ContactList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n  /** Currently selected number. */\n  selectedContact?: string;\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onSelection: (phoneNumber: string) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledCalleePicker = styled.div(() => {\n  return css`\n    ${StyledTabPanel} {\n      height: 24rem;\n    }\n  `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n  (\n    { selectedContact, onSelection, variant }: 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 tabs = [\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')\n        return (\n          <DialPad\n            mode='default'\n            {...(variant === 'action'\n              ? {\n                  onCallButtonClick: onSelection\n                }\n              : {\n                  onDialButtonClick: charCode =>\n                    onSelection(\n                      charCode === 127\n                        ? selectedContact?.slice(0, -1) ?? ''\n                        : (selectedContact ?? '') + String.fromCharCode(charCode)\n                    )\n                })}\n          />\n        );\n      return (\n        <ContactList\n          contacts={(tabId === 'favorites' ? favorites : contacts).map(contact => ({\n            ...contact,\n            selected: contact.phoneNumber === selectedContact\n          }))}\n          onFavoriteToggle={onFavoriteToggle}\n          onItemClick={onSelection}\n          variant={variant}\n        />\n      );\n    };\n\n    return (\n      <StyledCalleePicker ref={ref}>\n        <Tabs\n          ref={tabsRef}\n          tabs={tabs}\n          type='horizontal'\n          onTabClick={setCurrentTab}\n          currentTabId={currentTab}\n        />\n        <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n      </StyledCalleePicker>\n    );\n  }\n);\n\nexport default CalleePicker;\n"]}

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

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import type { Contact, ContactListProps } from './ContactList.types';
+export declare const ContactsContext: import("react").Context<{
+    contacts: Contact[];
+    onFavoriteToggle: ContactListProps['onFavoriteToggle'];
+}>;
+declare const ContactList: FunctionComponent<ContactListProps & ForwardProps>;
+export default ContactList;
+//# sourceMappingURL=ContactList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactList.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAkBb,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAqB,MAAM,qBAAqB,CAAC;AAiExF,eAAO,MAAM,eAAe;cAChB,OAAO,EAAE;sBACD,gBAAgB,CAAC,kBAAkB,CAAC;EAItD,CAAC;AAgDH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoFnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CallControlPanel/ContactList/ContactList.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Icon, registerIcon, Text, useI18n, ViewAll, StyledSummaryItemActions, StyledPrimary, StyledSecondary, useArrows, useConsolidatedRef, StyledCard, RadioButton, SummaryItem, StyledSummaryItem, StyledLabel } 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';
+import { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
+registerIcon(starIcon, starSolidIcon);
+const StyledContactList = styled.div(({ theme: { base, components } }) => {
+    return css `
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});
+
+    > ${StyledCard} > ${StyledCardContent} {
+      padding: 0;
+      gap: 0;
+    }
+
+    ul {
+      list-style: none;
+    }
+
+    ${StyledRadioCheckCard} {
+      background-color: transparent;
+      border: 0;
+      padding: 0 calc(0.5 * ${base.spacing});
+      height: ${components.button.height};
+      align-items: center;
+      border-radius: 0;
+
+      > ${StyledLabel} {
+        max-width: 100%;
+        width: 100%;
+        margin: 0;
+      }
+    }
+
+    li {
+      padding: 0;
+      height: calc(${components.button.height} + 0.125rem);
+
+      :not(:last-child) {
+        border-bottom: 0.0625rem solid ${base.palette['border-line']};
+      }
+    }
+
+    ${StyledSummaryItem} {
+      > ${StyledPrimary}, > ${StyledSecondary} {
+        align-self: center;
+        font-weight: ${base['font-weight'].normal};
+      }
+    }
+
+    ${StyledSummaryItemActions} {
+      color: ${base.palette.interactive};
+    }
+
+    @media (pointer: 'coarse') {
+      li {
+        height: ${components.button.touch.height};
+      }
+    }
+  `;
+});
+StyledContactList.defaultProps = defaultThemeProp;
+export const ContactsContext = createContext({
+    contacts: [],
+    onFavoriteToggle: () => { }
+});
+const SelectableContactItem = ({ id, primary, secondary, checked, container, onChange }) => {
+    return (_jsx("li", { children: _jsx(RadioButton, { card: true, variant: 'card', label: _jsx(SummaryItem, { id: id, primary: primary, secondary: secondary, container: container }), checked: checked, onChange: onChange, name: `${id}-contact` }) }, id));
+};
+const CallableContactItem = ({ visual, primary, secondary, onClick, container }) => {
+    return (_jsx("li", { children: _jsx(BareRoleButton, { onClick: onClick, children: _jsx(SummaryItem, { visual: visual, primary: primary, secondary: secondary, container: container, actions: _jsx(Icon, { name: 'phone-solid' }) }) }) }));
+};
+const ContactList = forwardRef(({ contacts: items, onItemClick, onFavoriteToggle, variant }, 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' }) })), [onFavoriteToggle]);
+    const createList = (list) => {
+        return list.map(item => {
+            const commonOpts = {
+                id: item.phoneNumber,
+                primary: item.primary,
+                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }),
+                container: {
+                    areas: '"visual primary secondary actions"',
+                    cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'
+                }
+            };
+            return variant === 'select'
+                ? {
+                    ...commonOpts,
+                    as: SelectableContactItem,
+                    checked: item.selected,
+                    onChange: () => onItemClick(item.phoneNumber)
+                }
+                : {
+                    ...commonOpts,
+                    as: CallableContactItem,
+                    visual: favoriteButton(item.phoneNumber, item.favorite),
+                    onClick: () => onItemClick(item.phoneNumber)
+                };
+        });
+    };
+    useArrows(containerRef, { selector: ':scope ul [role="button"]' });
+    return (_jsx(ViewAll, { as: StyledContactList, ref: containerRef, items: searchText
+            ? createList(items.filter(({ phoneNumber, primary, secondary }) => {
+                return (primary.toLowerCase().includes(searchText.toLowerCase()) ||
+                    secondary.toLowerCase().includes(searchText.toLowerCase()) ||
+                    phoneNumber.toLowerCase().includes(searchText.toLowerCase()));
+            }))
+            : createList(items), searchInputProps: { onSearchChange } }));
+});
+export default ContactList;
+//# sourceMappingURL=ContactList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\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  useI18n,\n  ViewAll,\n  StyledSummaryItemActions,\n  StyledPrimary,\n  StyledSecondary,\n  useArrows,\n  useConsolidatedRef,\n  StyledCard,\n  RadioButton,\n  RadioButtonProps,\n  SummaryItemProps,\n  SummaryItem,\n  StyledSummaryItem,\n  StyledLabel\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';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton, {\n  BareRoleButtonProps\n} from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n    > ${StyledCard} > ${StyledCardContent} {\n      padding: 0;\n      gap: 0;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    ${StyledRadioCheckCard} {\n      background-color: transparent;\n      border: 0;\n      padding: 0 calc(0.5 * ${base.spacing});\n      height: ${components.button.height};\n      align-items: center;\n      border-radius: 0;\n\n      > ${StyledLabel} {\n        max-width: 100%;\n        width: 100%;\n        margin: 0;\n      }\n    }\n\n    li {\n      padding: 0;\n      height: calc(${components.button.height} + 0.125rem);\n\n      :not(:last-child) {\n        border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      }\n    }\n\n    ${StyledSummaryItem} {\n      > ${StyledPrimary}, > ${StyledSecondary} {\n        align-self: center;\n        font-weight: ${base['font-weight'].normal};\n      }\n    }\n\n    ${StyledSummaryItemActions} {\n      color: ${base.palette.interactive};\n    }\n\n    @media (pointer: 'coarse') {\n      li {\n        height: ${components.button.touch.height};\n      }\n    }\n  `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n  contacts: Contact[];\n  onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n  contacts: [],\n  onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n  id,\n  primary,\n  secondary,\n  checked,\n  container,\n  onChange\n}: SummaryItemProps & RadioButtonProps) => {\n  return (\n    <li key={id}>\n      <RadioButton\n        card\n        variant='card'\n        label={\n          <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n        }\n        checked={checked}\n        onChange={onChange}\n        name={`${id}-contact`}\n      />\n    </li>\n  );\n};\n\nconst CallableContactItem = ({\n  visual,\n  primary,\n  secondary,\n  onClick,\n  container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n  return (\n    <li>\n      <BareRoleButton onClick={onClick}>\n        <SummaryItem\n          visual={visual}\n          primary={primary}\n          secondary={secondary}\n          container={container}\n          actions={<Icon name='phone-solid' />}\n        />\n      </BareRoleButton>\n    </li>\n  );\n};\n\nconst ContactList: FunctionComponent<ContactListProps & ForwardProps> = forwardRef(\n  (\n    { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n    ref: ContactListProps['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: SelectableContact[]) => {\n      return list.map(item => {\n        const commonOpts = {\n          id: item.phoneNumber,\n          primary: item.primary,\n          secondary: <Text variant='secondary'>{item.secondary}</Text>,\n          container: {\n            areas: '\"visual primary secondary actions\"',\n            cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n          }\n        };\n        return variant === 'select'\n          ? {\n              ...commonOpts,\n              as: SelectableContactItem,\n              checked: item.selected,\n              onChange: () => onItemClick(item.phoneNumber)\n            }\n          : {\n              ...commonOpts,\n              as: CallableContactItem,\n              visual: favoriteButton(item.phoneNumber, item.favorite),\n              onClick: () => onItemClick(item.phoneNumber)\n            };\n      });\n    };\n\n    useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n    return (\n      <ViewAll\n        as={StyledContactList}\n        ref={containerRef}\n        items={\n          searchText\n            ? createList(\n                items.filter(({ phoneNumber, primary, secondary }) => {\n                  return (\n                    primary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    secondary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n                  );\n                })\n              )\n            : createList(items)\n        }\n        searchInputProps={{ onSearchChange }}\n      />\n    );\n  }\n);\n\nexport default ContactList;\n"]}

package/lib/components/CallControlPanel/ContactList/ContactList.types.d.ts

@@ -0,0 +1,30 @@
+import { Ref } from 'react';
+export interface Contact {
+    /** Contact phone number */
+    phoneNumber: string;
+    /** Contact name  */
+    primary: string;
+    /** Additional contact information */
+    secondary: string;
+    /** Determines if contact is favorite */
+    favorite: boolean;
+}
+export interface SelectableContact extends Contact {
+    selected?: boolean;
+}
+export interface ContactListProps {
+    /** An array of contacts objects. */
+    contacts: SelectableContact[];
+    /**
+     * The click handler for the items.
+     * @param phoneNumber the number chosen.
+     */
+    onItemClick: (phoneNumber: string) => void;
+    /** Callback fired on adding/removing contact to/from favorites */
+    onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;
+    /** Variant of the list. */
+    variant: 'action' | 'select';
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=ContactList.types.d.ts.map

package/lib/components/CallControlPanel/ContactList/ContactList.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactList.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,WAAW,OAAO;IACtB,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B;;;OAGG;IACH,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactList.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nexport interface 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 SelectableContact extends Contact {\n  selected?: boolean;\n}\n\nexport interface ContactListProps {\n  /** An array of contacts objects. */\n  contacts: SelectableContact[];\n  /**\n   * The click handler for the items.\n   * @param phoneNumber the number chosen.\n   */\n  onItemClick: (phoneNumber: string) => void;\n  /** Callback fired on adding/removing contact to/from favorites */\n  onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default, ContactsContext } from './ContactList';
+export type { ContactListProps, Contact } from './ContactList.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACzD,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default, ContactsContext } from './ContactList';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default, ContactsContext } from './ContactList';\nexport type { ContactListProps, Contact } from './ContactList.types';\n"]}

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

@@ -1,4 +1,5 @@
-export { CallProps, CallParticipant, CallControlPanelProps, UserAvailabilityStatusOption, TransferData, TransferReasonOption } from './CallControlPanel.types';
+export { CallProps, CallParticipant, CallControlPanelProps, UserAvailabilityStatusOption } from './CallControlPanel.types';
 export { default as ExternalCTI } from './ExternalCTI';
 export { default } from './CallControlPanel';
+export type { TransferData } from './CallHandover/CallHandover.types';
 //# sourceMappingURL=index.d.ts.map