@pega/cosmos-react-cs 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,105 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledPrimary, StyledSecondary, Card, Status } from '@pega/cosmos-react-core';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import { StyledStopWatch } from './StopWatch';
+export const StyledCallContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
+    return css `
+      position: relative;
+      > ${StyledBackdrop} {
+        z-index: 0;
+      }
+
+      ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {
+        margin-inline-start: ${spacing};
+      }
+
+      > ${StyledSummaryItem} {
+        box-sizing: content-box;
+        position: relative;
+        height: 2rem;
+        padding-inline: calc(2 * ${spacing});
+        border-top: 0;
+        > ${StyledVisual} {
+          transform: rotate(50deg);
+        }
+        > ${StyledPrimary}, > ${StyledSecondary} {
+          align-self: center;
+        }
+      }
+
+      > ${StyledSummaryItem} ~ ${StyledSummaryItem} {
+        border-top: 0.125rem solid ${card.background};
+      }
+    `;
+});
+StyledCallContainer.defaultProps = defaultThemeProp;
+export const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['secondary-background']};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+
+    > ${StyledSummaryItem} {
+      height: 3rem;
+    }
+  `;
+});
+StyledIncomingContainer.defaultProps = defaultThemeProp;
+export const StyledHoldInfo = styled(Status) `
+  position: absolute;
+  top: 0;
+  transform: translateY(-50%);
+`;
+StyledHoldInfo.defaultProps = defaultThemeProp;
+export const StyledStatusRow = styled.div(({ theme: { components: { input: { height } } } }) => {
+    return css `
+      > * {
+        min-height: ${height};
+      }
+      > ${StyledStopWatch} {
+        line-height: ${height};
+      }
+    `;
+});
+StyledStatusRow.defaultProps = defaultThemeProp;
+export const StyledSLAProgress = styled(StyledProgressBar)(({ theme, slaDuration = 0, slaLevel }) => {
+    const { base: { colors } } = theme;
+    const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } = slaLevel !== undefined
+        ? [
+            { bgColor: colors.green['extra-light'], fgColor: colors.green.light },
+            { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },
+            { bgColor: colors.red['extra-light'], fgColor: colors.red.light }
+        ][slaLevel]
+        : { bgColor: colors.slate.light, fgColor: colors.slate.light };
+    return css `
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: ${bgColor};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+
+    /* Fancy way to restart the animation by changing it's name. */
+    @keyframes FillIn-${slaLevel} {
+      0% {
+        transform: translateX(-100%);
+      }
+
+      100% {
+        transform: translateX(0);
+      }
+    }
+
+    &::before {
+      background-color: ${fgColor};
+      border-radius: 0;
+      animation: FillIn-${slaLevel} ${slaDuration}s linear;
+    }
+  `;
+});
+StyledSLAProgress.defaultProps = defaultThemeProp;
+export const StyledCalleePicker = styled(Card) `
+  ${StyledTabPanel} {
+    height: 24rem;
+  }
+`;
+StyledCalleePicker.defaultProps = defaultThemeProp;
+//# sourceMappingURL=CallControlPanel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StyledBackdrop,\n  StyledButton,\n  StyledFlex,\n  StyledProgressBar,\n  StyledSummaryItemActions,\n  StyledVisual,\n  ProgressProps,\n  StyledSummaryItem,\n  StyledPrimary,\n  StyledSecondary,\n  Card,\n  Status\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledCallContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing },\n      components: { card }\n    }\n  }) => {\n    return css`\n      position: relative;\n      > ${StyledBackdrop} {\n        z-index: 0;\n      }\n\n      ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n        margin-inline-start: ${spacing};\n      }\n\n      > ${StyledSummaryItem} {\n        box-sizing: content-box;\n        position: relative;\n        height: 2rem;\n        padding-inline: calc(2 * ${spacing});\n        border-top: 0;\n        > ${StyledVisual} {\n          transform: rotate(50deg);\n        }\n        > ${StyledPrimary}, > ${StyledSecondary} {\n          align-self: center;\n        }\n      }\n\n      > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n        border-top: 0.125rem solid ${card.background};\n      }\n    `;\n  }\n);\n\nStyledCallContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    > ${StyledSummaryItem} {\n      height: 3rem;\n    }\n  `;\n});\n\nStyledIncomingContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(Status)`\n  position: absolute;\n  top: 0;\n  transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n  ({\n    theme: {\n      components: {\n        input: { height }\n      }\n    }\n  }) => {\n    return css`\n      > * {\n        min-height: ${height};\n      }\n      > ${StyledStopWatch} {\n        line-height: ${height};\n      }\n    `;\n  }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n  ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n  const {\n    base: { colors }\n  } = theme;\n\n  const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n    slaLevel !== undefined\n      ? [\n          { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n          { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n          { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n        ][slaLevel]\n      : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: ${bgColor};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    /* Fancy way to restart the animation by changing it's name. */\n    @keyframes FillIn-${slaLevel} {\n      0% {\n        transform: translateX(-100%);\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    &::before {\n      background-color: ${fgColor};\n      border-radius: 0;\n      animation: FillIn-${slaLevel} ${slaDuration}s linear;\n    }\n  `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCalleePicker = styled(Card)`\n  ${StyledTabPanel} {\n    height: 24rem;\n  }\n`;\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,120 @@
+import type { Ref } from 'react';
+import type { BannerProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { FloatingPanelProps } from './FloatingPanel';
+import { Contact } from './ContactList/ContactList.types';
+import type { TransferData, TransferReasonOption } from './CallHandover';
+export interface CallParticipant {
+    /** Caller id. */
+    id: string;
+    /** Caller's name. */
+    name: string;
+    /** Additional caller's info. */
+    info?: string;
+    /** Callback fired when the user ends the call. */
+    onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;
+}
+export interface CallProps {
+    /** Call identifier. */
+    id: string;
+    /** Timestamp when the call has begun. */
+    startedAt: number | Date;
+    /** Timestamp when the call has been put on hold. */
+    onHoldSince?: number | Date;
+    /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level
+     * time is up.
+     */
+    slaConfig?: number[];
+    /** Call participants. */
+    participants: CallParticipant[];
+    /** The flag whether the mic is muted on this call. */
+    muted?: boolean;
+    /** Callback fired when 'pause' icon has been clicked. */
+    onPauseToggle?: (id: CallProps['id']) => void;
+    /** Callback fired when 'mute' icon has been clicked. */
+    onMuteToggle: (id: CallProps['id']) => void;
+    /** Callback fired when 'Consult' action has been clicked. */
+    onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;
+    /** Callback fired when 'Conference' action has been clicked. */
+    onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;
+    /** Callback fired when 'Merge call' action has been chosen. */
+    onMergeCall?: (id: CallProps['id']) => void;
+    /** Callback fired for every dial pad key press. */
+    onDTMFPress?: (id: CallProps['id'], key: string) => void;
+    /** Callback fired when 'Transfer' action has been clicked. */
+    onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;
+    /** Callback fired when 'Transfer' action has been clicked. */
+    onHandOffCall?: (id: CallProps['id']) => void;
+    /** Callback fired when the user ends the call. */
+    onEndCall?: (id: CallProps['id']) => void;
+    /** Initial selected transfer reason */
+    defaultTransfer?: TransferReasonOption['id'];
+    /** Transfer reason options */
+    transferOptions: Readonly<TransferReasonOption[]>;
+    /** Initial selected interaction */
+    defaultInteraction?: TransferReasonOption['id'];
+    /** Interaction options */
+    interactionOptions?: Readonly<TransferReasonOption[]>;
+}
+export interface IncomingCallProps {
+    /** Call identifier. */
+    id: string;
+    /** Call participants. */
+    participant: CallParticipant;
+    /** Callback fired when the user ends the call. */
+    onRejectCall?: (id: CallProps['id']) => void;
+    /** Callback fired when the user accept the call. */
+    onAcceptCall: (id: CallProps['id']) => void;
+}
+export type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';
+export interface UserAvailabilityStatusOption {
+    readonly id: string;
+    readonly label: string;
+    readonly status: UserAvailabilityStatus;
+    readonly disabled?: boolean;
+}
+export interface InteractionTransferData {
+    onCancel: () => void;
+    onComplete: () => void;
+}
+export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
+    /** The heading rendered. */
+    heading: string;
+    /** User availability statuses. */
+    userStatus?: {
+        statusOptions: Readonly<UserAvailabilityStatusOption[]>;
+        /** User current status. */
+        status: UserAvailabilityStatusOption['id'];
+        /** Timestamp since the user is in the current status. */
+        inStatusSince: number | Date;
+        /**
+         * Callback fired when user changes their status.
+         * @param value new chosen status.
+         */
+        onChange: (value: UserAvailabilityStatusOption['id']) => void;
+    };
+    /** If true, the component will be draggable */
+    draggable?: boolean;
+    /** Region for messages: errors, notifications, etc. */
+    message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;
+    /**
+     * List of current calls. Having two or more not declared as "on hold" (onHoldSince defined) means there's
+     * a conference call.
+     */
+    calls: (CallProps | IncomingCallProps)[];
+    /**
+     * Callback fired on new call made by the user. 'Add call' button is not present if callback is not passed.
+     * @param phoneNumber the number chosen.
+     */
+    onAddCall?: (phoneNumber: string) => void;
+    /** Intraction transfer popup options. */
+    interactionTransfer?: InteractionTransferData;
+    /** An array of contacts objects. */
+    contactsList: Contact[];
+    /** Callback fired on adding/removing contact to/from favorites */
+    onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;
+    /** Flag driving panel visibility. */
+    visible?: FloatingPanelProps['visible'];
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=CallControlPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"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  /** Initial selected transfer reason */\n  defaultTransfer?: TransferReasonOption['id'];\n  /** Transfer reason options */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Initial selected interaction */\n  defaultInteraction?: TransferReasonOption['id'];\n  /** Interaction options */\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nexport interface IncomingCallProps {\n  /** Call identifier. */\n  id: string;\n  /** Call participants. */\n  participant: CallParticipant;\n  /** Callback fired when the user ends the call. */\n  onRejectCall?: (id: CallProps['id']) => void;\n  /** Callback fired when the user accept the call. */\n  onAcceptCall: (id: CallProps['id']) => void;\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  /** User availability statuses. */\n  userStatus?: {\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    /**\n     * Callback fired when user changes their status.\n     * @param value new chosen status.\n     */\n    onChange: (value: UserAvailabilityStatusOption['id']) => void;\n  };\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** Region for messages: errors, notifications, etc. */\n  message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;\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 | IncomingCallProps)[];\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  /** Intraction transfer popup options. */\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/CallControlPanelIcon.d.ts

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

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

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

package/lib/components/CallControlPanel/CallControlPanelIcon.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { defaultThemeProp, Icon, registerIcon, StyledAvatar, StyledIcon, useTheme, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';
+import * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';
+registerIcon(headsetIcon, eyeOffSolidIcon);
+const colorMapping = {
+    unavailable: 'slate-light',
+    available: 'green-light',
+    busy: 'red-medium',
+    after_work: 'orange-light',
+    logout: 'slate-light'
+};
+const iconMapping = {
+    unavailable: 'times',
+    available: undefined,
+    busy: 'minus',
+    after_work: 'clock',
+    logout: 'times'
+};
+const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }) => {
+    const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2);
+    const bgColor = colors[colorName][colorVariant];
+    const fgColor = readableColor(bgColor);
+    return css `
+      background-color: ${bgColor};
+      color: ${fgColor};
+    `;
+});
+StyledStatusIcon.defaultProps = defaultThemeProp;
+const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {
+    return css `
+    border-radius: 50%;
+    border: 0.0625rem solid ${theme.components['app-shell'].nav['background-color']};
+
+    ${StyledIcon} {
+      display: block;
+      width: 100%;
+      margin: 0 auto;
+    }
+  `;
+});
+StyledUserStatusIcon.defaultProps = defaultThemeProp;
+const StyledPanelVisibilityIcon = styled(Icon) `
+  width: 0.875rem;
+  height: 0.875rem;
+  fill: ${p => p.theme.base.colors.gray.medium};
+`;
+StyledPanelVisibilityIcon.defaultProps = defaultThemeProp;
+const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
+  ${StyledUserStatusIcon}, ${StyledPanelVisibilityIcon} {
+    position: absolute;
+    width: 0.875rem;
+    height: 0.875rem;
+    z-index: 1;
+  }
+
+  ${StyledUserStatusIcon} {
+    inset-block-start: -0.25rem;
+    inset-inline-end: -0.25rem;
+  }
+
+  ${StyledPanelVisibilityIcon} {
+    inset-block-end: -0.25rem;
+    inset-inline-end: -0.25rem;
+  }
+`;
+export const UserStatusIcon = memo(({ status = 'logout', variant }) => {
+    const { base: { colors } } = useTheme();
+    const [colorName, colorVariant] = colorMapping[status].split('-', 2);
+    const bgColor = colors[colorName][colorVariant];
+    const iconName = iconMapping[status];
+    return variant === 'dot' ? (_jsx("svg", { role: 'presentation', height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }) })) : (_jsx(StyledUserStatusIcon, { userStatus: status, children: iconName && _jsx(Icon, { name: iconName }) }));
+});
+const CallControlPanelIcon = memo(({ status = 'logout', label, panelVisible, ...restProps }) => {
+    return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, children: [_jsx(Icon, { name: 'headset' }), status !== 'available' && _jsx(UserStatusIcon, { variant: 'icon', status: status }), !panelVisible && _jsx(StyledPanelVisibilityIcon, { name: 'eye-off-solid' }), _jsx(VisuallyHiddenText, { children: label })] }));
+});
+export default CallControlPanelIcon;
+//# sourceMappingURL=CallControlPanelIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  NoChildrenProp,\n  OmitStrict,\n  StyledAvatar,\n  StyledIcon,\n  useTheme,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n  status?: UserAvailabilityStatus;\n  label: string;\n  panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n  variant: 'icon' | 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n  unavailable: 'slate-light',\n  available: 'green-light',\n  busy: 'red-medium',\n  after_work: 'orange-light',\n  logout: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconName | undefined> = {\n  unavailable: 'times',\n  available: undefined,\n  busy: 'minus',\n  after_work: 'clock',\n  logout: 'times'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n  ({\n    theme: {\n      base: { colors }\n    },\n    userStatus\n  }) => {\n    const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n      ThemeColor,\n      ThemeColorVariant\n    ];\n    const bgColor = colors[colorName][colorVariant];\n    const fgColor = readableColor(bgColor);\n    return css`\n      background-color: ${bgColor};\n      color: ${fgColor};\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    border: 0.0625rem solid ${theme.components['app-shell'].nav['background-color']};\n\n    ${StyledIcon} {\n      display: block;\n      width: 100%;\n      margin: 0 auto;\n    }\n  `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledPanelVisibilityIcon = styled(Icon)`\n  width: 0.875rem;\n  height: 0.875rem;\n  fill: ${p => p.theme.base.colors.gray.medium};\n`;\n\nStyledPanelVisibilityIcon.defaultProps = defaultThemeProp;\n\nconst StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n  ${StyledUserStatusIcon}, ${StyledPanelVisibilityIcon} {\n    position: absolute;\n    width: 0.875rem;\n    height: 0.875rem;\n    z-index: 1;\n  }\n\n  ${StyledUserStatusIcon} {\n    inset-block-start: -0.25rem;\n    inset-inline-end: -0.25rem;\n  }\n\n  ${StyledPanelVisibilityIcon} {\n    inset-block-end: -0.25rem;\n    inset-inline-end: -0.25rem;\n  }\n`;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n  ({ status = 'logout', variant }) => {\n    const {\n      base: { colors }\n    } = useTheme();\n    const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n      ThemeColor,\n      ThemeColorVariant\n    ];\n    const bgColor = colors[colorName][colorVariant];\n    const iconName = iconMapping[status];\n\n    return variant === 'dot' ? (\n      <svg\n        role='presentation'\n        height='1rem'\n        width='1rem'\n        viewBox='0 0 10 10'\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n      </svg>\n    ) : (\n      <StyledUserStatusIcon userStatus={status}>\n        {iconName && <Icon name={iconName} />}\n      </StyledUserStatusIcon>\n    );\n  }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n  ({ status = 'logout', label, panelVisible, ...restProps }) => {\n    return (\n      <StyledCallControlPanelIcon as={StyledAvatar} {...restProps} size='m' userStatus={status}>\n        <Icon name='headset' />\n        {status !== 'available' && <UserStatusIcon variant='icon' status={status} />}\n        {!panelVisible && <StyledPanelVisibilityIcon name='eye-off-solid' />}\n        <VisuallyHiddenText>{label}</VisuallyHiddenText>\n      </StyledCallControlPanelIcon>\n    );\n  }\n);\n\nexport default CallControlPanelIcon;\n"]}

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

@@ -0,0 +1,17 @@
+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;
+    /** Selected transferred interaction option identifier. */
+    transferredInteractionId?: TransferReasonOption['id'];
+}
+//# 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;IACpB,0DAA0D;IAC1D,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;CACvD"}

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  /** Selected transferred interaction option identifier. */\n  transferredInteractionId?: TransferReasonOption['id'];\n}\n"]}

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

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+import type { TransferData, TransferReasonOption } from './CallHandover.types';
+export type HandoverType = 'conferenceWithInteractions' | 'conferenceCallOnly' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
+export interface CallHandoverDialogProps {
+    target: HTMLElement | null;
+    type: HandoverType;
+    onCancel: () => void;
+    onSubmit: (data: TransferData) => void;
+    defaultTransfer?: TransferReasonOption['id'];
+    defaultInteraction?: TransferReasonOption['id'];
+    transferOptions: Readonly<TransferReasonOption[]>;
+    interactionOptions?: 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,MAAM,MAAM,YAAY,GACpB,4BAA4B,GAC5B,oBAAoB,GACpB,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,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7C,kBAAkB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChD,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAoJlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,56 @@
+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, interactionOptions, defaultTransfer, defaultInteraction }) => {
+    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 'conferenceCallOnly':
+            dialogHeading = t('call_panel_conference_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions, defaultTransfer: defaultTransfer, defaultInteraction: defaultInteraction }));
+            break;
+        case 'conferenceWithInteractions':
+            dialogHeading = t('call_panel_conference_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions, defaultTransfer: defaultTransfer, defaultInteraction: defaultInteraction }));
+            break;
+        case 'consultCallOnly':
+            dialogHeading = t('call_panel_consult_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions, defaultTransfer: defaultTransfer, defaultInteraction: defaultInteraction }));
+            break;
+        case 'consultWithInteractions':
+            dialogHeading = t('call_panel_consult_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions, defaultTransfer: defaultTransfer, defaultInteraction: defaultInteraction }));
+            break;
+        case 'transferCallOnly':
+            dialogHeading = t('call_panel_transfer_heading');
+            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions, defaultTransfer: defaultTransfer, defaultInteraction: defaultInteraction }));
+            break;
+        case 'transferWithInteractions':
+            dialogHeading = t('call_panel_transfer_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions, defaultTransfer: defaultTransfer, defaultInteraction: defaultInteraction }));
+            break;
+        default:
+            dialogHeading = '';
+            dialogContent = null;
+    }
+    return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
+            {
+                name: 'flip',
+                enabled: true,
+                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  | 'conferenceWithInteractions'\n  | 'conferenceCallOnly'\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  defaultTransfer?: TransferReasonOption['id'];\n  defaultInteraction?: TransferReasonOption['id'];\n  transferOptions: Readonly<TransferReasonOption[]>;\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n  target,\n  type,\n  onSubmit,\n  onCancel,\n  transferOptions,\n  interactionOptions,\n  defaultTransfer,\n  defaultInteraction\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 'conferenceCallOnly':\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          interactionOptions={interactionOptions}\n          defaultTransfer={defaultTransfer}\n          defaultInteraction={defaultInteraction}\n        />\n      );\n      break;\n    case 'conferenceWithInteractions':\n      dialogHeading = t('call_panel_conference_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call+interaction'\n          submitButtonText={t('call_panel_conference_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          defaultTransfer={defaultTransfer}\n          defaultInteraction={defaultInteraction}\n        />\n      );\n      break;\n    case 'consultCallOnly':\n      dialogHeading = t('call_panel_consult_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_consult_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          defaultTransfer={defaultTransfer}\n          defaultInteraction={defaultInteraction}\n        />\n      );\n      break;\n    case 'consultWithInteractions':\n      dialogHeading = t('call_panel_consult_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call+interaction'\n          submitButtonText={t('call_panel_consult_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          defaultTransfer={defaultTransfer}\n          defaultInteraction={defaultInteraction}\n        />\n      );\n      break;\n    case 'transferCallOnly':\n      dialogHeading = t('call_panel_transfer_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_submit')}\n          onCancel={onCancel}\n          variant='call'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          defaultTransfer={defaultTransfer}\n          defaultInteraction={defaultInteraction}\n        />\n      );\n      break;\n    case 'transferWithInteractions':\n      dialogHeading = t('call_panel_transfer_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_submit')}\n          onCancel={onCancel}\n          variant='call+interaction'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          defaultTransfer={defaultTransfer}\n          defaultInteraction={defaultInteraction}\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          enabled: true,\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/CallHandover/CallHandoverForm.d.ts

@@ -0,0 +1,31 @@
+import { FunctionComponent, Ref } from 'react';
+import type { TransferReasonOption, TransferData } from './CallHandover.types';
+export interface CallHandoverFormProps {
+    /**
+     * Callback fired on handover submission.
+     * @param data the transfer parameters.
+     */
+    onSubmit: (data: TransferData) => void;
+    /** Callback fired on clicking Cancel button. */
+    onCancel: () => void;
+    /** Current selected transfer reason */
+    defaultTransfer?: TransferReasonOption['id'];
+    /** Current selected interaction */
+    defaultInteraction?: TransferReasonOption['id'];
+    /** Transfer reason options. */
+    transferOptions: Readonly<TransferReasonOption[]>;
+    /** Interaction options. */
+    interactionOptions?: Readonly<TransferReasonOption[]>;
+    /** Reference to the root component. */
+    ref?: Ref<HTMLFormElement>;
+    /** 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> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+declare const CallHandoverForm: FunctionComponent<CallHandoverFormProps>;
+export default CallHandoverForm;
+//# sourceMappingURL=CallHandoverForm.d.ts.map

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,EAAsD,MAAM,OAAO,CAAC;AAmBnG,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,uCAAuC;IACvC,eAAe,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7C,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChD,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACtD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACtC,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB;;uDAMlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAmH9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, forwardRef } from 'react';
+import styled from 'styled-components';
+import { Button, registerIcon, defaultThemeProp, useI18n, TextArea, ComboBox, Form, Flex } 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 = forwardRef(function CallHandoverForm({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }, ref) {
+    const t = useI18n();
+    const [selectedContact, setSelectedContact] = useState();
+    const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);
+    const initialInteraction = interactionOptions?.find(interaction => interaction.id === defaultInteraction);
+    const [selectedReason, setSelectedReason] = useState(initialReason);
+    const [selectedInteraction, setSelectedInteraction] = useState(initialInteraction);
+    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' ? comments : true)), onClick: () => {
+                        if (!selectedContact)
+                            return;
+                        onSubmit({
+                            reason: selectedReason?.id,
+                            comments,
+                            interaction: variant === 'call+interaction',
+                            phoneNumber: selectedContact,
+                            transferredInteractionId: selectedInteraction?.id
+                        });
+                    }, children: submitButtonText })] }), ref: ref, children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
+                            items: selectedInteraction
+                                ? { id: selectedInteraction.id, text: selectedInteraction.label }
+                                : undefined
+                        }, menu: {
+                            items: interactionOptions.map(({ id, label }) => ({
+                                id,
+                                primary: label,
+                                selected: id === selectedInteraction?.id
+                            })),
+                            onItemClick: id => setSelectedInteraction(interactionOptions.find(option => option.id === id))
+                        } })), _jsx(ComboBox, { label: t('call_panel_handover_reason_label'), 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