@pega/cosmos-react-cs 3.0.0-dev.12.0 → 3.0.0-dev.13.0

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

package/lib/components/CallControlPanel/CallControlPanelIcon.js

@@ -7,18 +7,18 @@ import * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/
 import * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';
 registerIcon(headsetIcon, eyeOffSolidIcon);
 const colorMapping = {
-    offline: 'slate-light',
+    unavailable: 'slate-light',
     available: 'green-light',
     busy: 'red-medium',
-    away: 'orange-light',
-    not_available: 'slate-light'
+    after_work: 'orange-light',
+    logout: 'slate-light'
 };
 const iconMapping = {
-    offline: 'times',
+    unavailable: 'times',
     available: undefined,
     busy: 'minus',
-    away: 'clock',
-    not_available: 'reset'
+    after_work: 'clock',
+    logout: 'times'
 };
 const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }) => {
     const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2);
@@ -59,14 +59,14 @@ export const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
   }
 `;
 StyledCallControlPanelIcon.defaultProps = defaultThemeProp;
-export const UserStatusIcon = memo(({ status = 'offline', variant }) => {
+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: 'img', "aria-hidden": true, height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }) })) : (_jsx(StyledStatusIcon, { as: StyledUserStatusIcon, userStatus: status, children: iconName && _jsx(Icon, { name: iconName }) }));
 });
-const CallControlPanelIcon = memo(({ status = 'offline', label, panelVisible, ...restProps }) => {
+const CallControlPanelIcon = memo(({ status = 'logout', label, panelVisible, ...restProps }) => {
     const iconName = iconMapping[status];
     return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' })] }));
 });

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

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

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

@@ -0,0 +1,19 @@
+import { FunctionComponent, Ref } from 'react';
+import type { TransferReasonOption, TransferData } from './CallControlPanel.types';
+export interface CallHandoverFormProps {
+    /**
+     * Callback fired on handover submission.
+     * @param transferParam the transfer parameters.
+     */
+    onSubmit: (transferParam: TransferData) => void;
+    /** Callback fired on clicking Cancel button. */
+    onCancel: () => void;
+    /** Transfer reason options. */
+    transferOptions: Readonly<TransferReasonOption[]>;
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+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>;
+export default CallHandoverForm;
+//# sourceMappingURL=CallHandoverForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAkC,MAAM,OAAO,CAAC;AAmB3F,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AAK5F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,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;CAC3B;AAED,eAAO,MAAM,sBAAsB,oNAElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAmI9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallHandoverForm.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState, useMemo } from 'react';
+import styled from 'styled-components';
+import { Button, Icon, registerIcon, defaultThemeProp, useI18n, RadioButtonGroup, RadioButton, TextArea, ComboBox, Form, createStringMatcher } from '@pega/cosmos-react-core';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import { ContactsContext } from './CalleePicker';
+registerIcon(timesIcon);
+export const StyledCallHandoverForm = styled(Form) `
+  min-width: 50ch;
+`;
+StyledCallHandoverForm.defaultProps = defaultThemeProp;
+const CallHandoverForm = ({ onCancel: onClose, onSubmit: onTransferCall, transferOptions }) => {
+    const t = useI18n();
+    const { contacts } = useContext(ContactsContext);
+    const [selectedReason, setSelectedReason] = useState();
+    const [selectedContact, setSelectedContact] = useState();
+    const [filterValue, setFilterValue] = useState('');
+    const [comments, setComments] = useState('');
+    const [interaction, setInteraction] = useState(true);
+    const contactsToRender = useMemo(() => {
+        let items = contacts;
+        if (filterValue) {
+            const matcher = createStringMatcher(filterValue, 'boundary');
+            items = items.filter(item => matcher.test(item.primary) || matcher.test(item.phoneNumber));
+        }
+        return items.map(({ phoneNumber, primary, secondary, favorite }) => ({
+            id: phoneNumber,
+            primary,
+            secondary: [secondary],
+            visual: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }),
+            selected: phoneNumber === selectedContact?.phoneNumber
+        }));
+    }, [filterValue, selectedContact, contacts]);
+    const clearSelection = () => {
+        setSelectedContact(undefined);
+    };
+    return (_jsxs(Form, { as: StyledCallHandoverForm, actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: onClose, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: !(selectedContact && (!interaction || (selectedReason && comments))), onClick: () => {
+                        if (!selectedContact)
+                            return;
+                        onTransferCall({
+                            reason: selectedReason?.id,
+                            comments,
+                            interaction,
+                            phoneNumber: selectedContact.phoneNumber
+                        });
+                    }, children: t('submit') })] }), children: [_jsxs(RadioButtonGroup, { name: t('call_panel_handover_call_option_label'), children: [_jsx(RadioButton, { label: t('call_panel_handover_call_and_interaction_option'), defaultChecked: true, onChange: () => setInteraction(true) }), _jsx(RadioButton, { label: t('call_panel_handover_call_only_option'), onChange: () => setInteraction(false) })] }), _jsx(ComboBox, { label: t('call_panel_handover_reason_label'), required: interaction, disabled: !interaction, 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: interaction, disabled: !interaction, label: t('call_panel_handover_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) }), _jsx(ComboBox, { label: t('call_panel_handover_to_label'), required: true, selected: selectedContact
+                    ? {
+                        items: {
+                            id: selectedContact.phoneNumber,
+                            text: selectedContact.primary
+                        }
+                    }
+                    : undefined, value: filterValue, onChange: (e) => {
+                    if (!e.target.value)
+                        clearSelection();
+                    setFilterValue(e.target.value);
+                }, onBlur: () => {
+                    setFilterValue('');
+                }, menu: {
+                    items: contactsToRender,
+                    onItemClick: phoneNumber => {
+                        setFilterValue('');
+                        setSelectedContact(contacts.find(contact => contact.phoneNumber === phoneNumber));
+                    },
+                    emptyText: t('no_items')
+                } })] }));
+};
+export default CallHandoverForm;
+//# sourceMappingURL=CallHandoverForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, FunctionComponent, Ref, useState, useMemo, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Icon,\n  registerIcon,\n  defaultThemeProp,\n  useI18n,\n  RadioButtonGroup,\n  RadioButton,\n  TextArea,\n  ComboBox,\n  Form,\n  createStringMatcher,\n  MenuProps\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { TransferReasonOption, TransferData, Contact } from './CallControlPanel.types';\nimport { ContactsContext } from './CalleePicker';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n  /**\n   * Callback fired on handover submission.\n   * @param transferParam the transfer parameters.\n   */\n  onSubmit: (transferParam: 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}\n\nexport const StyledCallHandoverForm = styled(Form)`\n  min-width: 50ch;\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = ({\n  onCancel: onClose,\n  onSubmit: onTransferCall,\n  transferOptions\n}: CallHandoverFormProps) => {\n  const t = useI18n();\n  const { contacts } = useContext(ContactsContext);\n  const [selectedReason, setSelectedReason] = useState<TransferReasonOption>();\n  const [selectedContact, setSelectedContact] = useState<Contact>();\n  const [filterValue, setFilterValue] = useState('');\n  const [comments, setComments] = useState('');\n  const [interaction, setInteraction] = useState(true);\n\n  const contactsToRender = useMemo<MenuProps['items']>(() => {\n    let items = contacts;\n    if (filterValue) {\n      const matcher = createStringMatcher(filterValue, 'boundary');\n      items = items.filter(item => matcher.test(item.primary) || matcher.test(item.phoneNumber));\n    }\n\n    return items.map(({ phoneNumber, primary, secondary, favorite }) => ({\n      id: phoneNumber,\n      primary,\n      secondary: [secondary],\n      visual: <Icon name={favorite ? 'star-solid' : 'star'} />,\n      selected: phoneNumber === selectedContact?.phoneNumber\n    }));\n  }, [filterValue, selectedContact, contacts]);\n\n  const clearSelection = () => {\n    setSelectedContact(undefined);\n  };\n\n  return (\n    <Form\n      as={StyledCallHandoverForm}\n      actions={\n        <>\n          <Button variant='secondary' onClick={onClose}>\n            {t('cancel')}\n          </Button>\n          <Button\n            variant='primary'\n            disabled={!(selectedContact && (!interaction || (selectedReason && comments)))}\n            onClick={() => {\n              if (!selectedContact) return;\n              onTransferCall({\n                reason: selectedReason?.id,\n                comments,\n                interaction,\n                phoneNumber: selectedContact.phoneNumber\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      }\n    >\n      <RadioButtonGroup name={t('call_panel_handover_call_option_label')}>\n        <RadioButton\n          label={t('call_panel_handover_call_and_interaction_option')}\n          defaultChecked\n          onChange={() => setInteraction(true)}\n        />\n        <RadioButton\n          label={t('call_panel_handover_call_only_option')}\n          onChange={() => setInteraction(false)}\n        />\n      </RadioButtonGroup>\n\n      <ComboBox\n        label={t('call_panel_handover_reason_label')}\n        required={interaction}\n        disabled={!interaction}\n        selected={{\n          items: selectedReason ? { id: selectedReason.id, text: selectedReason.label } : 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={interaction}\n        disabled={!interaction}\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      <ComboBox\n        label={t('call_panel_handover_to_label')}\n        required\n        selected={\n          selectedContact\n            ? {\n                items: {\n                  id: selectedContact.phoneNumber,\n                  text: selectedContact.primary\n                }\n              }\n            : undefined\n        }\n        value={filterValue}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (!e.target.value) clearSelection();\n          setFilterValue(e.target.value);\n        }}\n        onBlur={() => {\n          setFilterValue('');\n        }}\n        menu={{\n          items: contactsToRender,\n          onItemClick: phoneNumber => {\n            setFilterValue('');\n            setSelectedContact(contacts.find(contact => contact.phoneNumber === phoneNumber));\n          },\n          emptyText: t('no_items')\n        }}\n      />\n    </Form>\n  );\n};\n\nexport default CallHandoverForm;\n"]}

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

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

package/lib/components/CallControlPanel/ExternalCTI.js

@@ -22,7 +22,7 @@ const StyledCTIContainer = styled.div `
 `;
 StyledCTIContainer.defaultProps = defaultThemeProp;
 const ExternalCTI = forwardRef(({ heading, draggable = false, size }, ref) => {
-    return (_jsx(StyledExternalCTIPanel, { heading: heading, draggable: draggable, content: _jsx(StyledCTIContainer, { style: size
+    return (_jsx(StyledExternalCTIPanel, { heading: heading, draggable: draggable, children: _jsx(StyledCTIContainer, { style: size
                 ? {
                     '--cti-container-width': `${size.width}px`,
                     '--cti-container-height': `${size.height}px`

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

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

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

@@ -16,7 +16,7 @@ export interface FloatingPanelProps {
     /** The heading rendered. */
     heading: string;
     /** Content of the panel */
-    content: ReactNode;
+    children: ReactNode;
     /** Action button to be rendered in header */
     actions?: FloatingPanelActionProps[];
     /** If true, the component will be draggable */

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

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

package/lib/components/CallControlPanel/FloatingPanel.js

@@ -41,7 +41,7 @@ export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isD
   `;
 });
 StyledFloatingPanel.defaultProps = defaultThemeProp;
-const FloatingPanel = forwardRef(({ heading, actions = [], draggable, content: cardContent, ...restProps }, ref) => {
+const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children, ...restProps }, ref) => {
     const t = useI18n();
     const [collapsed, setCollapsed] = useState(false);
     const containerRef = useConsolidatedRef(ref);
@@ -57,7 +57,7 @@ const FloatingPanel = forwardRef(({ heading, actions = [], draggable, content: c
                             _jsx(Icon, { name: icon })))), _jsx(Button, { icon: true, variant: 'simple', label: t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
                                 resetPopoverToDefaultPosition(containerRef);
                                 setCollapsed(state => !state);
-                            }, children: _jsx(Icon, { name: 'caret-down' }) }, 'expand-collapse')] }), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'phone-solid' }), _jsx(Text, { variant: 'h3', children: heading })] }) }), cardContent] }));
+                            }, children: _jsx(Icon, { name: 'caret-down' }) }, 'expand-collapse')] }), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'phone-solid' }), _jsx(Text, { variant: 'h3', children: heading })] }) }), children] }));
 });
 export default FloatingPanel;
 //# sourceMappingURL=FloatingPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable,\n  Action,\n  IconNames,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n  /** A string to uniquely identify this Action within the onClick handler. */\n  id: Action['id'];\n  /** The text content of the Action. */\n  text: Action['text'];\n  /** Name of the icon from the cosmos set. */\n  icon: IconNames;\n  /** Determines if the Action will be disabled. */\n  disabled?: Action['disabled'];\n  /** Called when the Action is clicked. */\n  onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Content of the panel */\n  content: ReactNode;\n  /** Action button to be rendered in header */\n  actions?: FloatingPanelActionProps[];\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n  return css`\n    max-height: calc(100% - 2rem);\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    width: 25rem;\n    inset-inline-end: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      actions = [],\n      draggable,\n      content: cardContent,\n      ...restProps\n    }: PropsWithoutRef<FloatingPanelProps>,\n    ref: FloatingPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [containerRef.current]);\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledFloatingPanel}\n        container={{ direction: 'column' }}\n        ref={containerRef}\n        isCollapsed={collapsed}\n        isDraggable={draggable}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader\n          ref={dragRef}\n          actions={\n            <>\n              {actions.map(({ id, icon, text, ...restAction }) => (\n                <Button {...restAction} icon variant='simple' key={id} label={text}>\n                  <Icon name={icon} />\n                </Button>\n              ))}\n              <Button\n                icon\n                variant='simple'\n                key='expand-collapse'\n                label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                onClick={() => {\n                  resetPopoverToDefaultPosition(containerRef);\n                  setCollapsed(state => !state);\n                }}\n              >\n                <Icon name='caret-down' />\n              </Button>\n            </>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Icon name='phone-solid' />\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        {cardContent}\n      </Flex>\n    );\n  }\n);\n\nexport default FloatingPanel;\n"]}
+{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable,\n  Action,\n  IconNames,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n  /** A string to uniquely identify this Action within the onClick handler. */\n  id: Action['id'];\n  /** The text content of the Action. */\n  text: Action['text'];\n  /** Name of the icon from the cosmos set. */\n  icon: IconNames;\n  /** Determines if the Action will be disabled. */\n  disabled?: Action['disabled'];\n  /** Called when the Action is clicked. */\n  onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Content of the panel */\n  children: ReactNode;\n  /** Action button to be rendered in header */\n  actions?: FloatingPanelActionProps[];\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n  return css`\n    max-height: calc(100% - 2rem);\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    width: 25rem;\n    inset-inline-end: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      actions = [],\n      draggable,\n      children,\n      ...restProps\n    }: PropsWithoutRef<FloatingPanelProps>,\n    ref: FloatingPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [containerRef.current]);\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledFloatingPanel}\n        container={{ direction: 'column' }}\n        ref={containerRef}\n        isCollapsed={collapsed}\n        isDraggable={draggable}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader\n          ref={dragRef}\n          actions={\n            <>\n              {actions.map(({ id, icon, text, ...restAction }) => (\n                <Button {...restAction} icon variant='simple' key={id} label={text}>\n                  <Icon name={icon} />\n                </Button>\n              ))}\n              <Button\n                icon\n                variant='simple'\n                key='expand-collapse'\n                label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                onClick={() => {\n                  resetPopoverToDefaultPosition(containerRef);\n                  setCollapsed(state => !state);\n                }}\n              >\n                <Icon name='caret-down' />\n              </Button>\n            </>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Icon name='phone-solid' />\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default FloatingPanel;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EACL,SAAS,EACT,eAAe,EACf,qBAAqB,EACrB,4BAA4B,EAC5B,YAAY,EACZ,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/CallControlPanel/index.js

@@ -1,5 +1,4 @@
 export { default } from './CallControlPanel';
 export { default as CallControlPanelIcon } from './CallControlPanelIcon';
-export { default as CalleePicker } from './CalleePicker';
 export { default as ExternalCTI } from './ExternalCTI';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAM7C,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './CallControlPanel';\nexport {\n  CallProps,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption\n} from './CallControlPanel.types';\nexport { default as CallControlPanelIcon } from './CallControlPanelIcon';\nexport { default as CalleePicker } from './CalleePicker';\nexport { default as ExternalCTI } from './ExternalCTI';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAS7C,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './CallControlPanel';\nexport {\n  CallProps,\n  CallParticipant,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption,\n  TransferData,\n  TransferReasonOption\n} from './CallControlPanel.types';\nexport { default as CallControlPanelIcon } from './CallControlPanelIcon';\nexport { default as ExternalCTI } from './ExternalCTI';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "3.0.0-dev.12.0",
+  "version": "3.0.0-dev.13.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.12.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.12.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.13.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.13.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",

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

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

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

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

package/lib/components/CallControlPanel/CallTransfer.js

@@ -1,121 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, forwardRef, useState, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, CardContent, CardHeader, Flex, Icon, registerIcon, Text, Card, defaultThemeProp, useI18n, RadioButtonGroup, RadioButton, TextArea, ComboBox, menuHelpers, CardFooter, useUID } from '@pega/cosmos-react-core';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import { ContactsContext } from './CalleePicker';
-registerIcon(timesIcon);
-export const StyledTransfer = styled(Card)(({ theme: { base: { spacing }, components: { card } } }) => {
-    return css `
-      ${StyledCardHeader}, ${StyledCardContent}, ${StyledCardFooter} {
-        padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);
-      }
-      min-width: 28rem;
-    `;
-});
-StyledTransfer.defaultProps = defaultThemeProp;
-const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, ref) => {
-    const t = useI18n();
-    const { contacts } = useContext(ContactsContext);
-    const reasonsList = transferOptions.map(({ id, label }) => {
-        return {
-            id,
-            primary: label
-        };
-    });
-    const [reasons, setReasons] = useState(() => {
-        return menuHelpers.mapTree([...reasonsList], item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    });
-    const selectedReason = useMemo(() => menuHelpers.getSelected(reasons)[0], [reasons]);
-    const contactList = contacts.map(item => {
-        return {
-            id: item.phoneNumber,
-            primary: item.primary
-        };
-    });
-    const [itemsContacts, setItemsContacts] = useState(() => {
-        return menuHelpers.mapTree([...contactList], item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    });
-    const selectedContact = useMemo(() => menuHelpers.getSelected(itemsContacts)[0], [itemsContacts]);
-    const [filterValue, setFilterValue] = useState('');
-    const clearSelection = () => {
-        setItemsContacts(cur => menuHelpers.mapTree(cur, item => {
-            return {
-                ...item,
-                selected: false
-            };
-        }));
-    };
-    const escapeChars = /[.*+\-?^${}()|[\]\\]/g;
-    const getFilterRegex = (inputValue) => {
-        return new RegExp(`^${inputValue.replace(escapeChars, '\\$&')}`, 'i');
-    };
-    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
-    const itemsToRender = useMemo(() => {
-        const newItems = filterValue
-            ? menuHelpers.flatten(itemsContacts).filter(({ primary }) => {
-                return filterRegex.test(primary);
-            })
-            : itemsContacts;
-        return menuHelpers.mapTree(newItems, item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    }, [filterValue, itemsContacts]);
-    const selectItem = (id) => {
-        setFilterValue('');
-        setItemsContacts(cur => menuHelpers.selectItem(cur, id, 'single-select'));
-    };
-    const [comments, setComments] = useState('');
-    const [interaction, setInteraction] = useState(true);
-    return (_jsxs(StyledTransfer, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_transfer_call_heading') }) }) }), _jsxs(CardContent, { container: { itemGap: 1, justify: 'start' }, children: [_jsxs(RadioButtonGroup, { name: t('call_panel_transfer_call_option_label'), children: [_jsx(RadioButton, { label: t('call_panel_transfer_call_and_interaction_option'), id: useUID(), defaultChecked: true, onChange: () => setInteraction(true) }), _jsx(RadioButton, { label: t('call_panel_transfer_call_only_option'), id: useUID(), onChange: () => setInteraction(false) })] }), _jsx(ComboBox, { label: t('call_panel_transfer_reason_label'), required: true, selected: selectedReason
-                            ? {
-                                items: {
-                                    id: selectedReason.id,
-                                    text: selectedReason.primary
-                                }
-                            }
-                            : undefined, menu: {
-                            items: reasons,
-                            onItemClick: id => {
-                                setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));
-                            }
-                        } }), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_transfer_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) }), _jsx(ComboBox, { label: t('call_panel_transfer_to_label'), required: true, selected: selectedContact
-                            ? {
-                                items: {
-                                    id: selectedContact.id,
-                                    text: selectedContact.primary
-                                }
-                            }
-                            : undefined, value: filterValue, onChange: (e) => {
-                            if (!e.target.value)
-                                clearSelection();
-                            setFilterValue(e.target.value);
-                        }, onBlur: () => {
-                            setFilterValue('');
-                        }, menu: {
-                            items: itemsToRender,
-                            onItemClick: selectItem,
-                            accent: filterRegex,
-                            emptyText: t('no_items')
-                        } })] }), _jsx(CardFooter, { alignItems: 'right', justify: 'end', children: _jsx(Button, { variant: 'primary', disabled: !(selectedReason && selectedContact && comments !== ''), onClick: () => {
-                        const transferParam = {
-                            reason: selectedReason.id,
-                            comments,
-                            interaction,
-                            phoneNumber: selectedContact.id
-                        };
-                        onTransferCall(transferParam);
-                    }, children: t('call_panel_transfer_button_label') }) })] }));
-});
-export default CallTransfer;
-//# sourceMappingURL=CallTransfer.js.map

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

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